iPhone X ir pamatīgi mainījis lietotņu dizainu. Ar savu unikālo formātu un jaunajiem lietotāja saskarnes elementiem dizaineriem jāparāda vairāk elastības un radošuma, lai izveidotu iespaidīgas lietotnes. Šajā rokasgrāmatā soli pa solim tiks izskaidrots, kā tu vari izmantot Sketch, lai pielāgotu savu dizainu iPhone X prasībām.
Galvenās atziņas
- iPhone X ekrāna augstums ir 812 pikseļi, kas rada vietu jaunajiem UI elementiem.
- Navigācija un tabulā ir augstākas un prasa pielāgojumus izkārtojumā.
- Ir svarīgi ievērot drošo zonu, lai nodrošinātu, ka nekādi elementi neiekļūst izliekto ekrāna daļu zonā.
- Home indikatoram ir jauns interfeisa elements, kas jāņem vērā dizainā.
Solis pa solim rokasgrāmata
Uzsāc jauna iPhone X dizaina izveidi programmā Sketch. Nospied A, lai pievienotu jaunu elementu, un pēc tam noklikšķini uz iPhone X dizaina.
Platums paliek 375 pikseļi, kamēr augstums tiek iestatīts uz 812 pikseļiem. Tas radīs vairāk vietas, lai izveidotu savu lietotāja saskarni. Ņem vērā, ka ekrāna izliekumi ir svarīgi izkārtojumam.
Kopē Home kontrolieri un pielāgo dizainu. Ieteicams neizmantot standarta bibliotēkas, bet izmantot specifisko iPhone X bibliotēku precīzākai pielāgošanai. Iejiet iestatījumos Sketch un aktivizējiet iOS 11 bibliotēku, ja tā vēl nav pieejama.
Pievieno standarta navigācijas joslu, lai interfeiss būtu konsekvents. Pārliecinies, ka navigācijas joslas augstums ir 88 pikseļi salīdzinājumā ar 44 pikseļiem iPhone 8.
Meklē statusa joslu iOS 11 bibliotēkā un pievieno to arī. Tai jābūt izvietotai ekrāna augšējā malā.
Tabulai attiecas tāds pats princips: izvēlies versiju ar trim cilnēm no iOS 11 bibliotēkas un pārliecinies, ka tai ir 83 pikseļu augstums, lai tā labi iekļautos izkārtojumā.
Pārliecinies, ka dizainā nav elementi, kas ieplūst izliekto zonā. Programmēšanā to sauc par drošo zonu izkārtojuma ceļvedi – tas ir laukums, kas ir nepieciešams drošai skatīšanai.
Pievieno Home indikatoru kā būtisku daļu no sava dizaina. Tam jābūt izvietotam ekrāna apakšējā malā centrā.
Pēc tam, kad esi pievienojis pamata elementus, tu vari nokopēt visu sadaļu un ielīmēt to vēlamajā vietā. Neaizmirsti pielāgot attālumus, pēc tam kad esi to nokopējis.
Atkārto šo procesu čata kontrolierim. Izveido dizaina kopiju un attiecīgi pārdēvē to.
Aizvieto ikonas cilnēm un pielāgo attēlojumu. Šajā gadījumā ir svarīgi rūpīgi izvēlēties pareizo simboliku un tekstus.
Pievērs uzmanību attālumam, īpaši starp čatu burbuļiem un tabulu. Ievēro 16 pikseļu attālumu, lai nodrošinātu, ka elementi labi sader.
Šie soļi parāda, cik ātri tu vari pielāgot savu dizainu jaunajam formātam. Ja rodas neskaidrības, nav nekādu problēmu vienkārši uzlabot dizainu.
Nākamajā nodarbībā tu iemācīsies, kā strādāt ar papildu efektiem profilā, tostarp izplūšanas efektu izmantošanu.
Kopsavilkums – Efektīvs iPhone X dizains programmā Sketch
Tavu dizainu pielāgošana iPhone X atver jaunas iespējas. Ar pareizu izpratni par jaunajiem ekrāna formātiem un UI elementiem tu vari izveidot iespaidīgas lietotāja saskarnes.
Bieži uzdotie jautājumi
Kas ir iPhone X ekrāna augstums?iPhone X ekrāna augstums ir 812 pikseļi.
Kā es pielāgoju tabulu?Tabulai jābūt augstumam 83 pikseļi, lai labi darboties izkārtojumā.
Ko man jāņem vērā dizainā?Pievērs uzmanību drošajai zonai un tam, ka elementi neiekļūst izliekto daļu zonās.
Kā veikt pielāgojumus programmā Sketch?Kopējiet esošos kontrolieru elementus un pielāgojiet tos, izmantojot iOS 11 bibliotēku.
Vai man jāpielāgo navigācijas josla?Jā, navigācijas joslai ir 88 pikseļu augstums un jāpielāgo vizuālai konsekvencei.
