Stavy ikon: Hover, Active, Disabled a více

Proč stavy ikon věci mění

Statická ikona to není. Když uživatel najede myší na tlačítko se smazáním, měl by vidět, že se s tím něco stane. Když je prvek vypnutý, měl by to poznamenat. A když je ikona aktivní — to musí být vidět. To všechno bez slov. Jen tvar, barva, opacity a možná malá animace.

Správně vytvořené stavy ikon dělají rozdíl mezi aplikací, která terčuje jak kvalitní software, a tou, která se cítí jako klikání v tmě. Není to o tom, aby ikonky vypadaly cool. Je to o komunikaci.

Čtyři základní stavy

Když začínáte, zaměřte se na čtyři stavy, které dělají 80 procent práce. Default, hover, active a disabled. To je to, co lidé skutečně používají. Ostatní — focus, pressed, selected — můžete přidat později.

Default stav

To je ikona v klidu. Bez interakce. Měla by být čitelná, neutrální, ale ne nudná. Pokud je to ikona pro edit, měla by vypadat editovatelně. Pokud to je delete, měla by evokovat pozornost. Všechno se odehrává v rámci vaší designové mřížky — obvykle 24px nebo 32px.

Tloušťka čáry je zde klíčová. Používáme nejčastěji 2px pro ikony 24px a 2–3px pro větší velikosti. Důvod? Pokud je čára příliš tenká, zmizí v maloobrazovkách. Příliš tučná a ikona vypadá těžkopádně.

Hover stav

Když uživatel najede myší, něco se musí stát. Možnosti jsou tři: změna barvy, změna tloušťky čáry, nebo malá animace. My obvykle kombinujeme barvu se subtilním scale efektem — zvětšení o 10–15 procent.

Barva se změnit má. Pokud je default šedá, hover by měl být primární barva. Pokud je to delete ikona, zkuste oranžovou nebo červenou. Uživatel by měl cítit, že se něco stane, když na to klikne.

Animace přechodu by měla být rychlá. 200–300 milisekund je ideální. Pokud je pomalejší, aplikace se cítí zaostalá. Pokud je rychlejší, může to být neviditelné.

Stav active a disabled

Active stav říká: “Toto je aktivní. Toto jsem vybral.” Používáte ho u toggle tlačítek, v menu, v tab navigaci. Barva by měla být výraznější než hover. Někdy se používá i vyplnění — z outlinové ikony na solid.

Disabled je opak. Ikona je tam, ale nedá se s ní pracovat. Opacity se sníží na 50 procent nebo se změní na šedou. Kurzor by měl být “not-allowed”. Barva se neměnit by neměla při hoveru — to by bylo matoucí.

Opacity a barva

Pro disabled stav máte dvě cesty. Buď snížit opacity na 50–60 procent s default barvou, nebo ponechat 100 procent opacity ale změnit barvu na světlou šedou (#d0d0d0 nebo podobně).

Doporučujeme kombinaci: 60% opacity + světlejší barva. Je to jasnější a fungujeveš lépe u přístupnosti. Některé lidi rozlišují barvy špatně, ale opacity změnu vždycky vidí.

• Default: 100% opacity, primární barva
• Hover: 100% opacity, tmavší varianta primární barvy
• Active: 100% opacity, nejsilnější barva + možné vyplnění
• Disabled: 50–60% opacity, šedá barva

Jak to neposrat

Teď k chybám, které všichni dělajeme. Nejčastější? Příliš mnoho změn najednou. Když uživatel najede myší, měnit všechno — barvu, velikost, stín, rotaci — to je příliš. Zůstane to chaotické. Vyberte si jednu primární změnu (barva) a jednu sekundární (malá animace).

Příliš mnoho efektů

Když se ikona změní příliš mnoho, uživatel neví, co se stalo. Změna barvy + rotace + zvětšení + stín + třpyt = chaos. Místo toho si vezměte barvu a malý scale efekt. To stačí.

Druhá chyba: nekonzistentní stavy. Jedna ikona se změní na purple, druhá na modrá, třetí zůstane šedá. To vypadá jako chyba v kódu. Všechny ikony v jednom rozhraní by měly mít stejné stavy. Stejné barvy. Stejné animace.

Konsistenci udržujete jak?

Pomocí design tokenu. Jestliže máte 50 ikon v systému, nemůžete každou designovat jednotlivě. Vytvoříte si sadu pravidel: všechny ikony mají default barvu #6b21a8, hover je #7e22ce, active je #9333ea, disabled je #e9d5ff. Tuto sadu používáte všude.

V Figmě to děláte pomocí komponent. V kódu pomocí CSS tříd. Každý stav má svou třídu: .icon-default, .icon-hover, .icon-active, .icon-disabled. Vývojář pak jen aplikuje správnou třídu a všechno funguje.

Praktické příklady

Vezměme si reálný příklad. Máte tlačítko pro mazání se symbolem koše. Default je šedý. Když uživatel najedete myší, chcete mu dát signál: “Tohle je nebezpečné.” Takže se změní na červenou. Při kliknutí (active stav) je červená temnější a ikona má třeba lehké vyplnění. Pokud je mazání zakázáno (třeba protože nemáte práva), ikona je průsvitná a šedá.

Druhý příklad: ikona pro přidání. Default je šedá. Hover je zelená (pozitivní barva). Active je tmavší zelená. Disabled je opět průsvitná šedá. Všechno logické. Všechno konzistentní.

Animace stavy v kódu

V CSS to vypadá jednoduše. Máte SVG nebo font ikonu. Nastavíte jí transition. Pak v :hover stavu změníte barvu. To je vše. Prohlížeč sám vytvoří plynulou animaci.

icon {
    color: #6b21a8;
    transition: all 250ms ease;
}

icon:hover {
    color: #7e22ce;
    transform: scale(1.1);
}

Pokud používáte React nebo Vue, můžete stavy řídit přes komponenty. Jedna komponenta, několik props (isHovered, isActive, isDisabled) a dynamická barva. Opět: konzistence bez úsilí.

Závěr: Myslíte na stavy hned

Když začínáte designovat sadu ikon, nemyslete jen na default. Myslíte na stavy. Jak bude vypadat hover? Jak active? Co se stane, když je ikona vypnutá? Pokud to vymyslíte hned na začátku, ušetříte si hodin iterací a oprav.

Stavy ikon jsou jako detaily v architektuře. Nikdo na ně nehledí, dokud nejsou špatně. Ale když jsou správně? Aplikace se cítí profesionálně. Kvalitně. Starostlivě vytvořená. To je rozdíl.