iPhone X a schimbat fundamental designul aplicațiilor. Cu formatul său unic și noile elemente ale interfeței utilizatorului, designerii trebuie să arate mai multă flexibilitate și creativitate pentru a crea aplicații impresionante. În acest ghid, este explicat pas cu pas cum poți folosi Sketch pentru a-ți adapta designul la cerințele iPhone X.
Cele mai importante concluzii
- Înălțimea ecranului la iPhone X este de 812 pixeli, ceea ce creează spațiu pentru noi elemente UI.
- Navigation și Tab Bar sunt mai înalte și necesită ajustări în layout.
- Este important să ai în vedere Safe Area pentru a te asigura că nicio conținut nu cade în zona rotunjită a ecranului.
- Home Indicator este un nou element de interfață care trebuie să fie luat în considerare la proiectare.
Ghid pas cu pas
Începe prin a crea un nou design pentru iPhone X în Sketch. Apasă A pentru a adăuga un nou element și apoi fă clic pe designul iPhone X.
Latimea rămâne la 375 pixeli, în timp ce înălțimea este setată la 812 pixeli. Aceasta îți oferă mai mult spațiu pentru a-ți proiecta interfața utilizatorului. Fii conștient că colțurile rotunjite ale ecranului sunt importante pentru layout.
Copiează Home Controller și ajustează designul. Este recomandat să nu folosești bibliotecile standard, ci specifica iPhone X Library pentru o adaptare mai precisă. Du-te la setări în Sketch și activează iOS 11 Library, dacă aceasta nu este deja disponibilă.
Adaugă o bară de navigație standard pentru a crea o interfață consistentă. Asigură-te că înălțimea Navigation Bar este de 88 pixeli în comparație cu cei 44 pixeli ai iPhone 8.
Caută Status Bar în biblioteca iOS 11 și adaugă-o de asemenea. Aceasta ar trebui să fie plasată la marginea superioară a ecranului.
Pentru Tab Bar este la fel: Alege o versiune cu trei tab-uri din biblioteca iOS 11 și asigură-te că este înaltă de 83 pixeli, pentru a se potrivi bine în layout.
Ai grijă ca în design să nu existe elemente care să se suprapună în zona rotunjită. În programare se numește Safe Area Layout Guide – acesta este spațiul de care ai nevoie pentru o vedere sigură.
Adaugă Home Indicator ca parte esențială a designului tău. Acesta ar trebui plasat în centrul marginii de jos.
După ce ai adăugat elementele de bază, poți copia întreaga secțiune și o poți lipi la locul dorit. Nu uita să ajustezi distanțele după copiere.
Repetă acest proces pentru Chat Controller. Creează o copie a designului și redenumește-o corespunzător.
Înlocuiește icoanele pentru tab-uri și ajustează reprezentarea. Este important să alegi simbolurile și textele corecte cu atenție.
Atenție la distanțe, în special între bulinele de chat și Tab Bar. Menține o distanță de 16 pixeli pentru a te asigura că elementele se armonizează bine între ele.
Aceste etape arată cât de repede poți adapta designul la noul format. Totuși, în cazul neclarităților, nu este o problemă să continui să rafinezi designul.
În următoarea lecție, vei învăța cum să lucrezi cu efecte suplimentare în zona de profil, inclusiv utilizarea efectelor de blur.
Rezumat – Design eficient pentru iPhone X în Sketch
Adaptarea designurilor tale la iPhone X deschide oportunități noi. Cu înțelegerea corectă a noilor formate de ecran și a elementelor UI, poți crea interfețe utilizator impresionante.
Întrebări frecvente
Care este înălțimea ecranului iPhone X?Înălțimea ecranului iPhone X este de 812 pixeli.
Cum pot adapta Tab Bar?Tab Bar ar trebui să aibă o înălțime de 83 pixeli pentru a funcționa bine în layout.
Ce trebuie să iau în considerare la proiectare?Acordă atenție Safe Area și asigură-te că elementele nu intră în zonele rotunjite.
Cum fac ajustările în Sketch?Copiează elementele existente ale controlerului și ajustează-le folosind biblioteca iOS 11.
Trebuie să adaptez Navigation Bar?Da, Navigation Bar are o înălțime de 88 pixeli și ar trebui să fie ajustată pentru consistență vizuală.
