Dizajn za iPhone X

IPhone X (čitaj: iPhone deset) službeno je ovdje, dobro da će biti 3. studenog. Super zaslon Super Retina zaslon rezolucije od 1125 × 2436 piksela. Također ima izrez na vrhu zaslona na kojem možete pronaći neke futurističke značajke za otključavanje lica.

Dizajn za ovaj lijepi stroj donijet će neke nove izazove, ali i neke nove mogućnosti dizajna. Širina uređaja u portretnom načinu rada jednaka je iPhoneu 6, 7 i 8, ali je 145pt veća, što rezultira ± 20% više vertikalnog prostora. Za dizajn @ 1x potreban vam je artboard od 375 × 812px. Nećete izvoziti slike @ 2x poput iPhonea 8, ali @ 3x kao iPhone 7-8 Plus, zbog novog Retina zaslona.

Prilikom izrade dizajna morate biti sigurni da svoje zaslon sučelje ne zaklonite jedinstvenim značajkama uređaja (okrugli rubovi, izrez na vrhu i kućni indikator). Usput, kućni indikator je da mala linija koja živi na dnu zaslona zamjenjuje fizički gumb kuće. Prelazite prstom prema gore s bilo koje aplikacije da biste se vratili na početni zaslon ili u više zadataka.

^ Pogledajte tu bijelu liniju, to je novi pokazatelj kuće.

Ako trenutno imate aplikaciju koja koristi matičnu komponentu iOS, bit će vam dobro i vaša će aplikacija već biti prilagođena ovom novom iPhoneu. To mogu biti navigacijske trake, tablice, prikazi kolekcija i trake sa karticama. Oni će se automatski umetnuti i pozicionirati.

^ Dizajn iPhone 8 s lijeve strane, automatski prilagođen iPhone X s desne strane

Ako koristite prilagođeni izgled, vašu će aplikaciju možda trebati ažurirati na novi izgled zaslona. Ako koristite Auto raspored, to bi moglo biti prilično jednostavno.

Započnimo

Prvo, zagrlite dizajn uređaja, zaposlenici Applea nisu vam toliko pomogli da sakrijete divne značajke ovog skupog hardvera.

Obavezno stvorite iskustvo preko cijelog zaslona. Dopustite da se prikazi pogleda pomiču do samog dna zaslona, ​​čak i iza rubova zakrivljenog dna zaslona. Apple vas također moli da ne skrivate izrez na vrhu i zakrivljene rubove pri dnu, tako da nemojte postavljati crne trake kako biste izgledali kao obični stari školski iPhone 8.

Centrirajte i umetnite važne informacije. Provjerite je li važan sadržaj poravnat u središtu i upotrijebite simetrične umetke, tako da senzori ili uglovi uređaja neće obrezati vaš korisnički interfejs. Ako koristite Automatski izgled, vaš će se sadržaj automatski smjestiti u sigurno područje tako da vaš dizajn neće biti skriven iza uglova, senzora ili kućnog indikatora.

Nova traka statusa. Zbog senzora na vrhu zaslona, ​​nova traka statusa podijeljena je u 2 dijela. Ako vaš korisnički interfejs čini nešto posebno s tim prostorom (prethodno 20pt visok, sada 44pt), morat ćete ažurirati svoje sučelje jer će biti viši na iPhoneu X. Pazite da se može dinamički mijenjati u visinu. Sjajna stvar je što se visina neće mijenjati ako korisnik nazove telefon ili koristi navigacijsku aplikaciju, što je ranije bio slučaj na drugim iPhoneima.

^ podijeljena i viša traka statusa

Pokažite novu traku statusa. Ako trenutno skrivate statusnu traku u svom dizajnu, Apple vas moli da preispitate ovu odluku. Budući da je zaslon viši i imate više nekretnina za prikaz svog sadržaja, moglo bi biti korisno otkriti tu traku statusa. Korisnici mogu tamo pronaći korisne informacije, a prostor većinu vremena neće koristiti drugi UI elementi.

Slike preko cijelog zaslona. Ako trenutno koristite slike na cijelom zaslonu u svom dizajnu, morat ćete ih ažurirati za novi iPhone. Oni bi mogli biti obrezani, a bitan dio vizualnog može biti skriven.

Ne stavljajte interaktivne kontrole na dno zaslona. Razmak oko indikatora kuće stvoren je isključivo za geste, prijeđite prstom prema gore da biste otišli kući. Postavljanje gumba u blizini ovog indikatora ili u donjim okruglim uglovima zaslona možda nije sjajno. Korisnici mogu slučajno koristiti kućnu gestu, a vaš korisnički interfejs bit će teško dostupan. No i dalje možete koristiti trake s karticama i trake sa funkcijama, ali imajte na umu da one ne bi trebale ometati kućni indikator.

Ne sakrivajte kućni pokazatelj (sve vrijeme). iOS omogućuje sakrivanje kućnog indikatora u vašoj aplikaciji, to će se automatski sakriti kada korisnik nekoliko sekundi ne dodirne zaslon. Ponovno će se pojaviti kada korisnik ponovno dodirne zaslon, to se uglavnom treba koristiti za imerzivna iskustva poput gledanja videozapisa ili fotografija. Pokazivač kuće također će automatski promijeniti boju na temelju pozadine vaše aplikacije.

Više boja. Novi zaslon Super Retina prikazuje više boja, P3 boje umjesto sRGB. To znači da će pokazati bogatije i zasićenije boje. Osobito video i fotografije će imati koristi od ovog šireg raspona boja.

(Ažuriranje: P3 spektar boja dodan je od iPhonea 7, hvala Marcelo Ávalos)

Prevucite prstom prema gore, budite oprezni s kretnjama. Budući da fizički gumb kuće nije više, interakcijom sa svojim iPhoneom (više nego ikad) komunicirate pomoću gesta. Kad povučete prema gore, idete kući ili idete na prikaz više zadataka. Kad pomičete lijevo i desno na indikatoru kuće, prelazite između otvorenih aplikacija za više zadataka. Prelaskom prsta s vrha zaslona, ​​idite u obavijesni ili kontrolni centar. Štoviše, u igrama možete koristiti prilagođene geste koje mogu nadjačati izvorne iOS geste. Možete upotrebljavati vlastite geste primjenom „zaštite ruba“ što je značajka koja će preferirati specifičnu gestu aplikacije, prije nego što se pojavi OS, samo jedan put. Upotrijebite ovo štedljivo jer će vašem korisniku biti teže koristiti značajke sustava.

ID lica. Prethodni iPhone ima sjajnu značajku Touch ID, koja je korisnicima omogućila otključavanje uređaja ili obavljanje radnji zaključanih zaporkom u aplikacijama pomoću otiska prsta. Ovaj je senzor bio skriven unutar gumba kuće, otkako je prešao u iPhone X, Apple ga je zamijenio naprednijim i sigurnijim načinom otključavanja uređaja. Unesite Face ID i koristi neke stvarno sjajne algoritme za otkrivanje vašeg lica i otključavanje uređaja. Ovo će pokazati neko novo korisničko sučelje u aplikacijama, obavezno ga implementirajte za (bogate) korisnike koji imaju iPhone X. Također provjerite da se više ne pozivate na Touch ID u svom brodu ili izborniku, zamijenite ga s ID-om lica ,

Prilagođene tipkovnice. Kada dizajnirate prilagođenu tipkovnicu, ne biste trebali dodavati tipku Emoji ili Diktat na tipkovnici. Jer će se automatski dodati ispod tipkovnice oko kućnog indikatora.

Veće navigacijske trake. Uz iOS 11 dizajn nativnih navigacijskih traka ažurirao se, a sada su i viši. Ovaj će se dizajn posebno pokazati na višem iPhoneu X i lijepo će se uklopiti s novom statusnom trakom. Stoga razmislite o tome kako ga koristiti u svom dizajnu. Oni će također imati lijepe nativne animacije prilikom pomicanja.

TL DR

  • IPhone X je 145pt viši, pa dizajn za 375 × 812pt, umjesto za 375x667pt
  • IPhone X koristi svojstva @ 3x.
  • Stvorite doživljaj preko cijelog zaslona i ne skrivajte jedinstvene značajke uređaja.
  • Centrirajte najvažniji sadržaj vašeg sučelja da biste bili sigurni da su senzori ili uglovi uređaja uvijek vidljivi, a ne skriveni.
  • Nova viša statusna traka podijeljena na dva, prethodno 22pt, sada visoka 44pt.
  • Slike na cijelom zaslonu možda bi trebale biti ažurirane kako bi se u potpunosti prikazale.
  • Ne dodajte gumbe na dnu zaslona, ​​blizu indikatora kuće.
  • Ne sakrivajte kućni indikator, samo kad je stvarno neophodno.
  • Bogatije i zasićenije boje zahvaljujući P3 spektru boja.
  • Budite svjesni prilagođenih gesta u blizini kućnog indikatora i trake statusa, nemojte se miješati s korisnikovim očekivanim izvornim gestama.
  • Face ID zamjenjuje Touch ID, ažurirajte korisničko sučelje i zamijenite tekstualne reference na Touch ID.
  • Prilagođene tipkovnice ne trebaju dodavati gumbe emotikona i diktata.
  • Veće navigacijske trake odlično će izgledati i animirati na ovom visokom zaslonu.

Ili pogledajte Appleov video na stranici Dizajniranje za iPhone X.

Kako mogu pregledati korisničko sučelje svoje aplikacije?

Možete koristiti simulator Xcode 9 za pregled vaše aplikacije, to će vam odmah pokazati treba li vaš sučelje ažurirati.

Gdje mogu pronaći resurse za iOS 11 i iPhone X?

Imate sreće, Apple ima sjajne nove resurse za Sketch, Photoshop i Adobe XD. Možete ih pronaći ovdje: Apple Design Resursi.

Napomena: većina tih podataka dolazi iz Apple UI Guidelines.