Con l’arrivo nel mercato dell’hardware più all’avanguardia di Apple, designer e sviluppatori stanno lavorando per assicurarsi che le loro applicazioni siano fruibili e correttamente visibili anche su iPhone X.
Se ve lo state chiedendo: sì, facciamo parte di quel gruppo di persone non troppo felici di questi radicali cambiamenti.
Perché? Semplice, ora è necessario rivedere e modificare tutto ciò che è stato creato e concepito per l’utilizzo su mobile.
Diamo un’occhiata ad alcune delle specifiche e delle caratteristiche uniche di iPhone X e come progettare per questo device.
1. Scontato ma, prima di tutto, utilizzate la nuova dimensione dello schermo dell’iPhone X
Il tanto amato/odiato pulsante home sparisce. Apple ha aumentato l’altezza di visualizzazione dell’iPhone X di circa il 20% rispetto agli iPhone delle generazioni precedenti.
Questo aumento del 20% è pari a 145 pt dello spazio di progettazione (“pt” corrisponde ai pixel nei device non retina).
Pertanto, la progettazione per iPhone X comincia con la creazione di tavole da disegno in Sketch o Photoshop a una dimensione di 375 x 812.
2. Create risorse per la nuova densità di pixel
«Creare risorse per la che?»
Mi spiego meglio: non solo il nuovo display è un po’ “più alto”, ma possiede anche una risoluzione incredibilmente più elevata per le sue dimensioni.
Il nuovo display Super Retina di iPhone X presenta una sorprendente risoluzione di 2.436 x 1.125 in soli 5,8 pollici. (B O O O O O M).
Stiamo parlando di 458ppi. (P A Z Z E S C O).
Lo so.
Ma cosa significa questo per noi poveri web designer?
La nuova elevata densità di pixel richiederà asset che dovranno essere esportati a 3x come un iPhone più grande, anziché a 2x.
3. Prestate attenzione alla forma del display
Come ho già detto, il nuovo display non è solo più alto: ha anche angoli arrotondati e una sorta di “morso” (notch) nella parte superiore per permettere il posizionamento di microfoni, sensori e fotocamera anteriore. Quel fastidioso elemento divide la barra di stato in due, perciò attenzione!
L’altezza verticale assegnata alla barra di stato è raddoppiata da 22pt a 44pt per dare un margine confortevole dagli angoli arrotondati.
Tuttavia, la buona notizia è che la barra di stato è ora molto marginale e occupa solo lo spazio sagomato che, nella maggior parte dei casi, difficilmente sarebbe utilizzato nelle vostre interfacce.
4. Tenete a mente il nuovo rapporto
Il vero motivo per il quale tutto ciò che avete fatto fino ad ora non va più bene. (Esultiamo insieme)
Il nuovo aspetto più alto (o più ampio se si è in landscape) del formato iPhone X significa che qualsiasi interfaccia a schermo intero, precedentemente progettata per adattarsi agli iPhone della precedente generazione, potrebbe non essere visualizzata correttamente.
I contenuti, infatti, possono finire per essere tagliati o “letterboxed“.
5. Evitate l’interferenza di gesti
Ci sono alcuni gesti a livello di sistema che hanno bisogno di maggiore spazio per rimediare alla mancanza del pulsante “home”.
Apple quindi ci implora di fare alcune semplici cose:
- Non nascondere l’indicatore “home” se non è assolutamente necessario;
- Fare attenzione ad aggiungere elementi interattivi (come i pulsanti) troppo vicini all’indicatore “home”.
Se la tua applicazione prevede un’esperienza immersiva a schermo intero, come ad esempio un gioco che richiede un gesto personalizzato, questo avrà la priorità.
Il primo scorrimento richiamerà il comportamento dell’applicazione e un secondo scorrimento attiverà la gesture del sistema.
Apple ha chiamato questo comportamento “edge protect” e suggerisce di utilizzarlo con parsimonia.
Non vogliamo che i nostri utenti compiano più azioni del dovuto.
6. Metodi di autenticazione
Ecco la figata di iPhone X. (In realtà la vera figata sono le Animoji)
Se in precedenza avete progettato un’applicazione che prevede l’utilizzo di Touch ID, potreste doverlo convertire nel Face ID.
L’iPhone X omette lo scanner di impronte digitali a favore di un profondo e preciso riconoscimento del volto.
Se i tuoi progetti fanno riferimento ad Apple Pay o ad altre funzionalità di sblocco del sistema, sarà necessario passare al Face ID.
Qui potrete approfondire alcuni aspetti importanti a riguardo.
7. Approfittate di un colore più efficace
Apple sta incoraggiando designer e sviluppatori a creare UI per iPhone X con il Display P3(in contrasto con sRGB) per sfruttare l’ampio display a colori del nuovo smartphone.
Tuttavia, bisogna considerare che non tutti gli schermi del computer sono in grado di visualizzare questa estesa gamma di colori. Questo perciò renderebbe impossibile progettare con precisione.
Morale: spendete ‘sti soldi per un computer nuovo con display P3 e non per l’iPhone X.
