Oblikovanje začetnega zaslona s Sketch – Navodila po korakih

V tem besedilu navodilu se boš korak za korakom naučil, kako oblikovati Home Screen za aplikacijo v Sketch. Osredotočili se bomo na osnove in nekatere preverjene principe oblikovanja, da ustvarimo privlačno uporabniško vmesnik. Videli boste, da je postopek preprost in razumljiv, in kmalu boste lahko ustvarili svoje lastne oblike.

Najpomembnejše spoznanje

• Uporaba Sketch-a za ustvarjanje postavitev domačega zaslona
• Pomembni načela oblikovanja za privlačne uporabniške vmesnike
• Uporaba barvnih kod in simbolov za poenostavitev postopka oblikovanja

Navodila korak za korakom

Da začneš s svojim oblikovanjem, odpri Sketch in ustvari nov dokument za svoj domači zaslon.

Najprej izberi iPhone 8 kot svoj oblikovalski okvir. Smiselno je začeti z manjšim zaslonom, saj ta metoda olajša prilagoditev večjim zaslonom.

Zdaj odpri izvirno aplikacijo ali obliko, ki jo želiš uporabiti kot predlogo. Dodali bomo navigacijo, ki podpira strukturo tvoje aplikacije. Začni tako, da izbereš navigacijske elemente.

Klikni na risalno področje in poimenuj ploščo „Barva ozadja domačega zaslona“. Da se prepričaš, da tvoje ozadje kasneje ne bo prosojno, nastavi preprosto barvo ozadja, sprva belo.

Pri naslednjem koraku se osredotoči na ustvarjanje elementa tečaja. Klikni na površino in začni oblikovati kartico tečaja. Kartico boš ustvaril v jasnem, preprostem oblikovanju, ki sledi načelom flat design.

Za oblikovanje kartice je pomembna barva ozadja. Uporabi lahko preprosto modro barvo, da dosežeš takojšnjo vizualno ločitev. Alternativno lahko eksperimentiraš s prehodi barv, da dodaš globino in dimenzijo.

Zdaj dodaj besedilo za tečaj. Prilagodi lahko besedilno polje, da se prepričaš, da je besedilo centrirano in dobro berljivo. Razdalje okoli besedila so ključne. Poskrbi, da držiš približno 16 slikovnih pik prostora do strani, da dosežeš harmonično oblikovanje.

Ko si uredil razdalje in besedilno polje, ustvari opis za tečaj. Tudi pri opisu etikete je pomembno biti pozoren na velikost. Vrednost približno 14 točk velikosti pisave zagotavlja dobro berljivost.

Ko si implementiral osnovne elemente, lahko ustvariš dodatne simbole. Ti bodo koristni, če želiš večkrat uporabiti podobne elemente v svojem oblikovanju. Ustvari simbol za kartico tečaja, da ga lahko ponovno uporabiš v drugih delih svoje aplikacije.

Ko ustvariš svoj simbol, bo samodejno prilagodil spremembe v vseh instancah. Zdaj lahko prilagodiš naslov in opis svojega tečaja, ne da bi bilo treba vse ročno spreminjati. Uporabi preproste oznake besedila, da zagotoviš jasno strukturo.

Da bi tvoje kartice vizualno privlačne, dodaj senco. Poskrbi, da bo ta subtilna, da ne obremeni oblikovanja. Lahka senca omogoča, da se elementi izstopajo in bolje vključijo v celotno sliko.

Uporabi zaobljene robove za svoje kartice, da povečaš vizualno privlačnost. Polmer kota 8 zagotavlja sodoben, čist videz, ki ustreza Apple-ovim smernicam oblikovanja.

Zdaj ustvari še en jasen naslov nad kartico tečaja, da optimiziraš usmerjanje uporabnikov in bolje strukturiraš vsebino. Poskrbi, da ostaneta višina in razdalja do prejšnjega elementa dosledna.

Končno je pomembno razmišljati o doslednem oblikovanju. Ohranite razdalje med vsemi elementi in robovi enotne, da ustvarite harmoničen skupen videz.

Pregled - Oblikuj privlačen domači zaslon s Sketch

Danes so ti koraki pokazali, kako lahko s Sketch-om oblikuješ funkcionalen in privlačen domači zaslon. Z uporabo preprostih načel oblikovanja in usmerjanja uporabnikov lahko ustvariš aplikacijo, ki je tako vizualno privlačna kot tudi dobro deluje.