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.

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.

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).

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.

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 👍.