Stojiš pred izzivom, da ustvariš privlačno Prototyping za Mobility-App. To ni samo o dizajnu; gre za učinkovito oblikovanje uporabniške izkušnje od samega začetka, da uporabniku pomaga intuitivno navigirati po aplikaciji. V tem tutorialu te bomo korak za korakom popeljali skozi proces nastajanja prototipa v Sketch. Začnimo to vznemirljivo potovanje v svet oblikovanja!
Najpomembnejše ugotovitve
- Prototyping je ključni korak pri razvoju aplikacij.
- V Sketch lahko začneš s preprostimi oblikami in dizajni.
- Jasna struktura in usmerjevanje uporabnikov sta za uspeh tvoje aplikacije nezamenljiva.
Navodila korak za korakom
Začni s tem, da ustvariš osnovno strukturo svoje aplikacije v Sketch. Uporabi orodje za čopič, da narišeš svoje prve oblikovalske elemente. Preprosto pojdi na orodje za čopič ali pritisni tipko „P“, da ga izbereš.
Ustvari pravokotnik, ki naj predstavlja ekran tvoje aplikacije. Drži tipko „Alt“ medtem, ko z miško vlečeš pravokotnik. To zagotavlja, da pravokotnik ostane proporcionalen. To že videti dobro.
Zdaj se lotimo oblikovanja prve strani aplikacije. Začni z spodnjo zavihkom. Spet uporabi orodje za čopič in nariši ravno črto, medtem ko držiš tipko Shift, da zagotoviš, da dobiš ravno črto.
Ko oblikuješ zavihek, dodaj tri ikone, ki predstavljajo glavne funkcije aplikacije. S tipko ALT lahko preprosto podvojiš oblike, medtem ko jih premikaš na pravo mesto.
Zdaj se posvetimo zgornji navigacijski vrstici. Spet drži tipko ALT, medtem ko vlečeš še en pravokotni del za navigacijsko vrstico.
Chat mehurčki so naslednji del tvoje aplikacije, ki ga želimo oblikovati. Uporabi orodje za čopič, da narišeš chat mehurček. Ta bo uporabniku takoj prikazan kot pozdrav. Dodaj kratek tekst, ki nagovarja uporabnika, kot na primer „Pozdravljen in dobrodošel v Mobility Appl!”
Da zagotoviš, da je vse skupaj privlačno, lahko mehurčke kopiraš in prilagajaš. Izberi mehurčke in jih potegni navzdol s tipko ALT, da dodaš še en pozdravni tekst, kot "Začni svojo prvo Mobility sejo".
Nato sledi dodajanje gumba za video, s katerim lahko uporabniki predvajajo svoje lekcije. Nariši okrogel gumb z orodjem za čopič in ga kombiniraj s trikotnikom, da jasno prikažeš predstavitev in funkcijo.
Zdaj kopiraj vse pomembne UI elemente – kot so zgornje in spodnje navigacijske vrstice – na naslednjo stran, da zagotoviš doslednost v oblikovanju. Preprosto lahko potegneš posnetek zaslona s tipko ALT, da podvojiš elemente na naslednjo stran.
Na tej novi strani, ki si jo ustvaril, oblikuj možnosti za tečaje. Tukaj bi moral ustvariti preprost pregled razpoložljivih tečajev, ki jih lahko uporabnik izbere.
V profilu lahko ustvariš prostor za profilno sliko, uporabniško ime in število opravljenih ur tečaja. Tukaj je pomembno, da informacije prikažeš jasno in pregledno.
Na koncu oblikuj izbiro tečajev in lekcij, ustvari pregled lekcij in dodaj gumb za zapiranje, da uporabnik lahko izbiro zapre kadar koli.
Tako je osnovni prototip tvoje Mobility aplikacije zaključen. Sedaj imaš privlačen dizajn, ki jasno strukturira uporabo za uporabnike in ti kot oblikovalcu pomaga, da jasno vizualiziraš vizijo aplikacije.
Povzetek – Prototyping Mobility Appl v Sketchu
V teku tega tutoriala si korak za korakom spoznal, kako prototipirati Mobility aplikacijo v Sketch. Od prve ideje do zadnjih oblikovalskih elementov si lahko razširil svoje znanje in ustvaril uporabno orodje za nadaljnji razvoj svoje aplikacije.
Pogosto zastavljena vprašanja
Kako začnem z oblikovanjem v Sketch?Izberi orodje za čopič (P) in začni z ustvarjanjem prvih elementov.
Kako lahko učinkovito podvojim elemente?Drži tipko ALT, medtem ko premikaš element z miško.
Kaj naj storim, če z oblikovanjem nisem zadovoljen?Kdajkoli lahko prilagodiš ali ponovno oblikuješ obstoječe elemente, da dosežeš želeni rezultat.
Kako lahko zagotovim, da je usmeritev uporabnikov jasna?Poskrbi, da so vse funkcije logično razporejene in da uporabnik intuitivno lahko navigira.
Ali lahko v Sketch oblikujem tudi za mobilne naprave?Da, lahko prilagodiš vrsto in velikost elementov glede na velikost zaslona mobilnih naprav.
