Návrh používateľských rozhraní, najmä chatovacích aplikácií, môže byť náročná, ale aj kreatívna úloha. V tomto tutoriáli ti ukážem, ako efektívne navrhnúť chatový ovládač v Sketch. Budeme sa zameriavať najmä na vrstvenie prvkov, aby sme ti ušetrili čas a vyvinuli čistý dizajn.
Hlavné poznatky
- Vrstvenie prvkov v Sketch pomáha udržiavať prehľad a rýchlo realizovať zmeny dizajnu.
- Využitie opakovane použiteľných štýlov šetrí čas a zabezpečuje konzistentnosť v dizajne.
- Integrácia dizajnových pravidiel zabezpečuje atraktívny a profesionálny vzhľad.
Podrobný návod
Najprv začneme vytváraním chatového ovládača. Mal by si už byť oboznámený s používateľským rozhraním Sketch, preto sa vrhneme priamo na dizajn.
Krok 1: Vytvorenie chatového ovládača Otvor svoj aktuálny projekt v Sketch a vyber nový artboard pre chatový ovládač. Uisti sa, že si vybral zariadenie iPhone 8, aby si mal vhodnú veľkosť obrazovky. Pomenuj artboard „Chat“ pre jednoduchšie prepojenie.
Krok 2: Kopírovanie navigačného panela Aby si dosiahol jednotný dizajn, skopíruj navigačné panely zo svojho domovského ovládača. Umiestni ich do rovnakého rozloženia ako predtým, aby si zachoval konzistenciu. Stavový a navigačný páne by mali byť identické.
Krok 3: Úprava rozloženia Umiestni pomocné čiary s odstupom 16 pixlov, aby si zabezpečil, že všetky prvky sú presne a upratane zarovnané. Dávaj pozor, aby sa v zarovnaní nevytvárali žiadne „glitche“ tým, že prispôsobíš hodnoty cez inspektorový pohľad.
Krok 4: Prenášanie štýlov Ak chceš použiť štýly z externých knižníc, otvoriť pôvodný dokument, aby si vykonal zmeny. Môžeš tu prispôsobiť farby a písma, ktoré sa majú použiť v celom projekte. To ti umožní rýchlo aplikovať zmeny na všetky súvisiace prvky.
Krok 5: Vytvorenie chatovej bubliny Na zobrazenie správ vytvor novú formu v chatovom ovládači. Vyber farbu pozadia pre novú chatovú bublinu. Vytvoríme modrú a zelenú variantu pre prichádzajúce a odchádzajúce správy.
Krok 6: Vloženie textu Vytvor textové pole v chatovej bubline a zadaj uvítaciu správu, ako napríklad „Ahoj, rád ťa tu vidím!“ Dávaj pozor, aby si prispôsobil farbu písma a štýl, aby bol text výnimočný a dobre čitateľný.
Krok 7: Vytvorenie viacerých možností odpovede Aby si používateľovi predstavil rôzne možnosti odpovede, môžeš použiť kópie chatových bublín. Dávaj pozor, aby bol odstup medzi prvkami rovnomerný. Môžeš pridať ďalšie textové polia s návrhmi na odpovede, napríklad „Aký je tvoj cieľ?“
Krok 8: Úprava prvkov Uisti sa, že všetky prvky majú rovnakú výšku a skopíruj ich, aby si dokončil dizajn rýchlejšie. Pri úprave môžeš použiť skupiny a symboly, ktoré si vytvoril, aby si udržal zmeny konzistentné a jednoduché.
Krok 9: Posledné úpravy a skupinovanie Zhrni všetky prvky do skupín, aby si zvýšil prehľadnosť. Skupiny môžeš pomenovať tak, aby boli ľahko identifikovateľné, ako „Chat_Bubble“ alebo „Možnosti odpovede“.
Zhrnutie - Návrh chatu s vrstvami v Sketch: Podrobný návod
Teraz si sa naučil, ako navrhnúť chatový ovládač v Sketch. Od výberu správneho artboardu až po vytváranie chatových bublín a aplikáciu štýlov si sa zoznámil so efektívnymi technikami, ktoré ti ušetria čas a vytvoria jednotný dizajn.
Často kladené otázky
Ako môžem vytvoriť opakovane použiteľné štýly v Sketch?Môžeš vytvoriť štýly tak, že si vytvoríš textový alebo pozadový štýl a potom ho použiješ na iné prvky.
Aká je výhoda vrstiev v Sketch?Vrstvy pomáhajú organizovať rôzne dizajnové prvky a zjednodušujú zmeny a správu dizajnu.
Ako môžem udržiavať rovnomerný odstup medzi prvkami v Sketch?Využi pomocné čiary a nástroje zarovnania, aby si skontroloval a potvrdil odstup medzi svojimi dizajnovými prvkami.
Aký je dobrý prístup na zohľadnenie ochrany osobných údajov v chate?Uisti sa, že tvoj dizajn obsahuje jasné pokyny o zásadách ochrany osobných údajov, ktoré sú viditeľné pre používateľov.
Akoá úlohu hrá voľba farieb v dizajne chatu?Farby môžu vyvolávať emócie a ovplyvňovať používateľskú skúsenosť. Vyber farby, ktoré zodpovedajú identite tvojej aplikácie a podporujú čitateľnosť.
