Lekce 2 - Adobe XD - Rozhraní aplikace

V minulé lekci, Adobe XD - Úvod, jsme si řekli, proč používat Adobe XD a jak tento program nainstalovat, také jsme si prošli první spuštění. Navíc jsme si uvedli podobné programy.

V dnešní lekci se budeme věnovat zejména rozhraní aplikace Adobe XD. Seznámíme se s pracovní plochou, režimy Design a Prototype a v neposlední řadě také vybranými panely a nástroji.

Stažení a otevření souboru

Ještě předtím, než začneme prozkoumávat rozhraní aplikace Adobe XD, si prostřednictvím odkazu pod lekcí stáhneme soubor obsahující projekt níže (Autor projektu: Robert Anitei Robert Anitei ):

Nyní začneme tím, že si spustíme aplikaci Adobe XD a pomocí klávesové zkratky Ctrl + O vyvoláme dialogové okno Open. Následně vybereme a otevřeme stažený soubor obsahující již zmíněný projekt výše.

Rozhraní aplikace

Po otevření souboru byste měli vidět stejný pracovní prostor jako na obrázku níže:

Pojďme si teď společně celý pracovní prostor projít, abychom věděli, co se kde nachází:

• V levém horním rohu je rozbalovací Menu (modrá) – V menu můžeme například vytvořit nový dokument, otevřít jiný projekt či uložit stávající. Dále zde nalezneme možnost spravovat naše pluginy, importovat do projektu další soubory či exportovat náš design do různých formátů.
• Ihned vedle se nachází tlačítko Domů (fialová) – Kliknutím na něj se vrátíme na domovskou obrazovku aplikace.
• Napravo od tohoto tlačítka jsou k dispozici Režimy aplikace (oranžová) – Zde se můžeme přepínat mezi režimem Design, Prototype a nově i Share. Jednotlivými režimy se budeme dále zabývat v průběhu kurzu.
• Pod rozbalovacím menu nalezneme Panel nástrojů (zelená), tomu se dnes budeme ještě podrobněji věnovat.
• V levém dolním rohu jsou tlačítka pro Předvolby/Zdroje, Vrstvy a Pluginy (červená).
• Dále na pravé straně nalezneme velký panel Vlastnosti (šedá) – Pomocí tohoto panelu můžeme nastavovat či upravovat vlastnosti právě vybraného objektu.
• Uprostřed pracovní plochy se pak nachází naše Kreslící plátna.

Rozhraní aplikace nám nabízí ještě několik dalších tlačítek a funkcí. S těmi se samozřejmě také setkáme, ale až později v tomto kurzu.

Režim Design

V režimu Design se ocitneme pokaždé po vytvoření nového projektu nebo otevření již existujícího. Jak již z názvu vyplývá, režim Design slouží k vytváření a upravování obsahu na jednotlivých kreslících plátnech. Máme zde k dispozici úplný panel nástrojů, dále také panel předvoleb/zdrojů a vlastností.

Panel nástrojů

Panel nástrojů nám v režimu Design nabízí následujících 8 nástrojů:

• Výběr (V) – Slouží pro výběr objektů
• Obdélník (R) – Vykreslí obdélník
• Elipsa (E) – Vykreslí elipsu
• Mnohoúhelník (Y) – Vykreslí mnohoúhelník
• Čára (L) – Vykreslí čáru
• Pero (P) – Vytváří cesty pomocí kotevních bodů a táhel
• Text (T) – Přidá vodorovný text
• Kreslící plátno (A) – Přidá další kreslící plátno
• Lupa (Z) – Přiblíží / oddálí dokument

Panel předvolby/zdroje

Na panelu předvolby/zdroje nalezneme obsah, který jsme si v daném dokumentu uložili. Může se jednat například o barvy, písmo, ikony či hotové komponenty. V jedné z následujících lekcích se tímto panelem budeme podrobněji zabývat.

Panel vrstvy

Panel vrstvy ve výchozím stavu zobrazuje všechna kreslící plátna, která máme v současném projektu vytvořena. V případě, že pomocí nástroje pro výběr vybereme nějaký objekt, panel vrstvy nám zobrazí všechny objekty daného kreslícího plátna. Podobně jako tomu bylo v Adobe Photoshopu, tak i v Adobe XD můžeme s vrstvami dále pracovat.

Panel vlastnosti

Panel Vlastnosti slouží k nastavování a úpravě vlastností právě vybraného objektu. Může se jednat například o barvu, průhlednost, velikost či umístění. Panel se mění v závislosti na vybraném objektu, a tak například pro obdélník či text nám panel zobrazí zcela odlišné možnosti. Práci s tímto panelem si vyzkoušíme již v příští lekci.

Základní práce s vrstvami a skupinami

Výběr

Vrstvu, se kterou chceme pracovat, si musíme nejprve vybrat. To provedeme buď to pomocí nástroje Výběr , nebo kliknutím na požadovanou vrstvu na panelu Vrstvy. Pokud chceme vybrat více samostatných vrstev, stačí držet klávesu Ctrl a klikat na požadované vrstvy. Nebo můžeme vybrat jednu vrstvu, podržet klávesu Shift a vybrat vrstvu druhou. Tímto se nám vyberou vrstvy mezi těmito dvěma vybranými vrstvami.

Změna pořadí

Pořadí vrstev a skupin lze měnit přetahováním nahoru a dolů. Je ale nutné mít na paměti, že horní vrstvy překrývají vrstvy umístěné níže.

Přejmenování

Vrstvu nebo skupinu vrstev lze přejmenovat dvojitým kliknutím na stávající název.

Skrytí / zobrazení

Vrstvu nebo skupinu vrstev lze skrýt/zobrazit kliknutím na oko , které se nachází vedle dané vrstvy. Mnohem častěji ale budeme využívat klávesovou zkratku Ctrl + ,.

Uzamčení

Jednotlivé vrstvy nebo skupiny vrstev lze zamknout kliknutím na zámek , abychom s nimi dále nemohli nechtěně manipulovat.

Kopírování a vložení

Vybrané vrstvy nebo skupiny vrstvy lze také zkopírovat pomocí klávesové zkratky Ctrl + C a vložit pomocí Ctrl + V.

Duplikování

Vrstvu nebo skupinu vrstev lze duplikovat pomocí klávesové zkratky Ctrl + D.

Seskupení

Seskupení slouží k přesunu nebo transformaci více vrstev najednou. Seskupit lze dvě nebo více vrstev či skupin. Vybrané vrstvy seskupíme pomocí klávesové zkratky Ctrl + G.

Označit pro export

Vrstvy či skupiny vrstev můžeme označit pro export kliknutím na ikonu export nebo pomocí klávesové zkratky Ctrl + E.

Odstranění

Vrstvu nebo skupinu vrstev odstraníme stisknutím klávesy Delete.

Režim Prototype

Režim Prototype využijeme až ve druhé etapě našeho projektu. V tomto režimu totiž budeme jednotlivá kreslící plátna navzájem propojovat, a tím následně vizualizovat, jak se bude moci uživatel pohybovat v naší aplikaci. Tímto si můžeme velmi snadno otestovat naše uživatelské rozhraní. Navíc jde zde možnost náš prototyp sdílet s dalšími členy týmu či naším klientem a získat tak ihned zpětnou vazbu. My se tímto režimem budeme více zabývat až ve druhé části tohoto kurzu.

V příští lekci, Adobe XD - Založení projektu, si založíme vlastní projekt, v rámci kterého budeme navrhovat jednoduchou mobilní aplikaci záznamník. Následně si připravíme jednotlivá kreslící plátna a naučíme se pracovat se souvisejícími nástroji a panely.