Navrhování uživatelských rozhraní, zejména chatových aplikací, může být náročný, ale také kreativní úkol. V tomto tutoriálu ti ukážu, jak efektivně navrhnout chatovacího ovladače v Sketch. Budeme se zejména zabývat vrstvením prvků, abychom ti ušetřili čas a vyvinuli čistý design.
Nejdůležitější poznatky
- Vrstvení prvků v Sketch pomáhá udržet přehled a rychle provést změny v designu.
- Použití znovupoužitelných stylů šetří čas a zajišťuje konzistenci v designu.
- Integrace designových pravidel zajišťuje přitažlivý a profesionální vzhled.
Pokyny krok za krokem
Nejprve začneme vytvářením chatovacího ovladače. Měl bys být již obeznámen s uživatelským rozhraním Sketch, proto se ihned pustíme do návrhu.
Krok 1: Vytvoření chatovacího ovladače Otevři svůj aktuální projekt v Sketch a zvol nové plátno pro chatovací ovladač. Ujisti se, že vybereš iPhone 8 jako zařízení, abys měl odpovídající velikost obrazovky. Pojmenuj plátno „Chat“ pro snazší přiřazení.
Krok 2: Kopírování navigační lišty Abychom dosáhli jednotného designu, zkopíruj navigační lišty z tvého domovského ovladače. Umísti je do stejného uspořádání jako předtím, abys zachoval konzistenci. Stavové a navigační lišty by měly být identické.
Krok 3: Úprava rozložení Nastav pomocné čáry s odstupem 16 pixelů, abys zajistil, že všechny prvky jsou přesně a úhledně zarovnány. Dbej na to, aby nevznikaly žádné „glitche“ v zarovnání, a to úpravou hodnot přes inspektor.
Krok 4: Přenos stylů Pokud chceš používat styly z externích knihoven, otevři originální dokument, abys provedl změny. Můžeš zde upravit barvy a písma, která se mají používat v celém projektu. To ti umožní rychle aplikovat změny na všechny související prvky.
Krok 5: Vytvoření chatovací bubliny Pro zobrazení zpráv vytvoř novou formu v chatovacím ovladači. Vyber barvu pozadí pro novou chatovací bublinu. Vytvoříme modrou a zelenou variantu pro příchozí a odchozí zprávy.
Krok 6: Vložení textu Vytvoř textové pole v chatovací bublině a zadej uvítací zprávu, například „Ahoj, rádi tě tu vidíme!“ Dbej na to, abys přizpůsobil barvu písma a styl, aby byl text výrazný a dobře čitelný.
Krok 7: Vytvoření několika možností odpovědi Abychom uživatelům nabídli různé možnosti odpovědi, můžeš použít kopie chatovacích bublin. Dbej na to, aby byl odstup mezi prvky rovnoměrný. Můžeš přidat další textová pole s návrhy na odpovědi, např. „Jaký je tvůj cíl?“.
Krok 8: Úprava prvků Ujisti se, že všechny prvky mají stejnou výšku a zkopíruj je, abys rychle dokončil návrh. Při úpravě můžeš použít skupiny a symboly, které jsi vytvořil, abys zajistil konzistentnost a jednoduchost změn.
Krok 9: Poslední úpravy a seskupení Slouč všechny prvky do skupin, aby se zvýšila přehlednost. Můžeš je pojmenovat tak, aby byly snadno identifikovatelné, např. „Chat_Bubble“ nebo „Možnosti odpovědi“.
Souhrn - Návrh chatu s vrstvami v Sketch: Krok za krokem
Teď už víš, jak navrhnout chatovací ovladač v Sketch. Od výběru správného plátna přes vytváření chatovacích bublin až po aplikaci stylů jsi se naučil efektivní techniky, které ti šetří čas a vytvářejí jednotný design.
Často kladené otázky
Jak mohu vytvořit znovupoužitelné styly v Sketch?Můžeš vytvořit styly tím, že vytvoříš textový nebo pozadový styl a ten pak aplikuješ na jiné prvky.
Jaká je výhoda vrstev v Sketch?Vrstvy pomáhají organizovat různé designové prvky a usnadňují změny a správu designu.
Jak mohu v Sketch udržet rovnoměrný odstup mezi prvky?Použij pomocné čáry a nástroje pro zarovnání, abys zkontroloval a potvrdil odstup mezi tvými designovými prvky.
Jaký je dobrý přístup k zohlednění ochrany soukromí chatu?Zajisti, aby tvůj design obsahoval jasné odkazy na zásady ochrany soukromí, které jsou pro uživatele viditelné.
Jakou roli hraje výběr barev v designu chatu?Barvy mohou vyvolat emoce a ovlivnit uživatelský zážitek. Vyber barvy, které odpovídají identitě tvé aplikace a podporují čitelnost.
