Ciele
- Zistiť, čo obnáša vaša bakalárska práca po stránke používateľského rozhrania (kvôli Zadaniu C).
- Naučiť sa pracovať s prototypovacím nástrojom Figma.
- Naučiť sa používať komponenty vo Figme pre definovanie opakujúcich sa prvkov.
- Naučiť sa používať automatické rozloženie prvkov vo Figme.
Úvod
Dnešné cvičenie bude venované základom prototypovania. Pre prácu využijeme nástroj Figma, ktorý vo svojej bezplatnej verzii ponúka všetko, čo budeme potrebovať. V tomto nástroji budete pracovať počas celého semestra.
Tento modul vás oboznámi s princípmi práce s nástrojom Figma. Naším cieľom na dnešnom cvičení bude nakresliť návrh používateľského rozhrania veľmi jednoduchého internetového obchodu s mikropočítačmi Raspberry Pi a ich príslušenstvom.
Postup
Krok 1: Bakalárska práca a zadanie C
Do konca tohto týždňa by ste už definitívne mali mať vybratú tému bakalárskej práce. Vašou úlohou je počas nasledujúcich dvoch týždňov zistiť čo najviac o téme:
- Čo je cieľom bakalárskej práce? Čo máte vytvoriť? Aké používateľské rozhranie má byť jej súčasťou?
- Aké ciele a úlohy má spĺňať používateľské rozhranie vytvorené v rámci bakalárskej práce?
- Pre koho má byť toto používateľské rozhranie?
Informácie čerpajte hlavne:
- od vášho školiteľa,
- od potencionálnych budúcich používateľov,
- z internetu, z iných podobných aplikácií, riešení.
Poznámka
Používateľské rozhranie nie je možné vytvoriť bez toho, aby sme vedeli, čo vlastne ideme robiť. Preto je veľká pravdepodobnosť, že kto do tretieho týždňa nestihne úvodné konzultácie, bude meškať s progresom na predmete.
Krok 2: Vytvorenie súboru vo Figme
Zaregistrujte sa na domovskej stránke nástroja Figma. Po registrácií vás nástroj prevedie základnými krokmi práce s ním.
Úloha 2.1
V tutoriáli preskočte vytvorenie tímu a vytvorte nový súbor s dizajnom (New design file). Zobrazí sa vám základná obrazovka nástroja, v ktorej môžete začať pracovať.
Úloha 2.2
Pokračujte v tutoriáli a oboznámte sa tak so základnými časťami nástroja.
Krok 3: Rámec
Úloha 3.1
Vytvorte nový rámec (Frame). Po kliknutí na ikonku nástroja pre vytváranie rámcov si môžete vybrať veľkosť rámca. Vyberte, napríklad, Desktop → Desktop.
Každý rámec najvyššej úrovne predstavuje jednu obrazovku alebo dialóg v prototype. Rámce je však možné aj vnárať pre definovanie zložitejšej štruktúry.
Veľkosť rámca, tak ako každého elementu vo Figme, je možné upravovať pomocou panelu vlastností vpravo.
Úloha 3.2
Zmeňte širku rámca (W) na 1020 pixelov a vyšku (H) na 1250 pixelov.
Krok 4: Základné prvky
Začneme hlavičkou stránky, ktorá obsahuje názov obchodu, pole pre vyhľadávanie, odkazy na prihlásenie a nákupný košík.
Úloha 4.1
Vyberte nástroj Text, alebo stlačte T na klávesnici a vytvorte tak textový blok vo vnútri rámca. Ako text zadajte „RaspberryField.sk“
Umiestnite ho do ľavého horného rohu rámca (X: 50, Y: 28). Vo vlastnostiach písma zvoľte tučný text (Bold), veľkosť 28 a farbu DC3545.
Na pole pre vyhľadávanie použijeme nástroj Obdĺžnik (Rectangle).
Úloha 4.2
Vytvorte obdĺžnik veľkosti 380×30. Nastavte mu zaoblenie rohov na hodnotu 8:
Nastavte farbu pozadia na bielu a pridajte čierne orámovanie s úrovňou nepriehľadnosti (opacity) 30%:
Poznámka
Čiastočná priehľadnosť zabezpečí to, že vizuálne bude orámovanie vyzerať, ako keby bolo tenšie než 1px.
Pridajme aj zvyšné dva prvky hlavičky.
Úloha 4.3
Pridajte textové bloky „Prihlásenie“ a „Košík“ reprezentujúce odkazy na príslušné stránky obchodu. Použite normálnu hrúbku písma a veľkosť 16.
Úloha 4.4
Upravte rozmiestnenie týchto prvkov tak, aby boli vertikálne zarovnané a tvorili akoby tri bloky: názov stránky naľavo, vyhľadávanie v strede, a odkazy napravo. Všimnite si, ako vám Figma pomáha so zarovnaním prvkov.
V tomto momente by hlavička stránky mala vyzerať približne ako na obrázku:
Krok 5: Obrázky
Pri jednotlivých prvkoch rozhrania umiestnených v hlavičke stránky chceme mať aj ikony, znázorňujúce ich funkcionalitu. Pričom význam poľa pre vyhľadávanie bude označený iba ikonou.
Využijeme pritom ikony z projektu Bootstrap, ktoré sú dostupné pod licenciou MIT.
Úloha 5.1
Stiahnite si následovné ikony v formáte SVG a vložte ich do projektu vo Figme:
Na vloženie obrázkov môžete použiť nástroj Place image (v rozbaľovacom menu nástroja Rectangle), alebo jednoducho ich potiahnite myšou na plátno zo správcu súborov (drag & drop).
Poznámka
Ikone vyhľadávania môžete nastaviť nepriehľadnosť 70%, aby lepšie zodpovedala okraju poľa.
Poznámka
Pri použití ikon v reálnom projekte by sme si museli dať pozor na dodržanie podmienok licencie. V danom prípade na uvedenie autora.
Úloha 5.2
Vytvorte z ikoniek komponenty, aby ste ich mohli ľahšie vyhľadávať a pridávať do prototypu. Vytvorenie komponentu sa robí tak, že kliknete na danú ikonku pravým tlačidlom a z kontextového menu vyberiete možnosť Create component. Urobte to pre každú ikonku.
Úloha 5.3
Umiestnite ikonu vyhľadávania na pravý kraj obdĺžnika reprezentujúceho vyhľadávacie políčko. Ikony osoby a košíka umiestnite naľavo od príslušných textových blokov. Podľa potreby upravte rozmiestnenie prvkov.
Poznámka
Niekoľko prvkov môžete združiť, aby ste ich mohli posúvať spoločne. Vyberte ich a v kontextovom menu zvoľte Frame selection.
Pod hlavičkou umiestnime veľký banner s obrázkom a odkazom na úvod do prototypovania hardvéru.
Úloha 5.4
Stiahnite si fotografiu Raspberry Pi zo stránku Unsplash a umiestnite ju do rámca. Zmeňte veľkosť obrázka tak, aby mal rovnakú šírku ako rámec, ale výšku iba 220px. Všimnite si, ako Figma automaticky orezáva obrázok.
Poznámka
Spôsob orezávania je možné ovplyvniť tým, že pri zmene veľkosti sa podrží stlačená klávesa Ctrl alebo Shift.
Úloha 5.5
Umiestnite na obrázok text „Úvod do prototypovania hardvéru ›“. Nech je tučný a má veľkosť 24.
Krok 6: Karta produktu a komponenty
Hlavným obsahom stránky má byť zoznam produktov. Pre návrh zobrazenia použijeme šesť položiek. Položka (tzv. karta) pre produkt sa skladá z:
- obrázka (280×186px),
- názvu (tučný text veľkosti 16px),
- popisu (14px),
- ceny (20px),
- tlačidla pre pridanie do košíka (farba
E9ECEF, text veľkosti 14px).
Úloha 6.1
Vytvorte jednu takúto kartu produktu. Pre vytvorenie tlačidla použite nástroj Obdĺžnik. Obrázok môžete zobrať Wikipédie, ikonu košíka z projektu Bootstrap.
Keďže takýchto kariet budeme mať niekoľko, nie je praktické ich jednoducho kopírovať. Každú zmenu v návrhu by sme potom museli opakovať vo všetkých položkách zoznamu produktov. Pre takéto prípady nám Figma ponúka možnosť vytvoriť komponent.
Úloha 6.2
Vyberte všetky prvky tvoriace kartu produktu a stlačte tlačidlo Vytvoriť komponent (Create component).
Vytvorte ďalšie kópie komponentu a umiestnite ich do dvoch riadkov.
Poznámka
Na vytváranie kópií môžete používať klasickú kombináciu Ctrl-C a Ctrl-V, skrátku Ctrl-D (duplicate), alebo potiahnutie so stlačenou klávesou Alt.
Teraz sú všetky kópie naviazané na hlavný komponent a zmeny v ňom sa automaticky prejavia aj v nich. Pritom hlavný komponent môžete presunúť úplne mimo rámca a vo vnútri nákresu nechať iba jeho kópie. Takto jednoznačnejšie oddelíte komponent od jeho inštancií.
Úloha 6.3
Zmeňte obrázky a text jednotlivých produktov podľa obrázka v úvode cvičenia. Obrázky si môžete požičať napríklad z Wikipédie:
.png){kind=link}
_(cropped).jpg){kind=link}
.jpg){kind=link}
Všimnite si, že obrázky, ktoré majú iný pomer strán nie sú správne orezané.
Úloha 6.4
Zmeňte nastavenia obrázka v hlavnom komponente tak, že namiesto Fill tam bude Fit:
Všetky vlastnosti kópií komponentu, ktoré neboli explicitne zmenené (t.j. v konkrétnej kópii komponentu), zostávajú naviazané na hlavný komponent.
Úloha 6.5
Skúste zmeniť niektorú vlastnosť, veľkosť alebo rozmiestnenie prvkov v hlavnom komponente a sledujte, ako sa tieto vlastnosti aplikujú aj na jeho kópie.
Poznámka
Z tohto dôvodu by sme podľa možností mali vždy meniť iba rodičovský komponent a jeho kópie prispôsobovať iba minimálne.
Krok 7: Automatické rozloženie
Pomocou automatického prichytávania dokážeme komponenty rozmiestniť rovnomerne a správne ich zarovnať. Figma však ponúka aj spôsob, ktorý je oveľa efektívnejší ak máme väčší počet prvkov a potrebujeme, napríklad, meniť ich poradie. Ide o automatické rozloženie (Auto layout).
Skúsme použiť tento nástroj pre rozmiestnenie produktov v rámci jedného riadku. Aby sme mohli ho použiť, musíme vytvoriť vnorený rámec.
Úloha 7.1
Vyberte jeden riadok produktov a v kontextovom menu zvoľte Frame selection.
Úloha 7.2
V novovytvorenom rámci zapnite vlastnosť Auto layout. Teraz môžete nastavovať okraje tohto rámca a vzdialenosti od okrajov. Samotný rámec roztiahnite na celú šírku hlavného rámca.
Úloha 7.3
To isté urobte aj s druhým riadkom produktov. Vyskúšajte teraz presúvanie produktov v rámci riadkov aj medzi nimi.
Poznámka
Podobným spôsobom je možné definovať automatické rozloženie aj pre hlavný rámec, akurát nastaviť mu vertikálne rozloženie prvkov. V takomto prípade je potrebné najprv obaliť do troch samostatných vnorených rámcov hlavičku stánky, banner s odkazom a nadpis Produkty.
Okrem automatického rozloženia Figma ponúka aj možnosť manuálneho umiestňovania prvkov do mriežky alebo stĺpcov.
Krok 8: Päta
Na záver už len doplňte pätu stránky s odkazmi na ďalšie informácie o obchode. Môžete ju vytvoriť ako rámec, ktorý bude mať nastavené šedé pozadie a automatické rozloženie prvkov vo vnútri.
Úloha 8.1
Doplňte pätu stránky s názvom spoločnosti a odkazmi:
- O nákupe
- Doprava
- Kontakt
Doplňujúce úlohy
Úloha A.1
Použite funkcionalitu automatického usporiadania prvkov Auto layout na pekné zarovnanie hlavičky stránky. Za týmto účelom zaobaľte prvky do rámca, nastavte mu šírku na celú obrazovku a zapnite mu funkcionalitu Auto layout. Dvojitým kliknutím na štvorček vo vlastnostiach automatického zarovnávania prvkov nastavíte, aby sa prvky automaticky rozložili s maximálnymi medzerami medzi sebou na celú šírku rámca.
