Optimal tilpasning av designet ditt for iPhone X

iPhone X har endret appdesign grunnleggende. Med sitt unike format og de nye brukergrensesnittelementene må designere demonstrere mer fleksibilitet og kreativitet for å lage imponerende apper. I denne veiledningen vil vi trinn for trinn forklare hvordan du kan bruke Sketch for å tilpasse designet ditt til kravene til iPhone X.

Viktigste funn

• Skjermhøyden på iPhone X er 812 piksler, noe som skaper plass for nye UI-elementer.
• Navigasjonen og Tab Bar er høyere og krever justeringer i oppsettet.
• Det er viktig å ta hensyn til Safe Area for å sikre at ingen innhold faller inn i de avrundede områdene på skjermen.
• Home Indicator er et nytt grensesnittelement som må tas med i designet.

Trinn-for-trinn-veiledning

Begynn med å opprette et nytt iPhone X design i Sketch. Trykk A for å legge til et nytt element, og klikk så på iPhone X-designet.

Bredden forblir på 375 piksler, mens høyden er satt til 812 piksler. Dette gir deg mer plass til å designe brukergrensesnittet ditt. Vær oppmerksom på at de avrundede hjørnene på skjermen er viktige for oppsettet.

Kopier Home Controller og juster designet. Det anbefales å ikke bruke standardbibliotekene, men bruke den spesifikke iPhone X-biblioteket for en mer presis tilpasning. Gå til innstillingene i Sketch og aktiver iOS 11-biblioteket hvis det ikke allerede er der.

Legg til en standard navigasjonslinje for å gjøre grensesnittet konsistent. Sørg for at høyden på navigasjonslinjen er 88 piksler i forhold til de 44 pikslene til iPhone 8.

Se etter statuslinjen i iOS 11-biblioteket og legg den også til. Den bør plasseres øverst på skjermen.

For Tab Bar gjelder det samme: Velg en versjon med tre tabber fra iOS 11-biblioteket og sørg for at den er 83 piksler høy, slik at den passer godt inn i oppsettet.

Sørg for at ingen elementer stikker inn i de avrundede områdene i designet. I programmering kalles dette Safe Area Layout Guide – det er rommet du trenger for en sikker visning.

Legg til Home Indicator som en essensiell del av designet ditt. Denne bør plasseres i midten av den nederste kanten.

Etter at du har lagt til de grunnleggende elementene, kan du kopiere hele avsnittet og lime det inn der du ønsker. Husk å justere avstandene etter kopiering.

Gjenta denne prosessen for Chat Controller. Lag en kopi av designet og gi den et passende navn.

Bytt ut ikonene for tabbene og juster presentasjonen. Det er viktig å velge riktig symbolikk og tekst nøye.

Vær oppmerksom på avstandene, spesielt mellom chat-boblene og Tab Bar. Hold en avstand på 16 piksler for å sikre at elementene harmonerer godt sammen.

Dessa steg visar hur snabbt du kan anpassa ditt design till det nya formatet. Men om det finns oklarheter, er det ikke noe problem å finjustere designet videre.

I den neste leksjonen vil du lære hvordan du arbeider med ekstra effekter i profilområdet, inkludert bruk av uskarphetseffekter.

Sammendrag – Effektiv iPhone X-design i Sketch

Å tilpasse designene dine til iPhone X åpner opp nye muligheter. Med riktig forståelse av de nye skjermformatene og UI-elementene kan du lage imponerende brukergrensesnitt.