iPhone X pakeitė programėlių dizainą. Su unikaliu formatu ir naujais vartotojo sąsajos elementais dizaineriai turi parodyti daugiau lankstumo ir kūrybiškumo, kad sukurtų įspūdingas programėles. Šiame vadove žingsnis po žingsnio paaiškinama, kaip naudoti Sketch, kad pritaikytum savo dizainą prie iPhone X reikalavimų.
Raktažodžiai
- iPhone X ekrano aukštis yra 812 pikselių, kas leidžia pridėti naujų UI elementų.
- Navigacija ir skirtukų juosta yra aukštesnės ir reikalauja išdėstymo pritaikymo.
- Svarbu atsižvelgti į Safe Area, kad užtikrintum, jog jokie turiniai nepatektų į suapvalintą ekrano dalį.
- Namų indikatorius yra naujas sąsajos elementas, kuris turi būti įtrauktas į dizainą.
Žingsnis po žingsnio vadovas
Pradėk su naujo iPhone X dizaino kūrimu Sketch. Paspausk A, kad pridėtum naują elementą, ir tada paspausk ant iPhone X dizaino.
Plotis lieka 375 pikselių, o aukštis nustatomas 812 pikselių. Tai suteikia daugiau vietos tavo vartotojo sąsajos kūrimui. Atmink, kad suapvalintos ekrano kampai yra svarbūs išdėstymui.
Kopijuok namų valdiklį ir pritaikyk dizainą. Rekomenduojama naudoti ne standartines bibliotekas, o specific iPhone X Library, kad gautum tikslesnę pritaikymą. Eik į nustatymus Sketch ir įjunk iOS 11 Library, jei jos dar nėra.
Pridėk standartinę navigacijos juostą, kad sąsaja būtų nuosekli. Įsitikink, kad navigacijos juostos aukštis yra 88 pikseliai, palyginti su 44 pikseliais iPhone 8.
Surask statuso juostą iOS 11 bibliotekoje ir pridėk ją taip pat. Ji turėtų būti išdėstyta viršutinėje ekrano dalyje.
Panašiai ir skirtukų juostai: pasirink driejų skirtukų versiją iš iOS 11 bibliotekos ir įsitikink, kad jos aukštis yra 83 pikseliai, kad ji gerai tilptų į išdėstymą.
Atkreipk dėmesį, kad dizaino metu jokie elementai neturėtų siekti į suapvalintą zoną. Programavime tai vadinama Safe Area Layout Guide – tai erdvė, kurios reikia saugiai vaizduoti.
Pridėk namų indikatorius kaip esminę dalį savo dizaino. Jis turėtų būti patalpintas viduryje apatinėje dalyje.
Kai pridėsi pagrindinius elementus, gali kopijuoti visą skyrių ir įklijuoti jį norimoje vietoje. Atmink, kad po kopijavimo pritaikytum atstumus.
Pakartok šį procesą Chat Controlleriui. Sukurk dizaino kopiją ir pervadink ją atitinkamai.
Pakeisk skirtukų piktogramas ir pritaikyk atvaizdavimą. Šiuo atveju svarbu kruopščiai pasirinkti simbolius ir tekstus.
Atkreipk dėmesį į atstumus, ypač tarp pokalbių burbuliukų ir skirtukų juostos. Laikykis 16 pikselių atstumo, kad elementai gerai derėtų tarpusavyje.
Šie žingsniai parodo, kaip greitai tu gali pritaikyti savo dizainą prie naujo formato. Jei kas nors neaišku, drąsiai tobulink dizainą toliau.
Kitame pamokose sužinosi, kaip dirbti su papildomais efektais profilio srityje, įskaitant blur efektų naudojimą.
Santrauka – Efektyvus iPhone X dizainas Sketch
Priklausomumas nuo tavo dizainų iPhone X atveria naujas galimybes. Su tinkamu naujų ekrano formatų ir UI elementų supratimu gali sukurti įspūdingas vartotojo sąsajas.
Dažnai užduodami klausimai
Kokia yra iPhone X ekranų aukštis?iPhone X ekranų aukštis yra 812 pikselių.
Kaip pritaikyti skirtukų juostą?Skirtukų juosta turėtų būti 83 pikselių aukščio, kad gerai veiktų išdėstyme.
Į ką reikia atkreipti dėmesį kuriant?Atkreipk dėmesį į Safe Area, kad elementai nepatektų į suapvalintas zonas.
Kaip atlikti pritaikymus Sketch?Kopijuok esamus valdiklių elementus ir pritaikyk juos naudodamasis iOS 11 biblioteka.
Ar turiu pritaikyti navigacijos juostą?Taip, navigacijos juosta turi 88 pikselių aukštį ir turėtų būti pritaikyta vizualiai nuosekliai.
