Tu esi susidūręs su iššūkiu sukurti patrauklų Prototyping Mobility-App. Tai ne tik dizainas; reikia efektyviai sukurti vartotojo patirtį nuo pat pradžių, kad ji padėtų vartotojui intuityviai naršyti programėlėje. Šiame vadove tu būsi vedamas žingsnis po žingsnio per prototipo kūrimo procesą Sketch programoje. Pradėkime šią jaudinančią kelionę į dizaino pasaulį!
Svarbiausios išvados
- Prototyping yra esminis žingsnis programėlės kūrime.
- Sketch programoje gali pradėti nuo paprastų formų ir dizainų.
- Aiški struktūra ir vartotojo gairės yra būtinos tavo programėlės sėkmei.
Žingsnis po žingsnio vadovas
Pradėk nuo pagrindinės savo programėlės struktūros sukūrimo Sketch programoje. Galite naudoti teptuko įrankį, kad pieštumėte pirmuosius dizaino elementus. Tiesiog pasirink teptuko įrankį arba paspausk „P“ klavišą, kad jį pasirinkti.
Sukurk stačiakampį, kuris turėtų vaizduoti tavo programėlės ekraną. Laikyk „Alt“ klavišą nuspaustą, kai pieši stačiakampį su pele. Tai užtikrins, kad stačiakampis išliktų proporcingas. Tai jau atrodo gana gerai.
Dabar atėjo laikas sukurti pirmąją programėlės puslapį. Pradėk nuo apatinės skilties. I novamente naudok teptuko įrankį ir brėžk tiesią liniją laikydamas paspaudęs Shift klavišą, kad užtikrintum, jog gausi tiesią liniją.
Po to, kai suprojektavai skiltį, pridėk tris piktogramas, kurios vaizduoja pagrindines programėlės funkcijas. Naudodamas ALT klavišą gali lengvai dauginti figūras, kai jas tempi į tinkamą vietą.
Dabar pereikime prie viršutinės navigacijos juostos. Laikyk vėl paspaudęs ALT klavišą, kai pieši dar vieną stačiakampį plotą navigacijos juostai.
Kalbų burbuliukai yra kitas tavo programėlės dalis, kurią norime sukurti. Pasinaudok teptuko įrankiu, kad nupieštum kalbų burbulą. Jis iškart bus rodomas vartotojui kaip pasveikinimas. Pridėk trumpą tekstą, kuris kreipiasi į vartotoją, pvz., „Sveiki atvykę į Mobility App!“
Norėdamas užtikrinti, kad viskas atrodytų patraukliai, gali kopijuoti ir pritaikyti burbulus. Pasirink burbulus ir tempk juos žemyn su ALT klavišu, kad pridėtum dar vieną pasveikinimo tekstą, pvz., „Pradėk nuo savo pirmosios Mobility sesijos“.
Kitas žingsnis – įterpti vaizdo įrašo mygtuką, leidžiantį vartotojams leisti savo pamokas. Nupiešk apvalų mygtuką su teptuko įrankiu ir derink jį su trikampiu, kad aiškiai parodytum funkciją ir išvaizdą.
Dabar nukopijuok visus svarbius UI elementus – kaip viršutines ir apatinės navigacijos juostas – į kitą puslapį, kad užtikrintum dizaino nuoseklumą. Paprasčiausiai, laikydamas ALT klavišą, daryk ekrano nuotrauką, kad nukopijuotum elementus į kitą puslapį.
Šiame naujame ekrane, kurį sukūrei, sukurk kurso pasirinkimo galimybes. Čia turėtum sukurti paprastą prieinamų kursų apžvalgą, kurią vartotojas galės pasirinkti.
Profilio peržiūroje gali sukurti vietą profilio nuotraukai, naudotojo vardui ir praėjusių kursų valandų skaičiui. Čia svarbu aiškiai ir aiškiai pateikti informaciją.
Užbaigęs kursų ir pamokų pasirinkimo dizainą, sukurk pamokų apžvalgą ir pridėk uždarymo mygtuką, kad vartotojas galėtų bet kada uždaryti pasirinkimą.
Taip baigtas pagrindinis prototipas tavo Mobility App. Dabar turi patrauklų dizainą, kuris aiškiai struktūruoja vartotojų gaires ir tuo pačiu padeda tau kaip dizaineriui aiškiai vizualizuoti programėlės viziją.
Santrauka – Prototyping Mobility App programoje Sketch
Šio vadovo metu sužinojai, kaip žingsnis po žingsnio prototipuoti Mobility-App programoje Sketch. Nuo pirmos idėjos iki paskutinių dizaino elementų galėjai plėsti savo žinias ir sukurti naudingą įrankį tolimesniam savo programėlės vystymui.
Dažnai užduodami klausimai
Kaip pradėti dizainą programoje Sketch?Pasirink teptuko įrankį (P) ir pradėk kurti pirmuosius elementus.
Kaip efektyviai kopijuoti elementus?Laikyk ALT klavišą nuspaustą, kai tempi elementą pele.
„Ką daryti, jei nesu patenkintas dizainu?“Turi galimybę bet kada koreguoti arba pertvarkyti esamus elementus, kad pasiektum norimą rezultatą.
Kaip užtikrinti, kad vartotojo gairės būtų aiškios?Pasirūpink, kad visos funkcijos būtų logiškai išdėstytos, ir vartotojas galėtų intuityviai naršyti.
Ar galiu kurti dizainą mobiliems įrenginiams programoje Sketch?Taip, gali pritaikyti elementų tipą ir dydį pagal mobiliųjų įrenginių ekrano dydį.
