V tejto textovej príručke sa naučíš krok za krokom, ako vytvoriť domovskú obrazovku pre aplikáciu v Sketche. Pri tom sa zameriame na základy a niektoré osvedčené zásady dizajnu, aby sme vytvorili atraktívne používateľské rozhranie. Uvidíš, že proces je jednoduchý a zrozumiteľný, a čoskoro budeš môcť vytvárať svoje vlastné dizajny.
Najdôležitejšie poznatky
- Použitie Sketche na vytváranie rozložení domovskej obrazovky
- Dôležité zásady dizajnu pre atraktívne používateľské rozhrania
- Použitie farebných kódov a symbolov na zjednodušenie dizajnérskeho procesu
Príručka krok za krokom
Ak chceš začať so svojím dizajnom, otvor Sketch a vytvor nový dokument pre svoju domovskú obrazovku.
Najprv si vyber iPhone 8 ako svoj dizajnový rámec. Je rozumné začať s menším displejom, pretože tento prístup uľahčuje prispôsobenie sa väčším obrazovkám.
Teraz otvor originálnu aplikáciu alebo dizajn, ktorý chceš použiť ako šablónu. Pridáme navigáciu, ktorá podporí štruktúru tvojej aplikácie. Začni výberom navigačných prvkov.
Klikni na plochu a pomenuj dosku ako „Farba pozadia domov“. Aby si zabezpečil, že tvoje pozadie nebude neskôr priesvitné, nastav jednoduchú farbu pozadia, najprv bielu.
V nasledujúcom kroku sa zameriaš na vytvorenie prvku kurzu. K tomu klikneš na priestor a začneš navrhovať kartu kurzu. Kartu vytvoríš v jasnom, jednoduchom dizajne, ktorý dodržiava zásady plochého dizajnu.
Pre dizajn karty je dôležitá farba pozadia. Môžeš použiť jednoduchú modrú na dosiahnutie okamžitého vizuálneho oddelenia. Alternatívne môžeš experimentovať s farebnými prechodmi, aby si pridal hĺbku a rozmer.
Teraz pridaj text pre kurz. Môžeš prispôsobiť textové pole tak, aby bol text vycentrovaný a dobre čitateľný. Rozostupy okolo textu sú rozhodujúce. Uisti sa, že zachovávaš približne 16 pixlov priestoru po stranách, aby si dosiahol harmonické dizajnovanie.
Ako si usporiadal rozostupy a textové pole, vytvor popis pre kurz. Pri popisnom označení je dôležité dbať na veľkosť. Hodnota približne 14 bodov písma zabezpečí dobrú čitateľnosť.
Ako si implementoval základné prvky, môžeš vytvoriť dodatočné symboly. Budú užitočné, ak chceš viackrát použiť podobné prvky vo svojom dizajne. Vytvor symbol pre kartu kurzu, aby si ho mohol znovu použiť v iných častiach svojej aplikácie.
Keď vytvoríš svoj symbol, automaticky sa prispôsobí vo všetkých inštanciách. Teraz môžeš upraviť názov a popis svojho kurzu bez toho, aby si musel všetko manuálne meniť. Použi jednoduché textové označenie, aby si zabezpečil jasnú štruktúru.
Aby si vizuálne spríjemnil svoje karty, pridaj tieň. Uisti sa, že je subtilný, aby si nepreplnil dizajn. Ľahký tieň zabezpečí, že prvky vyniknú a lepšie zapadnú do celkového obrazu.
Použi zaoblené rohy pre svoje karty, aby si zvýšil vizuálnu atrakciu. Polomer rohu 8 zabezpečí moderný, čistý vzhľad, ktorý je v súlade so smernicami dizajnu Apple.
Teraz vytvor jasný názov nad kartou kurzu, aby si optimalizoval vedenie používateľa a lepšie strukturoval obsah. Uisti sa, že výška a rozostup voči predchádzajúcemu prvku zostávajú konzistentné.
Na záver je dôležité myslieť na jednotný dizajn. Udržuj rozostupy medzi všetkými prvkami a okrajmi konzistentné, aby si vytvoril harmonický celkový obraz.
Zhrnutie - Navrhni atraktívnu domovskú obrazovku so Sketch
Dnešné kroky ti ukázali, ako navrhnúť funkčnú a atraktívnu domovskú obrazovku pomocou Sketche. Aplikovaním jednoduchých zásad dizajnu a používateľského vedenia môžeš vytvoriť aplikáciu, ktorá je vizuálne príťažlivá a dobre funguje.
Často kladené otázky
Akým spôsobom začnem so Sketch?Otvoríš Sketch a vytvoríš nový dokument.
Aké zariadenie by som mal zvoliť ako šablónu?iPhone 8 je vhodný, pretože má štandardnú veľkosť.
Akú dôležitosť majú rozostupy v dizajne?Rozostupy sú rozhodujúce pre čistý a atraktívny dizajn.
Čo sú symboly v Sketche a ako ich využívam?Symboly ti umožňujú vytvárať opakovateľné dizajnové prvky a aplikovať zmeny všade.
Ako môžem pridať tiene do svojho dizajnu?Pridaj tiene cez nastavenia pre „vrstvy“ v Sketche.
