2. diel - Adobe XD - Rozhranie aplikácie - Online kurz

V minulej lekcii, Adobe XD - Úvod , sme si aplikáciu Adobe XD predstavili a zoznámili sa s jej podstatou. Následne sme sa pozreli na možné alternatívy tejto aplikácie. V druhej časti lekcie sme potom Adobe XD nainštalovali a vykonali prvé spustenie.

V dnešnej lekcii sa budeme venovať najmä rozhranie aplikácie Adobe XD. Zoznámime sa s pracovnou plochou, režimy Design a Prototype a v neposlednom rade tiež vybranými panely a nástrojmi.

Prevzatie a otvorenie súboru

Ešte predtým, než začneme preskúmavať rozhranie aplikácie Adobe XD, si prostredníctvom odkazu pod lekcií stiahneme súbor obsahujúci projekt nižšie (Autor projektu: Robert Anitei Robert Anitei):

Teraz začneme tým, že si spustíme aplikáciu Adobe XD a pomocou klávesovej skratky Ctrl + O vyvoláme dialógové okno Open. Následne vyberieme a otvoríme stiahnutý súbor obsahujúci už spomínaný projekt vyššie.

Rozhranie aplikácie

Po otvorení súboru by ste mali vidieť rovnaký pracovný priestor ako na obrázku nižšie:

Poďme si teraz spoločne celý pracovný priestor prejsť, aby sme vedeli, čo sa kde nachádza:

• V ľavom hornom rohu je rozbaľovacej Menu (modrá) - V menu môžeme napríklad vytvoriť nový dokument, otvoriť iný projekt či uložiť existujúce. Ďalej tu nájdeme možnosť spravovať naše pluginy, importovať do projektu ďalšie súbory či exportovať náš dizajn do rôznych formátov.
• Ihneď vedľa sa nachádza tlačidlo Domov (fialová) - Kliknutím na neho sa vrátime na domovskú obrazovku aplikácie.
• Napravo od tohto tlačidla sú k dispozícii Režimy aplikácie (oranžová) - Tu sa môžeme prepínať medzi režimom Design, Prototype a novo i Share. Jednotlivými režimami sa budeme ďalej zaoberať v priebehu kurzu.
• Pod rozbaľovacom menu nájdeme Panel nástrojov (zelená), tomu sa dnes budeme ešte podrobnejšie venovať.
• V ľavom dolnom rohu sú tlačidlá pre Preferencie / Zdroje, Vrstvy a Pluginy (červená).
• Ďalej na pravej strane nájdeme veľký panel Vlastnosti (sivá) - Pomocou tohto panelu môžeme nastavovať či upravovať vlastnosti práve vybraného objektu.
• Uprostred pracovnej plochy sa potom nachádza naše Kresliace plátna.

Rozhranie aplikácie nám ponúka ešte niekoľko ďalších tlačidiel a funkcií. S tými sa samozrejme tiež stretneme, ale až neskôr v tomto kurze.

Režim Design

V režime Design sa ocitneme zakaždým po vytvorení nového projektu alebo otvorenie už existujúceho. Ako už z názvu vyplýva, režim Design slúži na vytváranie a upravovanie obsahu na jednotlivých kresliacich plátnach. Máme tu k dispozícii úplný panel nástrojov, ďalej tiež panel predvolieb / zdrojov a vlastností.

Panel nástroje

Panel nástrojov nám v režime Design ponúka nasledujúcich 8 nástrojov:

• 

  Výber (V) - Slúži pre výber objektov

• 

  Obdĺžnik (R) - Vykreslenie obdĺžnik

• 

  Elipsa (E) - Vykreslenie elipsu

• 

  Mnohouholník (Y) - Vykreslenie mnohouholník

• 

Čiara (L) - Vykreslenie čiaru

• 

  Pero (P) - Vytvára cesty pomocou kotevných bodov a tiahel

• 

  Text (T) - Pridá vodorovný text

• 

  Kresliace plátno (A) - Pridá ďalšie kresliace plátno

• 

  Lupa (Z) - Priblíži / oddiali dokument

Panel predvoľby / zdroje

Na paneli predvoľby / zdroje nájdeme obsah, ktorý sme si v danom dokumente uložili. Môže ísť napríklad o farby, písmo, ikony či hotové komponenty. V jednej z nasledujúcich lekciách sa týmto panelom budeme podrobnejšie zaoberať.

Panel vrstvy

Panel vrstvy v predvolenom stave zobrazuje všetky kresliaci plátna, ktorá máme v súčasnom projekte vytvorená. V prípade, že pomocou nástroja pre výber vyberieme nejaký objekt, panel vrstvy nám zobrazia všetky objekty daného kresliaceho plátna. Podobne ako tomu bolo v Adobe Photoshopu, tak aj v Adobe XD môžeme s vrstvami ďalej pracovať.

Základné práce s vrstvami a skupinami

Výber

Vrstvu, s ktorou chceme pracovať, si musíme najprv vybrať. To vykonáme buď to pomocou nástroja Výber
, Alebo kliknutím na požadovanú vrstvu na paneli Vrstvy. Ak chceme vybrať viac samostatných vrstiev, stačí držať kláves Ctrl a klikať na požadované vrstvy. Alebo môžeme vybrať jednu vrstvu, podržať kláves Shift a vybrať vrstvu druhú. Týmto sa nám vyberú vrstvy medzi týmito dvoma vybranými vrstvami.

Zmena poradia

Poradie vrstiev a skupín možno meniť preťahovaním hore a dole. Je ale nutné mať na pamäti, že horné vrstvy prekrývajú vrstvy umiestnenej nižšie.

Premenovanie

Vrstvu alebo skupinu vrstiev možno premenovať dvojitým kliknutím na existujúce názov.

Skrytie / zobrazenie

Vrstvu alebo skupinu vrstiev možno skryť / zobraziť kliknutím na oko
, Ktoré sa nachádza vedľa danej vrstvy. Oveľa častejšie ale budeme využívať klávesovú skratku Ctrl +,.

Uzamknutie

Jednotlivé vrstvy alebo skupiny vrstiev možno zamknúť kliknutím na zámok
, Aby sme s nimi ďalej nemohli nechtiac manipulovať.

Kopírovanie a vloženie

Vybrané vrstvy alebo skupiny vrstvy možno tiež skopírovať pomocou klávesovej skratky Ctrl + C a vložiť pomocou Ctrl + V.

Duplikovanie

Vrstvu alebo skupinu vrstiev možno duplikovať pomocou klávesovej skratky Ctrl + D.

Zoskupenia

Zoskupenie slúži k presunu alebo transformáciu viacerých vrstiev naraz. Zoskupiť možno dve alebo viac vrstiev či skupín. Vybrané vrstvy zoskupíte pomocou klávesovej skratky Ctrl + G.

Označiť pre export

Vrstvy alebo skupiny vrstiev môžeme označiť pre export kliknutím na ikonu export
alebo pomocou klávesovej skratky Ctrl + E.

Odstránenie

Vrstvu alebo skupinu vrstiev odstránime stlačením klávesu Delete.

Panel vlastnosti

Panel Vlastnosti slúžia na nastavovanie a úprave vlastností práve vybraného objektu. Môže ísť napríklad o farbu, priehľadnosť, veľkosť či umiestnenie. Panel sa mení v závislosti na vybranom objekte, a tak napríklad pre obdĺžnik či text nám panel zobrazí úplne odlišné možnosti. Prácu s týmto panelom si vyskúšame už v nasledujúcej lekcii.

Režim Prototype

Režim Prototype využijeme až v druhej etape nášho projektu. V tomto režime totiž budeme jednotlivé kresliaci plátna navzájom prepájať, a tým následne vizualizovať, ako sa bude môcť užívateľ pohybovať v našej aplikácii. Týmto si môžeme veľmi ľahko otestovať naše používateľské rozhranie. Navyše ide tu možnosť náš prototyp zdieľať s ďalšími členmi tímu či naším klientom a získať tak ihneď spätnú väzbu. My sa týmto režimom budeme viac zaoberať až v druhej časti tohto kurzu.

V budúcej lekcii, Adobe XD - Založenie projektu , si založíme vlastný projekt, na ktorom budeme v priebehu kurzu pracovať. Pripravíme si jednotlivé kresliaci plátna a sa naučíme pracovať s vrstvami, mriežkou a vodítkami.