Den iPhone X har grundligt förändrat appdesign. Med sin unika form och de nya användargränssnittselementen måste designers visa mer flexibilitet och kreativitet för att skapa imponerande appar. I denna guide förklaras steg för steg hur du kan använda Sketch för att anpassa din design efter kraven för iPhone X.
Viktigaste insikterna
- Skärmhöjden på iPhone X är 812 pixlar, vilket skapar utrymme för nya UI-element.
- Navigeringen och flikfältet är högre och kräver justeringar i layouten.
- Det är viktigt att beakta Safe Area för att säkerställa att inga innehåll hamnar i de rundade områdena av skärmen.
- Home Indicator är ett nytt gränssnittselement som måste beaktas vid design.
Sstep-by-step guide
Börja med att skapa en ny iPhone X design i Sketch. Tryck på A för att lägga till ett nytt element och klicka sedan på iPhone X-designen.
Bredden förblir på 375 pixlar, medan höjden ställs in på 812 pixlar. Detta ger dig mer utrymme för att utforma ditt användargränssnitt. Tänk på att de rundade hörnen på skärmen är viktiga för layouten.
Kopiera Home Controller och anpassa designen. Det är klokt att inte använda standardbiblioteken, utan den specifika iPhone X-biblioteket för en mer exakt anpassning. Gå till inställningarna i Sketch och aktivera iOS 11-biblioteket om det inte redan är aktiverat.
Lägg till en standard navigationsfält för att göra gränssnittet konsekvent. Se till att höjden på navigeringsfältet är 88 pixlar jämfört med de 44 pixlar från iPhone 8.
Sök efter statusfältet i iOS 11-biblioteket och lägg även till det. Det ska placeras vid den övre kanten av skärmen.
För flikfältet gäller samma sak: Välj en version med tre flikar från iOS 11-biblioteket och se till att den är 83 pixlar hög så att den passar bra i layouten.
Se till att inga element i designen sträcker sig in i de rundade områdena. Inom programmering kallas detta Safe Area Layout Guide – det är utrymmet du behöver för en säker vy.
Lägg till Home Indicator som en väsentlig del av din design. Den bör placeras i mitten av den nedre kanten.
När du har lagt till de grundläggande elementen kan du kopiera hela sektionen och klistra in den på önskad plats. Kom ihåg att justera mellanrummen efter kopiering.
Upprepa denna process för Chat Controller. Skapa en kopia av designen och döp om den på lämpligt sätt.
Byt ut ikonerna för flikarna och justera presentationen. Här är det viktigt att välja rätt symbolik och texter noggrant.
Observera mellanrummen, särskilt mellan chattbubblor och flikfältet. Håll ett avstånd på 16 pixlar för att säkerställa att elementen harmonierar bra med varandra.
Dessa steg visar hur snabbt du kan anpassa din design till det nya formatet. Om det uppstår oklarheter är det dock inga problem att fortsätta finjustera designen.
Under nästa lektion kommer du att lära dig hur du arbetar med ytterligare effekter i profilområdet, inklusive användning av suddighetseffekter.
Sammanfattning - Effektiv iPhone X-design i Sketch
Att anpassa dina designer till iPhone X öppnar nya möjligheter. Med rätt förståelse för de nya skärmformaten och UI-elementen kan du skapa imponerande användargränssnitt.
Vanliga frågor
Vad är höjden på iPhone X-skärmen?Höjden på iPhone X-skärmen är 812 pixlar.
Hur anpassar jag flikfältet?Flikfältet bör ha en höjd på 83 pixlar för att fungera bra i layouten.
Vad måste jag tänka på vid design?Var uppmärksam på Safe Area och att element inte sträcker sig in i de rundade områdena.
Hur gör jag justeringar i Sketch?Kopiera de befintliga controller-elementen och anpassa dem med hjälp av iOS 11-biblioteket.
Måste jag anpassa navigationsfältet?Ja, navigationsfältet har en höjd på 88 pixlar och bör anpassas för visuell konsistens.
