Optimal tilpasning af dit design til iPhone X

iPhone X har grundlæggende ændret designet af apps. Med sit unikke format og de nye brugergrænseflade-elementer skal designere udvise mere fleksibilitet og kreativitet for at skabe imponerende apps. I denne vejledning forklares det trin for trin, hvordan du kan bruge Sketch til at tilpasse dit design til kravene til iPhone X.

Vigtigste indsigter

• Skærmhøjden på iPhone X er 812 pixels, hvilket giver plads til nye UI-elementer.
• Navigations- og fanebar er højere og kræver justeringer i layoutet.
• Det er vigtigt at være opmærksom på Safe Area for at sikre, at ingen indhold falder ind i de afrundede områder af skærmen.
• Home Indicator er et nyt interface-element, som skal tages med i designet.

Trin-for-trin vejledning

Begynd med at oprette et nyt iPhone X design i Sketch. Tryk A for at tilføje et nyt element, og klik derefter på iPhone X-design.

Bredden forbliver på 375 pixels, mens højden er indstillet til 812 pixels. Dette giver dig mere plads til at designe din brugergrænseflade. Husk, at de afrundede hjørner på skærmen er vigtige for layoutet.

Kopier Home Controller og tilpas designet. Det er tilrådeligt ikke at bruge standardbibliotekerne, men den specifikke iPhone X Library for en mere præcis tilpasning. Gå til indstillingerne i Sketch og aktiver iOS 11 Library, hvis den ikke allerede er aktiveret.

Tilføj en standard navigationslinje for at gøre interfacet mere konsistent. Sørg for, at højden på navigationslinjen er 88 pixels sammenlignet med 44 pixels for iPhone 8.

Søg efter statuslinjen i iOS 11-biblioteket og tilføj den også. Den skal placeres på den øverste kant af skærmen.

Det samme gælder for fanebaren: Vælg en version med tre faner fra iOS 11-biblioteket og sørg for, at den er 83 pixels høj for at passe godt ind i layoutet.

Sørg for, at der ikke er nogen elementer, der stikker ind i de afrundede områder i designet. I programmering kaldes dette Safe Area Layout Guide – det er det rum, du har brug for til en sikker visning.

Tilføj Home Indicator som en essentiel del af dit design. Denne bør placeres i midten af den nederste kant.

Når du har tilføjet de grundlæggende elementer, kan du kopiere hele sektionen og indsætte den det ønskede sted. Husk at justere afstandene efter kopiering.

Gentag denne proces for Chat Controller. Opret en kopi af designet og navngiv det passende.

Erstat ikonerne for fanerne og tilpas visningen. Her er det vigtigt at vælge den rigtige symbolik og tekst omhyggeligt.

Vær opmærksom på afstandene, især mellem chatboblerne og fanebaren. Hold en afstand på 16 pixels for at sikre, at elementerne harmonerer godt med hinanden.

Denne proces viser, hvor hurtigt du kan tilpasse dit design til det nye format. I tilfælde af usikkerhed er det dog ikke et problem at forfine designet yderligere.

I næste lektion vil du lære, hvordan du arbejder med ekstra effekter i profildelen, herunder brugen af sløringseffekter.

Opsummering – Effektivt iPhone X design i Sketch

At tilpasse dine designs til iPhone X åbner nye muligheder. Med den rigtige forståelse af de nye skærmformater og UI-elementer kan du skabe imponerende brugergrænseflader.