iPhone X on põhjalikult muutnud rakenduste disaini. Oma ainulaadse formaadi ja uute kasutajaliidese elementidega peavad disainerid näitama rohkem paindlikkust ja loovust, et luua muljetavaldavaid rakendusi. Selles juhendis selgitatakse samm-sammult, kuidas saad kasutada Sketchi oma disaini kohandamiseks iPhone X nõudmistele.
Olulisemad tõdemused
- iPhone X ekraani kõrgus on 812 pikslit, mis loob ruumi uutele UI-elementidele.
- Navigeerimise ja Tab Bar kõrgus on suurem ja nõuab kohandusi paigutuses.
- On oluline arvestada Safe Area'ga, et tagada, et sisu ei lange ümardatud ekraani piirkonda.
- Home Indicator on uus liideselement, mida tuleb disaini koostamisel arvestada.
Samm-sammult juhend
Alusta uue iPhone X disaini loomisega Sketchis. Vajuta A, et lisada uus element, ja seejärel kliki iPhone X disainile.
Laius jääb 375 pikslile, samas kui kõrgus on seadistatud 812 pikslile. See annab sulle rohkem ruumi kasutajaliidese kujundamiseks. Pea meeles, et ekraani ümardatud nurgad on paigutuse jaoks olulised.
Kopeeri Home Controller ja kohanda disaini. Soovitav on mitte kasutada standardraamatukogusid, vaid kasutada iPhone X raamatukogu täpsema kohandamise jaoks. Mine تنظیمات'esse Sketchis ja aktiveeri iOS 11 raamatukogu, kui see ei ole juba olemas.
Lisa standardne navigeerimisriba, et liidese kujundamine oleks ühtlane. Veendu, et navigeerimisriba kõrgus on 88 pikslit, võrreldes iPhone 8 44 piksliga.
Otsi iOS 11 raamatukogust olekureal ja lisa see samuti. See peaks olema paigutatud ekraani ülemisse äärde.
Tab Bar'i puhul on sama: vali iOS 11 raamatukogust versioon, kus on kolm vahelehte, ja veendu, et selle kõrgus on 83 pikslit, et see sobiks hästi paigutusse.
Veendu, et disaini elemente ei ulatu ümardatud piirkondade sisse. Programmeerimises nimetatakse seda Safe Area Layout Guide'iks – see on ruum, mida vajad turvaliseks vaatamiseks.
Lisa Home Indicator kui oma disaini hädavajalik element. See tuleks paigutada ekraani alumise ääre keskele.
Pärast selle põhielementide lisamist saad kopeerida kogu sektsiooni ja liigutada selle soovitud kohta. Ära unusta pärast kopeerimist vahede korrigeerimist.
Korrake seda protsessi Chat Controller'i jaoks. Loo disaini koopia ja nimeta see vastavalt ümber.
Asenda ikoonid vahelehtede jaoks ja kohanda esitamist. Oluline on hoolikalt valida õige sümboolika ja tekstid.
Pöörake tähelepanu vahede, eriti vestluspallide ja Tab Bar'i vahel. Hoidke 16 pikslise kauguse, et tagada elementide hea kooskõla.
Need sammud näitavad, kui kiiresti saad oma disaini uue formaadiga kohandada. Kui tekivad küsimused, pole probleem, et disaini edasi täiustada.
Järgmises tunnis õpid, kuidas töötada lisiefektidega profiilialal, sealhulgas blur-efektide kasutamisega.
Kokkuvõte – Tõhus iPhone X disain Sketchis
Oma disainide kohandamine iPhone X-ile avab uusi võimalusi. Õige arusaam uue ekraaniformaadist ja UI-elementidest võimaldab sul luua muljetavaldavaid kasutajaliideseid.
Korduma kippuvad küsimused
Mis on iPhone X ekraani kõrgus?iPhone X ekraani kõrgus on 812 pikslit.
Kuidas kohandada Tab Bar'i?Tab Bar'i kõrgus peaks olema 83 pikslit, et see sobiks paigutusse.
Mida pean disaini koostamisel arvestama?Pööra tähelepanu Safe Area'le ja veenduge, et elemendid ei ulatu ümardatud piirkondadesse.
Kuidas teen kohandamisi Sketchis?Kopeeri olemasolevad controller-elemendid ja kohanda neid iOS 11 raamatukogu abil.
Kas pean navigeerimisriba kohandama?Jah, navigeerimisriba kõrgus on 88 pikslit ja see tuleks visuaalse järjepidevuse tagamiseks kohandada.
