Ciele
- Vyskúšať si jednoduché animácie v nástroji Figma.
- Zdetailizovať obrazovky 1. prototypu.
- Odovzdať odkazy na 1. prototyp.
Úvod
Animácie spríjemňujú používanie používateľského rozhrania a zlepšujú jeho celkový používateľský zážitok. Správne použité animácie naviac dokážu upútať pozornosť používateľa na tých správnych miestach, či veľmi výrazne podporiť vysvetlenie toho, čo je výsledkom jeho/jej interakcie s rozhraním.
Na dnešnom cvičení budete pokračovať v príprave prvého prototypu a vyskúšate si vytváranie animácií pomocou funkcionality Smart Animate nástroja Figma. Taktiež do začatia nasledujúceho cvičenia odovzdáte odkazy na svoj prototyp.
Postup
Krok 1
Úloha 1.1
Vyskúšajte si krátky video tutoriál na tvorbu animácií v nástroji Figma [8:42].
Poznámka
Odporúčame si otvoriť aj projekt priložený k videu, aby ste si mohli návod vyskúšať.
Pár pomocných poznámok k videu:
- [3:12] Video používa staršiu verziu projektu alebo nástroja, preto pri výbere inej inštancie neprečítaného emailu postupujte podľa obrázka nižšie:
- [4:38] Pri použití premenovacieho nástroja (
Bulk Rename) musíte vybrať všetky inštancie komponentuEmailv danej skupine a až potom použiť skratkuCtrl+R.
Krok 2
Úloha 2.1
Využite pokročilé animácie, ktoré ste sa naučili v predchádzajúcom kroku, vo vašom vlastnom prototype. Pokračujte v detailizácii a finalizácii svojho prototypu.
Krok 3
Úloha 3.1
Prostredníctvom systému Moodle odovzdajte odkaz na projekt v nástroji Figma aj odkaz na bežiaci prototyp.
Odkaz na projekt získate prostredníctvom menu Share nástroja Figma:
Odkaz na bežiaci prototyp získate nasledovne. Prototyp si spustíte kliknutím na tlačidlo Present v pravej hornej časti obrazovky.
Pre účely odovzdávky nastavte zobrazenie prispôsobené na šírku. Ak prototypujete mobilnú aplikáciu, tento krok samozrejme vynechajte. Následne v tomto stave skopírujte odkaz z prehliadača.
Zdroje
- Figma: Video tutoriál na tvorbu animácií (od 8:42)
- Figma: Oficiálne tutoriály
- Figma: Viac o funkcionalite Smart Animate