Daily UI – přepínač

V e-mailu na mě čekala v pořadí již patnáctá Daily UI výzva. Ta byla tentokrát o něčem trochu jednodušším – navrhnout přepínač pro vypnout a zapnout. V rámci výzvy byla poznámka, že bych měl zvážit, co bude vypnuto a zapnuto.

Rozhodl jsem se, že se v rámci této výzvy zaměřím skutečně jen na daný přepínač a zkusím ho udělat trochu zajímavější, i když třeba nepůjde reálně využít.

Přepínač nemusí být obyčejný

Opět jsem začal tím, že jsem si do bloku rozkreslil nějaké nápady. Vycházel jsem z toho, že už jsem nějaké přepínače navrhoval (naposledy v práci jsem se tomu našemu snažil dát trochu veselejší podobu). I proto jsem chtěl zkusit něco nového.

Nějaké nápady pro případné řešení přepínače.
Nějaké nápady pro případné řešení přepínače.

Pohrával jsem si s nápady o tom, že by například:

  • Panáček držel v ruce tabulku s aktuálním stavem a při přepnutí by přeskočil roztočenou kuličku přepínače.
  • Využil staré dobré známé bitové znaky I a O, které bych v rámci transition přepínal mezi sebou.
  • Stav zapnuto udělat jako rozsvícenou žárovku, pro vypnutí bych jí vyšrouboval.

Snažil jsem se přijít s něčím nevšedním a trochu zábavnějším. U posledního nápadu, který jsem načrtl, mě ale napadlo, proč to nezkusit opravdu jednoduše.

Přepínač s emoji aneb Emoggle

Říkal jsem si, že jakákoliv složitější animace by v rámci tak malé komponenty, jako je přepínač, docela zapadla a pointa by mohla vyšumět do prázdna.

Napadlo mě tedy, místo komplikovaných animací skákajících panáčků, zkusit využít Emoji, které jsou dnes hodně populární a jsou v podstatě jednoduché ilustrace.

Výsledná podoba přepínače.
Výsledná podoba přepínače.

Nechtělo se mi používat nějaké obrázky. Říkal jsem si, že to zkusím nejprve pomocí běžných „písmových“ emoji. Jejich transformace nebyla ale plynulá a ve Sketch nejdou převést na obrysy (outline) stejně jako běžné písmo.

Sáhl jsem tedy nakonec po Twemoji, tedy Emojis od Twitter. Ty jsem poté díky tomu, že jsou v SVG, mohl snadno transformovat v plynulou animaci.

Pro výslednou animaci jsem využil dva artboady, na kterých jsem měl dva stavy:

  • Zapnuto,
  • Vypnuto.

S využitím spojení vrstev jsem poté animoval daný přechod mezi stavy. Dílčí animaci mrknutí a spícího Emoji jsem poté animoval v rámci artboardu jako oddělené skupiny (komponenty).

Ukázka animování konkrétní skupiny symbolů ve Flinto.
Ukázka animování konkrétní skupiny symbolů v nástroji Flinto.

Pro stav zapnuto jsem měl celkem jasno – bude to „Usmíváček“. Pro vypnuto jsem zprvu přemýšlel o smutném Emoji, jenže mi to přišlo jako hrozné klišé a zároveň jako nevhodná reprezentace stavu Vypnuto – třeba když vypnete televizi, tak ona není smutná (i když, kdo ví), ale jen vlastně spí. Proto jsem nakonec zvolil „spací“ Emoji.

Varianty Emoji pro stavy přepínače.
Varianty Emoji pro stavy přepínače.

Když jsem pak přepínač ve Flinto animoval a viděl jsem, jak „Usmíváček“ usne, všiml jsem si malé drobnosti – on ten přepínač pak vlastně vypadá jako peřina. Zkusil jsem tedy Emoji natočit tak, aby to vypadalo jako že spí pod peřinou a pak už jen „zhasl“ světlo.

Přepínač vypadá docela jednoduše a vesele. Nejsem si samozřejmě jist, zda by šel použít v nějaké aplikaci, možná by se to dalo (jen by jich u sebe asi nesmělo být víc). Jenže s tím cílem jsem ho vlastně ani nenavrhoval.

Poznámka: Budu moc rád, pokud mi do komentářů napíšete, co si o mém nápadu myslíte. Moc mi to pomůže v dalších výzvách. Díky moc 👍.

Komentáře

Napsat komentář: Gootchick Zrušit odpověď na komentář