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.

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.

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.

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

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.

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

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.

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:

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