Design til iPhone X

IPhone X (læst: iPhone ti) er officielt her, og den vil være den 3. november. Det rocker en Super Retina-skærm fra kant til kant med en opløsning på 1125 × 2436px. Det har også en udskæring øverst på skærmen, hvor du kan finde nogle futuristiske ansigtslåse funktioner.

Designe til denne smukke maskine bringer nogle nye udfordringer, men også nogle nye designmuligheder. Enhedens bredde i portrættilstand er den samme som iPhone 6, 7 og 8, men er 145pt højere, hvilket resulterer i ± 20% mere lodret plads. Når du designer @ 1x har du brug for et tegnebræt på 375 × 812px. Du eksporterer ikke billeder @ 2x som iPhone 8, men @ 3x som iPhone 7-8 Plus på grund af det nye nethindeskærm.

Når du opretter dit design, skal du sørge for, at du ikke skjule dit brugergrænseflade med enhedernes unikke funktioner (de runde kanter, udskæringen øverst og hjemindikatoren). Forresten, Hjem-indikatoren er den lille linje, der bor på bunden af ​​din skærm, den erstatter den fysiske hjemmeknap. Du stryger op fra en hvilken som helst app for at gå tilbage til din hjemmeskærm eller til multitasking.

^ Se den hvide linje, det er den nye hjemmeindikator.

Hvis du i øjeblikket har en app, der bruger iOS-indbygget komponent, vil du være i orden, og din app er allerede tilpasset til denne nye iPhone. Dette kan være navigationsbjælker, tabeller, samlingsvisninger og fanebjælker. De indsættes automatisk og placeres.

^ iPhone 8-design til venstre, automatisk tilpasset til iPhone X til højre

Hvis du bruger brugerdefineret layout, skal din app muligvis opdateres til det nye skærmlayout. Hvis du bruger Auto Layout, kan det dog være forholdsvis let.

Lad os komme igang

For det første, omfavne enhedsdesignet, Apple-medarbejdere arbejdede ikke så hårdt for dig at skjule de vidunderlige funktioner i dette dyre stykke hardware.

Sørg for at oprette en fuld skærmoplevelse. Lad rullevisninger rulle til bunden af ​​skærmen, endda ud over kanterne på den buede bund på skærmen. Apple beder dig også venligst om ikke at skjule udskæringen øverst og de buede kanter i bunden, så lad ikke placere sorte bjælker for at få det til at se ud som en almindelig iPhone 8 af gamle skoler.

Center og indsæt vigtig information. Sørg for, at vigtigt indhold er justeret i midten, og brug symmetriske sæt, så dit UI ikke bliver klippet af enhedens sensorer eller hjørner. Hvis du bruger Auto Layout, placeres dit indhold automatisk inden for et sikkert område, så dit design ikke skjules bag hjørnerne, sensorer eller hjemme-indikatoren.

Den nye statuslinje. På grund af sensorer øverst på displayet er den nye statuslinje delt i 2 dele. Hvis dit UI gør noget specielt med den plads (tidligere 20pt høj, nu 44pt), skal du opdatere din grænseflade, fordi den vil være højere på iPhone X. Sørg for, at den dynamisk kan ændres i højden. En god ting er, at højden ikke ændres, hvis en bruger foretager et telefonopkald eller bruger en navigationsapp, hvilket tidligere var tilfældet på andre iPhones.

^ split og højere statuslinje

Vis den nye statuslinje. Hvis du i øjeblikket skjuler statuslinjen i dit design, beder Apple dig om at overveje denne beslutning igen. Da skærmen er højere, og du har mere ejendom til at vise dit indhold, kan det være nyttigt at skjule denne statuslinje. Brugere kan finde nyttige oplysninger derude, og pladsen vil for det meste ikke blive brugt af andre UI-elementer.

Fuldskærmsbilleder. Hvis du i øjeblikket bruger billeder på fuld skærm i dit design, skal du opdatere dem til den nye iPhone. De kan beskæres, og en væsentlig del af det visuelle kan være skjult.

Anbring ikke interaktive kontroller i bunden af ​​skærmen. Afstanden omkring hjemindikatoren er rent oprettet til bevægelser, stryg op for at gå hjem. Det er muligvis ikke godt at placere knapper nær denne indikator eller i de nederste runde hjørner på displayet. Brugere kan ved et uheld bruge hjemmebevægelsen, og dit UI vil være vanskeligt at nå. Du kan dog stadig bruge fanebjælker og funktionsbjælker, men husk, at de ikke skal forstyrre hjemmeindikatoren.

Skjul ikke hjemmeindikatoren (hele tiden). iOS gør det muligt at skjule hjemmeindikatoren i din app. Dette skjuler den automatisk, når brugeren ikke berører skærmen i et par sekunder. Det vises igen, når brugeren berører skærmen igen, dette skal hovedsageligt bruges til forbløffende oplevelser som visning af videoer eller fotos. Hjemindikatoren skifter også automatisk farve baseret på baggrund af din app.

Flere farver. Den nye Super Retina Display viser flere farver, P3-farve i stedet for sRGB. Dette betyder, at det viser rigere og mere mættede farver. Især video og fotos vil drage fordel af dette bredere farveområde.

(Opdatering: P3-farvespektret blev tilføjet siden iPhone 7, takket være Marcelo Ávalos)

Svej op, vær opmærksom med brug af bevægelser. Da den fysiske hjemmeknap er væk, interagerer du med din iPhone (mere end nogensinde) ved hjælp af bevægelser. Når du stryger op, går du hjem eller går til visningen med flere opgaver. Når du stryger til venstre og højre på Hjem-indikatoren, skifter du mellem dine åbne multitasking-apps. Ved at stryge ned fra toppen af ​​skærmen går du til dit underretnings- eller kontrolcenter. Mere i spil kan du bruge brugerdefinerede bevægelser, der kan tilsidesætte de oprindelige iOS-bevægelser. Du kan bruge dine egne bevægelser ved at implementere "kantbeskyttelse", som er en funktion, som foretrækker appens specifikke gestus først, før OS-gestus, dog kun en gang. Brug dette sparsomt, fordi det vil gøre det sværere for din bruger at bruge systemfunktioner.

Face ID. Den forrige iPhone har en stor funktion Touch ID, som gjorde det muligt for brugere at låse op for deres enhed eller udføre handlinger, der er låst med adgangskoder i apps ved hjælp af deres fingeraftryk. Denne sensor var skjult inde i hjemmeknappen, da den er gået i iPhone X, erstattede Apple den med en mere avanceret og sikker måde at låse din enhed op. Indtast Face ID, det bruger nogle virkelig gode algoritmer til at registrere dit ansigt og låse din enhed op. Dette viser nogle nye brugergrænseflader i apps, skal du sørge for at implementere det for dine (rige) brugere, der har en iPhone X. Sørg også for, at du ikke henviser til Touch ID længere i din onboarding eller menu, udskift den med Face ID .

Tilpassede tastaturer. Når du designer et tilpasset tastatur, skal du ikke tilføje en Emoji- eller dikteringsknap til dit tastatur. Fordi det automatisk tilføjes under tastaturet omkring hjemindikatoren.

Større navigationsbjælker. Med iOS 11 fik designet af de indbyggede navigationsbjælker en opdatering, de er nu langt højere. Dette design vil især være fantastisk på den højere iPhone X og vil passe godt sammen med den nye statuslinje. Så overvej at bruge det i dit design. Disse vil også have nogle dejlige native animationer, når du ruller.

TL; DR

  • IPhone X er 145pt højere, så design til 375 × 812pt i stedet for 375x667pt
  • IPhone X bruger @ 3x aktiver.
  • Opret en fuldskærmsoplevelse, skjul ikke enhedernes unikke funktioner.
  • Centrer det vigtige indhold af dit brugergrænseflade for at sikre, at det altid er synligt og ikke skjult af enhedens sensorer eller hjørner.
  • En ny højere split-in-to statuslinje, tidligere 22pt, nu 44pt høj.
  • Fuldskærmbilleder skal / bør opdateres, så de vises fuldt ud.
  • Tilføj ikke knapper i bunden af ​​skærmen i nærheden af ​​Hjem-indikatoren.
  • Skjul ikke hjemmeindikatoren, kun når det virkelig er nødvendigt.
  • Rigere og mere mættede farver takket være P3-farvespektret.
  • Vær opmærksom på brugerdefinerede bevægelser i nærheden af ​​hjemmeindikatoren og statuslinjen, ikke rod med brugerens forventede oprindelige bevægelser.
  • Face ID erstatter Touch ID, opdaterer dit UI og erstatter teksthenvisninger til Touch ID.
  • Brugerdefinerede tastaturer behøver ikke at tilføje Emoji- og dikteringsknapperne.
  • Større navigationsbjælker vil se og animere godt på dette høje display.

Eller se Apples video om Designing for iPhone X.

Hvordan kan jeg se min app-brugergrænseflade?

Du kan bruge Xcode 9-simulatoren til forhåndsvisning af din app, dette viser dig straks, hvis dit UI skal opdateres.

Hvor kan jeg finde iOS 11 og iPhone X-ressourcer?

Du er heldig, Apple har nogle gode nye ressourcer til Sketch, Photoshop og Adobe XD. Du kan finde dem her: Apple Design Resources.

Bemærk: det meste af denne information kommer fra Apple UI-retningslinjer.