Oblikovanje uporabniških vmesnikov, zlasti chat aplikacij, je lahko zahtevna, a tudi ustvarjalna naloga. V tem tutorialu ti bom pokazal, kako lahko učinkovito oblikuješ chat kontroler v Sketch. Pri tem se bomo osredotočili na plastenje elementov (layerjev), da ti prihranimo čas in razvijemo čisto obliko.
Najpomembnejši vpogledi
- Plastni elementi v Sketchu pomagajo ohranjati preglednost in hitro uresničevanje sprememb oblikovanja.
- Uporaba ponovljivih stilov prihrani čas in zagotavlja doslednost v oblikovanju.
- Integracija oblikovalskih smernic zagotavlja privlačen in profesionalen videz.
Navodila po korakih
Najprej začnemo s ustvarjanjem chat kontrolerja. Že bi moral poznati uporabniški vmesnik Sketch, zato bomo neposredno prešli na oblikovanje.
Korak 1: Ustvarjanje chat kontrolerja Odpri svoje trenutno projekt v Sketchu in izberi nov artboard za chat kontroler. Prepričaj se, da izbereš napravo iPhone 8, da bo velikost zaslona ustrezna. Poimenuj artboard „Chat“ za enostavnejšo povezavo.
Korak 2: Kopiranje navigacijske vrstice Za enotno oblikovanje kopiraj navigacijske vrstice iz svojega domačega kontrolerja. Te postavi v isto postavitev kot prej, da ohraniš doslednost. Statusne in navigacijske vrstice naj bodo identične.
Korak 3: Prilagajanje postavitve Postavi vodila na 16 pik razdalje, da zagotoviš, da so vsi elementi natančno in urejeno poravnani. Poskrbi, da ne nastanejo „glitche“, tako da prilagodiš vrednosti prek inšpektorja.
Korak 4: Prenos stilov Če želiš uporabiti stile iz zunanjih knjižnic, odpri izvirni dokument, da izvedeš spremembe. Tukaj lahko prilagodiš barve in pisave, ki jih boš uporabil v celotnem projektu. To ti omogoča hitro uporabo sprememb na vseh povezanih elementih.
Korak 5: Ustvarjanje chat mehurčka Za prikaz sporočil ustvari novo obliko v chat kontrolerju. Izberi barvo ozadja za novi chat mehurček. Ustvarila bomo modro in zeleno različico za prejeta in poslana sporočila.
Korak 6: Vstavljanje besedila Ustvari besedilno polje v chat mehurčku in vnesi sporočilo dobrodošlice, na primer „Živjo, lepo, da si tukaj!“ Poskrbi, da prilagodiš barvo pisave in slog, da bo besedilo izstopalo in dobro berljivo.
Korak 7: Ustvarjanje več odgovorov Da uporabniku predstaviš različne možnosti odgovorov, lahko uporabiš kopije chat mehurčkov. Pri tem poskrbi, da razdalja med elementi ostane enakomerna. Lahko dodaš še dodatna besedilna polja s predlogi za odgovore, na primer „Kakšen je tvoj cilj?“.
Korak 8: Prilagoditev elementov Poskrbi, da imajo vsi elementi enako višino in jih kopiraj, da hitreje zaključiš oblikovanje. Pri prilagajanju lahko uporabiš skupine in simbole, ki si jih ustvaril, da spremembe ostanejo dosledne in enostavne.
Korak 9: Zadnje prilagoditve in grupiranje Sestavi vse elemente v skupine, da povečaš preglednost. Skupinam lahko dodeliš imena, ki so lahko enostavno prepoznavna, na primer „Chat_Bubble“ ali „Možnosti odgovorov“.
Povzetek - Oblikovanje chata s plasti v Sketchu: Navodila po korakih
Sedaj si se naučil, kako oblikovati chat kontroler s Sketchom. Od izbire pravega artboarda do ustvarjanja chat mehurčkov in uporabe stilov si spoznal učinkovite tehnike za varčevanje s časom in ustvarjanje enotnega oblikovanja.
Pogosta vprašanja
Kako lahko ustvarim ponovljive stile v Sketchu?Stile lahko ustvariš tako, da ustvariš stil besedila ali ozadja in ga nato uporabiš na drugih elementih.
kateri je prednost plasti v Sketchu?Plasti pomagajo organizirati različne oblikovne elemente in poenostaviti spremembe ter upravljanje oblikovanja.
Kako lahko ohranim enako razdaljo med elementi v Sketchu?Uporabi vodila in orodja za poravnavo, da preveriš in potrdiš razdaljo med svojimi oblikovnimi elementi.
Kakšen je dober pristop k upoštevanju zaščite podatkov v chatu?Poskrbi, da tvoj dizajn vsebuje jasne namige o pravilih o zasebnosti, ki so vidni uporabnikom.
Kakšna je vloga izbire barv v oblikovanju chata?Barve lahko vzbujajo čustva in vplivajo na uporabniško izkušnjo. Izberi barve, ki ustrezajo identiteti tvoje aplikacije in spodbujajo berljivost.
