High Fidelity Prototypovanie I

Krok 1: Zadanie BP

Na základe UXWF vytvoreného v predošlom kroku teraz vytvoríme User Flow s vysokou vernosťou na úrovni prototypu priamo v nástroji Figma.

Krok 2: Figma

Krok 3: Dizajnový jazyk a dizajnový systém

Úloha 3.2

Prepnite sa na záložku Assets, vyberte Simple Design System a pridajte si ho do projektu.

Pomocou tohto dizajnového systému budete tvoriť celý prototyp.

Prezrite si komponenty a príklady, ktoré ponúka jednoduchý dizajnový systém nástroja Figma. V zozname komponentov vyberte sekciu „Examples“. Sú tam rôzne príklady hotových obrazoviek, ktoré môžeme využiť pre náš dizajn, samozrejme po úpravách.

Krok 4: Tvorba obrazoviek

V rámci našej prípadovej štúdie sme použili obrazovku About, upravili sme si jej menu a obsah pre titulky.com. Využili sme pritom aj existujúce komponenty dizajnového systému. Detaily obrazoviek si môžete pozrieť vo vzorovom príklade.

Krok 5: Komponentový prístup

Podobne ako na predmete Komponentové programovanie, aj na tomto predmete budeme tvoriť rozhrania komponentovo. To je možné a vhodné už od začiatku dizajnového procesu. Komponenty vo Figme simulujú objektové programovanie - majú rodičovské komponenty a ich inštancie. Je možné ich vnárať do kontajnerov (Frame), pomocou ktorých je možné tvoriť usporiadanie obrazoviek (layout).

Odporúčame vytvoriť komponenty pre prvky rozhrania, ktoré sa opakujú, a tiež štýly definujúce predvolený vzhľad viacerých prvkov. Pre titulky.com sme si vytvorili novú stránku (Page) s názvom Design System a tu sme vytvorili viacero komponentov, napríklad kolotoč alebo skupinu prepínacích tlačidiel. Využili sme na to komponenty z dizajnového systému (karty, tlačidlá, pill komponenty a pod.). Nevytvárajte komponenty duplicitne, využite čo najviac z dizajnového systému.

Vlastné komponenty môžeme do projektu vkladať rovnako, ako komponenty Figma dizajnového systému:

Krok 6: Základy Figmovania

Osvedčené postupy

• V celom prototype sa snažte dodržiavať preddefinované farby, štýly, fonty atď. Pokiaľ potrebujete zmeniť niektorú z preddefinovaných vlastností, urobte to globálne, aby ste dodržali konzistentnosť rozhrania.
• Ak potrebujete použiť zložitejšiu animáciu, použite gif obrázok (napr. loader).
• Ak chcete vyskúšať viaceré verzie tej istej obrazovky alebo pohľadu, karty, nakopírujte si pôvodnú verziu a pracujte v nej, aby ste sa vedeli v prípade potreby neskôr vrátiť k predošlej verzii, prípadne aby ste vedeli porovnať rozdiely. V praxi je to veľmi výhodné aj za účelom predvedenia rôznych verzií zákazníkovi alebo nadriadenému.
• Šírky a výšky obrazoviek sa snažte dodržiavať v celom projekte, aby bolo rozhranie jednotné. Ak vytvárate iba časti obrazoviek, ponechajte zodpovedajúci rozmer podľa hlavnej obrazovky. Pre zobrazenie rozsiahlejšieho, myšou rolovateľného obsahu, iba jednodnucho „natiahnite“ obrazovku na jej spodnej strane. Ak potrebujete niektoré časti (napr. menu) pevne ukotviť počas rolovania obrazovky myšou, využite možnosť Position - Sticky v časti Prototype. Tutoriál.
• Na usporiadanie obsahu obrazoviek využite automatické usporiadanie elementov v nástroji Figma (3:50)

Organizácia obsahu pre vývojárov

Pomenovanie a štruktúra komponentov vytvorená vo Figma prototype slúži vývojárom na štruktúrovanie svojho kódu. Je vhodné udržiavať rozumnú architektúru a pomenovanie elementov, komponentov a obrazoviek vo Figme a synchrónne rovnakú architekúru a názvoslovie aj v implementácii. Uľahčuje to akékoľvek budúce zmeny v ďalších verziách prototypov. To isté platí aj pre štruktúru štýlov vo Figme, ktorá sa priamo mapuje na CSS premenné - takýmto spôsobom vieme veľmi rýchlo meniť celé rozhranie malými zmenami na jednom mieste a zároveň zabezpečíme jednoduchosť aktualizácie na strane implementácie.

Krok 7: Pridanie interaktivity

Po prepnutí naspäť na záložku Design sa všetky prechody medzi obrazovkami skryjú. Pre ich opätovné zobrazenie sa môžete kedykoľvek prepnúť naspäť na záložku Prototype.

Krok 8: Spustenie prototypu

Úloha 8.1

Zobrazte si vytvorený prototyp vo webovom prehliadači kliknutím na tlačidlo Present v pravej hornej časti obrazovky.

Poznámka

Pre účely odovzdávky nastavte responzívne zobrazenie. Ak prototypujete výlučne mobilnú aplikáciu, vyberte zobrazenie aktuálnej veľkosti. Bežiaci prototyp v tomto stave vyzdieľate skopírovaním odkazu z prehliadača.

Krok 9: Zadanie BP