Barevné zvýraznění údajů a jeho významy

Semantické barvy

Některé barvy mohou být použity pro vizuální zvýraznění údajů v aplikaci z důvodu změny stavu, komunikace důrazu nebo důležitosti. Toto zvýraznění usnadňuje uživateli okamžité rozpoznání změn či priorit v datech:

• nebezpečí
• upozornění
• úspěch
• informace
• neutrální

Základní stavové (semantické) barvy

Tyto barvy mají přesně definovaný význam a jsou určené pro konkrétní roli:

• danger - kritický stav, chyba, nevratné smazání nebo odstranění údaje (nevratná destruktivní akce).
• warning - upozornění, potenciální riziko, varování, které vyžaduje pozornost, ale ne okamžitý zásah.
• success - úspěch, dokončení akce, úspěšná validace, dokončení procesu nebo postupu, progress.
• info - neutrální informace, systémové sdělení, které nenese zvláštní důraz.
• neutral - vychází ze škály secondary, ukazuje aktivitu/neaktivitu prvků a stavy jako disabled nebo read-only. Použije se na UI prvky, které nenesou zvláštní důraz - dividers, placeholdery, descriptions.

Odstíny semantických barev

Každá sémantická barva je dostupná v logické škále intenzity: od světlého odstínu až po výrazné akcenty. Tato škála existuje jak pro danger, tak pro warning, success, info a neutral, a brand. Intenzity jsou také pojmenované semanticky a jejich název určuje jejich funkci:

• #FFEBE7 Fade - neaktivní, velmi nevýrazné pozadí u komponent.
• #FFD4CD Subtle - pozadí u komponent, jako je Message Box.
• #FFAA9F Mute - odstín se používá pro bordery komponent v neaktivním stavu, pro povrchy u komponent (např. button), nebo slouží jako hover odstín pro subtle.
• #E25949 Medium - sytý odstín pro velmi výrazné prvky, například pro znázornění aktivního stavu prvků, které jsou v barvě intense.
• #D04236 Intense - výchozí odstín pro semantické barvy. Používá se pro ikony, povrchy nebo výrazný text.
• #88100C Emphasize - tmavý kontrastní tón používaný pro text na světlejším pozadí.

Doplňková paleta barev

Tyto barvy nemají systémově pevně určený sémantický význam. Specifickou roli jim definuje designér v rámci konkrétního projektu nebo modulu:

• applegreen
• emeraldgreen
• celestialblue
• majorelleblue
• electricpurple
• sandybrown
• citrine
• indianred

Příklady kdy použít barevné zvýraznění

Změna hodnoty

• Pokud dojde k úpravě hodnoty v tabulce nebo formuláři (např. aktualizace telefonního čísla), použije se podbarvení pro vizuální upozornění na změnu. Povaha změny určuje volbu barvy.

Stavy nebo upozornění

• Barvy komunikují typ stavu (chyba, upozornění, úspěch, informace) v rámci formulářů nebo buněk tabulky tak, aby uživatel rychle identifikoval povahu informace.

Zvýraznění důležitého údaje v textu

• Komponenta Typography podporuje použití stavových i doplňkových barev pro zvýšení důrazu na konkrétní sdělení.

Podporované komponenty

Následující komponenty umožňují vizuální interpretaci informací pomocí barev:

• Table
• Treetable
• Literal
• Tab (Notification Badge)
• Tree (Notification Badge)
• Tag

U dalších komponent jako Panel, Accordion Panel, Feature Container a dalších je možné zvýraznění řešit i pomocí komponenty Tag v barvě, která správně komunikuje důraz nebo sdělení.

Table, Treetable

• Umožňují podbarvení celého řádku i jednotlivých buněk.
• Parametr v buňce tabulky lze zvýraznit ikonou (definovanou na úrovni nastavení value). Pro ikonu je možné použít barvu přes variable color/text/... nebo některou z doplňkových barev (odstín /600).
• V řádku lze používat tlačítka ve stavových variantách (danger, warning, info, success). Property style pro Button se volí podle standardu daného projektu (např. pro projekt Neuron je výchozí style="solid").

Literal

• Pomocná komponenta LiteralValue umožňuje výběr z variant podbarvení.
• Podporuje zobrazení Notification Badge pro signalizaci stavů danger, warning, info, success (varianta value+badge).
• Umožňuje zobrazit ikonu s využitím barev z doplňkové palety design systému (varianta icon+value).

Tabs

• V komponentě Tabs lze aktivovat Notification Badge. Volbou barvy badge se definuje intenzita a typ notifikace.

Tree

• Každý řádek uvnitř Tree umožňuje aktivovat Notification Badge pro signalizaci stavů danger, warning, info, success (varianta value+badge).

Tags

• Komponenta Tag podporuje základní stavové barvy (danger, warning, success, info) i doplňkové barvy (applegreen, celestialblue, citrine atd.).

Tag musí být pomocí autolayoutu vždy pevně spojen s komponentou nebo hodnotou, kterou vizuálně doplňuje. Není dovoleno používat samostatně izolovaný Tag.

Typography

• Umožňuje aplikovat všechny sémantické a doplňkové barvy přímo na text pro zvýraznění informací.

Pozor na vizuální záměnu textu s barvou color/text/brand s komponentou Link.

Ostatní

• Komponenty umožňují zobrazení instancí komponent Notification Badge nebo Tag. Tyto komponenty je možné použít ke komunikaci sdělení.
• Příklad: Accordion Panel nebo Panel mohou mít v rámci obsahu zobrazený Tag nebo Notification Badge v požadované variantě.

Musí být vždy použité nativní funkce komponenty a nesmí se vymýšlet nestandardní chování (např. není možné obarvit celý panel na červeno).

Jak používat

Základní stavové barvy v design systemu jsou svým sémantickým pojmenováním určené pro konkrétní situace. Různé projekty umožňují nahlížet na starší verze a v každé z nich zobrazovat stav konkrétních údajů či celých datových bloků (zda došlo ke smazání, změně nebo editaci). Pro tento účel se používají semantické stavové barvy.

Doména Smlouva: Náhled a porovnávání verzí

Zde jsou konkrétní příklady použití na doméně SML:

1. danger - údaj byl odstraněný ve starší verzi
2. warning - údaj byl změněn
3. success - údaj byl přidán ve vybrané verzi oproti verzi předcházející

• Používá se nativní chování komponent, nevymýšlejí se nové stavy nebo properties. U komponenty Literal je například podbarvená pouze hodnota LiteralValue.

• Záznam v tabulce s údaji smlouvy je zvýrazněn podbarvením celého řádku.

• Podbarvené hodnoty je třeba doplnit kontextem: v případě Smlouvy kdy došlo ke změně a k jakému času je tato hodnota vedená. Použita je komponenta Tooltip a vhodná textace.

Provizní modelátor: Změna úrovně provizní skupiny

V rekapitulaci změn provizní úrovně se porovnává starší (původní) a nově přiřazená úroveň, což uživateli usnadňuje orientaci v provedených změnách (např. přiřazení Zlaté provizní úrovně namísto Výchozí):

1. warning - provizní úroveň před změnou
2. success - nově přiřazená provizní úroveň

Je použité nativní chování komponenty LiteralValue.

Jak nepoužívat

Podbarvování a barevné zvýrazňování nikdy nesmí sloužit pouze jako dekorace. Vždy musí podporovat konkrétní význam a usnadňovat orientaci v datech. Nikdy nesmí být současně použity barvy, které jsou vizuálně lehce zaměnitelné. Došlo by tím k narušení srozumitelnosti sdělení.

Zakázané kombinace (možnost záměny)

• success a applegreen
• danger a indian red
• info a celestial blue
• warning a sandy brown

WCAG

Z důvodu přístupnosti informace nesmí být předávána pouze pomocí barvy. V tabulkách či u textů musí barvu vždy doprovázet textový indikátor, ikona nebo popisek (v Tooltipu).