L' iPhone X ha cambiato radicalmente il design delle app. Con il suo formato unico e i nuovi elementi dell'interfaccia utente, i designer devono mostrare maggiore flessibilità e creatività per creare app impressionanti. In questa guida viene spiegato passo dopo passo come puoi utilizzare Sketch per adattare il tuo design alle esigenze dell'iPhone X.
Risultati principali
- L'altezza dello schermo dell'iPhone X è di 812 pixel, il che crea spazio per nuovi elementi UI.
- La navigazione e la Tab Bar sono più alte e richiedono adattamenti nel layout.
- È importante prestare attenzione alla Safe Area per garantire che nessun contenuto cada nell'area arrotondata dello schermo.
- Il Home Indicator è un nuovo elemento dell'interfaccia che deve essere considerato nel design.
Guida passo passo
Inizia creando un nuovo design per l'iPhone X in Sketch. Premi A per aggiungere un nuovo elemento e poi clicca sul design dell'iPhone X.
La larghezza rimane a 375 pixel, mentre l'altezza è impostata a 812 pixel. Questo ti dà più spazio per progettare la tua interfaccia utente. Tieni presente che gli angoli arrotondati dello schermo sono importanti per il layout.
Copia il Home Controller e adatta il design. È consigliabile non utilizzare le librerie standard, ma la specifica Libreria iPhone X per un adattamento più preciso. Vai nelle impostazioni di Sketch e attiva la Libreria iOS 11, se non è già presente.
Aggiungi una barra di navigazione standard per mantenere coerente l'interfaccia. Assicurati che l'altezza della Navigation Bar sia di 88 pixel rispetto ai 44 pixel dell'iPhone 8.
Cerca la Status Bar nella libreria iOS 11 e aggiungila anche. Dovrebbe essere collocata lungo il bordo superiore dello schermo.
Per la Tab Bar vale lo stesso principio: scegli una versione con tre tab dalla libreria iOS 11 e assicurati che sia alta 83 pixel per adattarsi bene al layout.
Fai attenzione che nel design non ci siano elementi che invadano l'area arrotondata. Nella programmazione si chiama Safe Area Layout Guide - questo è lo spazio di cui hai bisogno per una visualizzazione sicura.
Aggiungi il Home Indicator come elemento essenziale del tuo design. Questo dovrebbe essere posizionato al centro del bordo inferiore.
Dopo aver aggiunto gli elementi fondamentali, puoi copiare l'intero segmento e incollarlo nel punto desiderato. Ricorda di adattare gli spazi dopo la copia.
Ripeti questo processo per il Chat Controller. Crea una copia del design e rinominala di conseguenza.
Sostituisci le icone per le schede e adatta la rappresentazione. È importante scegliere con cura la giusta simbologia e i testi.
Presta attenzione agli spazi, in particolare tra le chat bubbles e la Tab Bar. Mantieni una distanza di 16 pixel per assicurarti che gli elementi armonizzino bene insieme.
Questi passaggi mostrano quanto rapidamente puoi adattare il tuo design al nuovo formato. Tuttavia, in caso di dubbi, non è un problema continuare a perfezionare il design.
Nella prossima lezione imparerai come lavorare con effetti aggiuntivi nell'area del profilo, inclusa l'uso di effetti di sfocatura.
Riassunto – Design efficace per iPhone X in Sketch
Adattare i tuoi design all'iPhone X apre nuove possibilità. Con la giusta comprensione dei nuovi formati dello schermo e degli elementi UI, puoi creare interfacce utente impressionanti.
Domande frequenti
Qual è l'altezza dello schermo dell'iPhone X?L'altezza dello schermo dell'iPhone X è di 812 pixel.
Come posso adattare la Tab Bar?La Tab Bar dovrebbe avere un'altezza di 83 pixel per funzionare bene nel layout.
Cosa devo considerare nel design?Fai attenzione alla Safe Area e assicurati che gli elementi non invadano le aree arrotondate.
Come faccio gli adattamenti in Sketch?Copia gli elementi Controller esistenti e adattali utilizzando la libreria iOS 11.
Devo adattare la Navigation Bar?Sì, la Navigation Bar ha un'altezza di 88 pixel e deve essere adattata per coerenza visiva.
