Daily UI – odpočítávadlo

V rámci další Daily UI výzvy jsem měl navrhnout odpočítávadlo. Měla by to být aplikace, rozhraní pro troubu, nějaký sportovní odpočet nebo snad odpočet pro NASA? Opět jsem měl volné ruce.

Na Dribbble na mě v té době zároveň vyskočila designová výzva od Adobe – připravit jakýkoliv návrh s využitím funkce auto-animate v Adobe XD. Zkusil jsem tedy návrh tentokrát realizovat právě pomocí tohoto nástroje.

Co třeba digitální kuchyňská minutka?

Hlavou se mi honily myšlenky o tom, jak by takové odpočítávadlo mohlo vypadat. Pro inspiraci jsem si například:

  • Vyzkoušel pár aplikací.
  • Prošel nějaké návrhy na Dribbble.
Jak vypadá odpočítávadlo (časovač), který mám v telefonu.
Jak vypadá odpočítávadlo (časovač), který mám v telefonu.

Nechtělo se mi ale dělat nějaké obyčejné odpočítávadlo, u kterého si z roletek „vytáhnu“ čas nebo jej snad budu muset napsat. Chtěl jsem si opět trochu zaexperimentovat a hledal jsem nějakou zajímavou myšlenku.

Když jsem jednou jel ráno metrem do práce, napadlo mě udělat časovač alá kuchyňská minutka. Prstem bych si „natočil“ potřebný čas a pak si spustil odpočet.

Abych nápad po cestě nezapomněl, načrtnutl jsem si jej na telefonu.
Abych nápad po cestě nezapomněl, načrtnutl jsem si jej na telefonu.

Protože jsem si zrovna něco procházel na telefonu, nápad jsem si na něm rychle načrtnul, abych na něj nezapomněl a dal prostor případným dalším nápadům.

Potřeboval jsem si osahat nástroj

Protože jsem si pro realizaci vybral Adobe XD, které jsem nějaký čas nepoužíval, potřeboval jsem si jej trochu osahat a zjistit, co vlastně auto-animate funkce umí.

Udělal jsem tedy několik variant návrhů, ve kterých jsem zkoušel animovat:

  • Prvky s různým pozadím – bez gradientu, s gradientem, atp.
  • Různé prvky – udělat z kruhu obdelník, udělat z kruhu libovolný tvar.
  • Přechody mezi texty a komponentami (symboly).

A spoustu dalších.

Jak jsem si v Adobe XD hrál s možnostmi auto-animate pro odpočítávadlo.
Jak jsem si v Adobe XD hrál s možnostmi auto-animate pro odpočítávadlo.

Zjistil jsem tedy, co lze z Adobe XD přibližně vymáčknout a pustil jsem se do detailnějšího návrhu.

Provedení

Když jsem začal detailnější návrh připravovat, řekl jsem si, že už bylo dost jednoduchých bílých návrhů. Existuje přece tolik krásných barev nebo přístupů, takže jsem nakonec zkusil udělat trochu kontrastnější návrh s využitím:

  • Dvou tmavých odstínů modré,
  • Bílé pro písmo,
  • Světle modré (blue dodge) pro animaci blobu (viz níže).
Pro návrh jsem si vybral trochu kontrastní barvy.
Pro návrh jsem si vybral trochu kontrastní barvy.

Chtěl jsem si zároveň vyzkoušet udělat něco s blobem (takový ten asymetrický tvar), který je prý dnes v návrhu UI velice trendy. Sáhl jsem tedy po nástroji Blobmaker a připravil si různé objekty, které jsem poté využil v návrhu odpočítávače.

Různé tvary blobu, které jsem vygeneroval pomocí aplikace Blobmaker.
Různé tvary blobu, které jsem vygeneroval pomocí aplikace Blobmaker.

Zároveň jsem přemýšlel o tom, jak by lidé mohli s časovačem interagovat. Ve skice jsem si namaloval například:

  • Nastavit čas „protočením“ číselníku na požadovanou hodnotu.
  • Zmáčknutí pro spuštění či zastavení.
Jak bych si třeba mohl nastavit požadovaný čas pro odpočet.
Jak bych si třeba mohl nastavit požadovaný čas pro odpočet.

Pro animování samotného odpočítávače jsem si připravil několik objektů, se kterými jsem potřeboval pracovat:

  • Unikátní blob pro každý krok odpočtu.
  • Indikátor zbývajícího času, vytvořený pomocí maskování kruhu dalšími objekty.
  • Ciferník jako sadu překrytých čar dalšími kruhy.
Ukázka toho, jak jsem skládal prvky pro animování časovače.
Ukázka toho, jak jsem skládal prvky pro animování časovače.

Nešlo mi správně animovat ručně nakreslený objekt, vždy se trochu podivně kroutil. Proto jsem si to trochu usnadnil – výseč zbývajícího času jsem překryl dalším objektem a v jednotlivých krocích měnil jeho natočení.

Také se mi nepodařilo při nastavování času gestem průběžně měnit čas a nechal jsem jej tedy pouze jako automatický přechod z 00:00 na 00:10.

Výsledek

V principu jsem odpočítávadlo navrhoval tak, aby si člověk vybral čas, spustil odpočet a pak se něco dělo. Říkal jsem si, že veškerá mnou navrhovaná cinkrdlátka jsou vlastně zbytečná, protože na aplikaci vlastně člověk nebude koukat.

Nicméně jsem si chtěl vyzkoušet práci v Adobe XD, takže jsem nad návrhem přemýšlel tak, že:

  • Při odpočítávání se bude blob každou vteřinu měnit.
  • Jakmile dosáhne odpočet 5 vteřin, čas začne blikat a blob se začne měnit rychleji (trochu pro pocit posledního tlaku).
  • Když čas vyprší, rozhraní začne blikat (třeba pomocí inverze) a v reálné aplikaci se spustí nějaký fanatický klakson (nadsázka).

A dospěl jsem tedy k následujícímu výsledku:

Můj výsledný návrh pro časovač.
Můj výsledný návrh pro časovač.

Docela se mi líbí právě daný kontrast a „přelévání“ blobu. Taky jsem si dával pozor na to, ať nic příliš nebliká, protože pokud by něco blikalo rychleji než 3x za vteřinu, mohl by člověk dostat epileptický záchvat. No, snad jsem to dodržel.

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

  1. Zdravím,

    využití konceptu kuchyňské minutky mi přijde super. Jen ten blob je pro mě hodně rušivý. Strhává moji pozornost a musím se příliš soustředit na to, abych chytil zbývající čas.

Napsat komentář