Šiame teksto vadove tu žingsnis po žingsnio išmoksi, kaip sukurti pradžios ekraną programai naudojant Sketch. Mes sutelksime dėmesį į pagrindus ir keletą patikimų dizaino principų, kad sukurtume patrauklią vartotojo sąsają. Pamatysi, kad procesas yra paprastas ir suprantamas, ir tu greitai galėsi kurti savo dizainus.
Svarbiausi supratimai
- Sketch naudojimas pradžios ekranų maketams kurti
- Svarbūs dizaino principai patrauklioms vartotojo sąsajoms
- Spalvų kodų ir simbolių naudojimas dizaino proceso supaprastinimui
Žingsnis po žingsnio vadovas
Norėdamas pradėti savo dizainą, atidaryk Sketch ir sukurk naują dokumentą pradžios ekranui.
Pirmiausia pasirink iPhone 8 kaip savo dizaino rėmelį. Pradėti nuo mažesnio ekrano yra prasminga, nes šis metodas palengvina prisitaikymą prie didesnių ekranų.
Dabar atidaryk originalią programą arba dizainą, kurį norėtum naudoti kaip šabloną. Pridėsime navigaciją, kuri palaikys tavo programos struktūrą. Pradėk pasirinkdami navigacijos elementus.
Klikk ant brėžinio ploto ir pavadink lentą „Pradžios fono spalva“. Norėdamas užtikrinti, kad tavo fono spalva vėliau nebūtų permatoma, nustatyk paprastą fono spalvą, pirmiausia baltą.
Kitame žingsnyje sutelksi dėmesį į kurso elemento kūrimą. Tam paspausk ant ploto ir pradėk kurti kurso kortelę. Sukursi kortelę aiškiu, paprastu dizainu, kuris atitinka plokščio dizaino principus.
Kortelės dizainui svarbi fono spalva. Gali naudoti paprastą mėlyną, kad gautum iš karto matomą vizualinį atskyrimą. Alternatyviai gali eksperimentuoti su spalvų perėjimais, kad pridėtum gylio ir dimensijos.
Dabar pridėk tekstą kursui. Gali pritaikyti teksto lauką, kad užtikrintum, jog tekstas yra centre ir lengvai skaitomas. Tarpai aplink tekstą yra itin svarbūs. Pasirūpink, kad būtų maždaug 16 pikselių atstumas iki šonų, kad gautum harmoningą dizainą.
Kai išdėstei atstumus ir teksto lauką, sukurk aprašymą kursui. Taip pat aprašymo žymelyje svarbu atkreipti dėmesį į dydį. Apie 14 taškų šrifto dydis užtikrina gerą skaitymo aiškumą.
Po to, kai įgyvendinai pagrindinius elementus, gali sukurti papildomus simbolius. Jie bus naudingi, jei norėsi kelis kartus naudoti panašius elementus savo dizaino metu. Sukurk simbolį kursų kortelei, kad galėtum jį naudoti kitose savo programos dalyse.
Kai sukursi savo simbolį, jis automatiškai pritaikys pakeitimus visose instancijose. Dabar gali pritaikyti savo kurso pavadinimą ir aprašymą, nesikreipdamas į viską rankiniu būdu. Naudok paprastus teksto žymeklius, kad užtikrintum aiškią struktūrą.
Norėdamas savo korteles padaryti vizualiai patrauklias, pridėk šešėlį. Užtikrink, kad jis būtų subtilus, kad neapkrautų dizaino. Lengvas šešėlis užtikrina, kad elementai išsiskirtų ir geriau įsilietų į visumą.
Naudok apvalias kampus savo kortelėms, kad padidintum vizualinį patrauklumą. 8 taškų kampo spindulys suteikia modernų, švarų išvaizdą, kuris atitinka „Apple“ dizaino gaires.
Dabar sukurk aiškų pavadinimą virš kurso kortelės, kad pagerintum vartotojų navigaciją ir geriau struktūruotum turinį. Užtikrink, kad aukštis ir atstumas iki ankstesnio elemento išliktų nuoseklūs.
Finally, it is also important to think about a uniform design. Keep the spacing between all elements and the edge layouts consistent to create a harmonious overall picture.
Santrauka - Kurti patrauklų pradžios ekraną naudojant Sketch
Šiandienos žingsniai parodė, kaip tu gali sukurti funkcinį ir patrauklų pradžios ekraną, naudodamas Sketch. Taikydamas paprastus dizaino ir vartotojų navigacijos principus, gali sukurti programą, kuri yra tiek vizualiai patraukli, tiek gerai veikianti.
Dažnai užduodami klausimai
Kaip pradėti naudoti Sketch?Atidaryk Sketch ir sukurk naują dokumentą.
Kurią įrangą turėčiau pasirinkti kaip šabloną?iPhone 8 puikiai tinka, nes jo dydis yra standartinis.
Kaip svarbūs yra atstumai dizaino kontekste?Atstumai yra esminiai, kad dizainas būtų švarus ir patrauklus.
Kas yra simboliai Sketch ir kaip juos naudoti?Simboliai leidžia kurti kartojančius dizaino elementus ir taikyti pakeitimus visur.
Kaip galiu pridėti šešėlių į savo dizainą?Pritaikyk šešėlius per „Kopijų“ nustatymus Sketch.
