Návrh používateľských rozhraní často vyžaduje použitie tvarov a symbolov, aby sa vytvorila pútavá a používateľsky prívetivá skúsenosť. V tomto návode sa naučíš, ako si môžeš tvar vytvoriť sám v Adobe XD a symetricky ho používať na zefektívnenie svojho dizajnu. Budeme hovoriť o práci so základnými nástrojmi, aby si rýchlo vytvoril rôzne ikony a symboly, ktoré môžeš opakovane používať vo svojich projektoch.
Najdôležitejšie poznatky
- Symboly a tvary je možné vytvoriť alebo importovať priamo v Adobe XD.
- Použitie nástroja Pathfinder umožňuje efektívne spájanie čiar na vytvorenie komplexných tvarov.
- Symboly by mali byť používané pre objekty, ktoré sa vyžadujú viackrát, aby sa ušetril čas a zabezpečila konzistencia.
Sprievodca krok za krokom
1. Aktivovanie mriežky a začiatok s nástrojom na čiaru
Aby si mohol začať s vytváraním tvarov, najprv aktivuj mriežku tým, že priblížiš pracovnú plochu. Mriežka pomáha presne zarovnať prvky. S nástrojom na čiaru môžeš dosiahnuť veľa. Klikni naň a podrž kláves Shift, aby si nakreslil rovno čiaru.
2. Vytvorenie šípok s Pathfinder
Teraz môžeš prispôsobiť veľkosť čiar, ktoré si nakreslil/a. Označ všetky čiary, ktoré si nakreslil/a, aby si mohol/a použiť nástroj Pathfinder. Použi funkciu "Pridať", aby si spojili čiary do jednej šípky. Ak sú rohy príliš ostré, aktivuj možnosť zaoblených rohov.
3. Vytvorenie ikony Hamburger
Pre ikonu Hamburger najprv nakresli čiaru so špecifickou hrúbkou. Potom vyber opakované mriežky a pridaj ešte dve čiary, aby si vytvoril tri čiary pre ikonu. Následne skupinuj čiary, aby si ikonu udržal stabilnú.
4. Použitie nástroja na cestu na vytvorenie kreatívnych tvarov
Teraz využijeme nástroj na cestu na vytvorenie kreatívnejších tvarov. Nakresli kruh a potom pridaj pomocou nástroja Pathfinder niekoľko ďalších kotevných bodov. To umožní vytvorenie zakrivených tvarov, ako je ikona Wi-Fi. Nezabudni prispôsobiť hrúbku čiary a celú formu skupinovať.
5. Vytvorenie tlačidiel a úprava textu
Aby si vytvoril tlačidlo, nakresli obdĺžnik a vyber pre neho vhodnú farbu alebo prechod. Potom pridaj textové pole, aby si tlačidlu priradil popis. Nezabudni, že zmeny textu nebudú globálne aplikované na všetky tlačidlá, ak sú uložené ako symbol.
6. Vytváranie a ukladanie symbolov
Aby si vytvoril symboly, označ prvky, ktoré chceš použiť ako symbol, a využij skratku Command (Ctrl) + K, aby si ich previedol do panelu so symbolmi. Týmto spôsobom môžeš tie isté prvky používať viackrát, bez toho aby si ich musel/a znova vytvárať pri každom použití.
7. Využitie schopností úpravy symbolov
Pokud chceš zmeniť symbol vo svojom dizajne, ale nechceš, aby bola zmena globálna, môžeš uvoľniť hromadenie symbolu alebo ho previesť na normálny tvar. To ti umožní individuálne úpravy bez dopadu na iné inštancie symbolu.
8. Využitie funkcie vyhľadávania
Ak máš vo svojom dizajne veľa prvkov, vyhľadávacia funkcia v paneli so symbolmi ti umožní rýchlo nájsť konkrétny symbol. Použi na to jednoducho filter, aby si prehľadával symboly a ľahšie ich spravoval.
Zhrnutie - Adobe XD: Efektívne využívanie symbolov a tvarov
Na záver, Adobe XD ti poskytuje nástroje na efektívne vytváranie a spravovanie tvarov a symbolov. S predloženými technikami a skratkami si schopný/á optimalizovať svoje dizajnové procesy a vytvárať konzistentné dizajny.
Často kladené otázky
Ako vytvorím nový symbol v Adobe XD?Označ požadovaný prvok a stlač Command (Ctrl) + K, aby si ho uložil do panelu so symbolmi.
Čo sa stane, ak odstránim symbol z panelu so symbolmi?Symbol bude odstránený z knižnice, ale zostane viditeľný na artboarde.
Môžem zmeniť veľkosť už vytvoreného symbolu?Áno, ak prispôsobíš hrúbku čiary, všetky inštancie symbolu sa automaticky zmenia.
Ako môžem upraviť niekoľko inštancií symbolu bez toho, aby som ich globálne zmenil?Uvoľni skupinovanie pravým kliknutím alebo použi skratku Command (Shift) + G.
Fungujú texty v symboloch rovnako ako ostatné prvky?Nie, zmeny textu symbolu sa prejavia iba na konkrétnej inštancii a nie na iných.
