Come implementare un design dell'interfaccia utente iOS perfetto per i pixel

Probabilmente hai sentito innumerevoli volte la frase "design perfetto per i pixel", senza nemmeno considerare cosa significa o cosa dovrebbe significare. Negli ultimi mesi, c'è la possibilità che tu abbia sentito parlare del declino del concetto di design pixel-perfect, ma c'è un piccolo problema con queste affermazioni, specialmente quando si tratta di design dell'interfaccia utente iOS.

Vale a dire, la definizione di design perfetto per i pixel non è scolpita nella pietra come la maggior parte delle linee guida dell'interfaccia utente di iOS. Le persone lo interpretano in modi diversi, da qui il problema: la perfezione dei pixel può sembrare superata ad alcuni, ma altri continueranno a utilizzare il principio negli anni a venire, anche se con un nome diverso. È principalmente un problema di nomenclatura.

Che cos'è un design dell'interfaccia utente perfetto per i pixel?

Dal momento che non esiste una definizione chiara della perfezione dei pixel, la mia comprensione del concetto di design perfetto per i pixel è che tutto viene fatto per massimizzare la nitidezza e la fedeltà. Una volta implementato il design, sembra identico su qualsiasi display di iPhone senza artefatti o problemi di alcun tipo.

Creare un'interfaccia utente dell'app iOS perfetta per i pixel significa creare un design pensando ai pixel e implementare lo stesso identico design sullo schermo, fino a ogni pixel del design di riferimento, il tutto assicurandoti che sia adattato in modo reattivo ad altri dispositivi.

Ma perché un design perfetto per i pixel?

I progettisti dell'interfaccia utente fanno del loro meglio per creare interfacce facili da percepire e con cui interagire. È dovere professionale dello sviluppatore rispettare il lavoro del progettista e implementare l'interfaccia esattamente come consegnata.

Con le app non perfette per i pixel, è improbabile che gli utenti riscontrino problemi significativi che impediscano loro di utilizzare e godersi l'app, ma le app perfette per i pixel sembrano decisamente più nitide, pulite e coerenti.

A causa della natura altamente competitiva dell'App Store di Apple, ogni minimo di rifinitura che migliora l'aspetto generale e l'esperienza dell'utente è il benvenuto. Può aiutare a differenziare la tua app e renderla più visibile e quindi più redditizia.

Questa rapida guida alla progettazione dell'interfaccia utente iOS ti guiderà attraverso il processo dalla fase di progettazione di base all'implementazione, dal punto di vista di un designer e di uno sviluppatore.

Creazione di un design dell'interfaccia utente iOS

Iniziamo. Le applicazioni pixel-perfect iniziano ovviamente come design pixel-perfect e sappiamo tutti da dove vengono al giorno d'oggi.

Strumenti essenziali per la progettazione dell'interfaccia iOS

Penso di essere corretto nel dire che Sketch è diventato lo standard de facto per i progettisti di UI/UX mobili e web. Sebbene Adobe XD sia un'alternativa emergente, è in ritardo rispetto a Sketch in termini di popolarità.

Successivamente, sceglieremo la dimensione della tavola da disegno. Al giorno d'oggi, abbiamo dispositivi iOS con dimensioni dello schermo e proporzioni diverse e dobbiamo scegliere una dimensione per creare il nostro design. Grazie al layout automatico, si adatterà perfettamente ad altre dimensioni del display. Se necessario, puoi creare diverse varianti di layout per classi di dimensioni diverse.

L'unica vera domanda qui è: in che modo il designer dovrebbe condividere le informazioni sull'adattamento dei progetti per diversi display con lo sviluppatore?

Fortunatamente, non è necessario annotare le specifiche per ciascuno, poiché il plug-in Auto Layout per Sketch si occuperà di questo. Il progettista deve semplicemente impostare il layout automatico desiderato, esportare in diverse dimensioni dello schermo con un clic e lo sviluppatore capirà come posizionare i vincoli di layout e assicurarsi che tutto appaia a posto, sia su un iPhone X che sul buon vecchio iPhone 5.

Nota: dalla versione 44, il team di Sketch ha notevolmente migliorato i controlli di ridimensionamento, offrendo agli utenti maggiore potere e controllo su come dovrebbero comportarsi i livelli quando il loro genitore viene ridimensionato.

Impostare il tuo design

Sembra fantastico, ma non abbiamo ancora scelto la dimensione che useremo per creare il nostro design. Secondo le statistiche iOS di David Smith, il 57% di tutti gli utenti iPhone si affida a display da 4,7 pollici, introdotti nell'iPhone 6/6s e successivamente utilizzati nell'iPhone 7 e persino nell'iPhone 8 lanciato di recente.

Sono sicuro che ormai tutti conoscete i display da 4,7 pollici di Apple, ma nel caso in cui non siate una persona con i numeri, stiamo parlando di display da 750x1334 pixel con 326 pixel per pollice (PPI). Questo è un display Retina standard e nel codice avremo metà della risoluzione. Pertanto, ti suggerisco di iniziare con 375x667 pixel.

Successivamente, dobbiamo essere sicuri che il design dell'interfaccia utente iOS massimizzi la nitidezza. Per raggiungere questo obiettivo, devi attivare l' adattamento dei pixel :

Ecco un esempio di un semplice rettangolo con e senza pixel fitting:

Usa Round: Full Pixels durante la modifica di oggetti vettoriali:

Queste sono ovviamente solo le basi e per uno sguardo più da vicino agli elementi dell'interfaccia utente iOS perfetti per i pixel in Sketch, dovresti dare un'occhiata al tutorial ufficiale.

Sentiti libero di utilizzare animazioni vettoriali complesse, perché uno sviluppatore può riprodurle facilmente utilizzando la libreria Lottie. Puoi riprodurre le animazioni di Adobe After Effects su un dispositivo mobile senza subire artefatti di ridimensionamento. Fornisci semplicemente il file JSON allo sviluppatore e il gioco è fatto.

Utilizzare il più possibile il profilo colore sRGB. Se sRGB non è sufficiente su display ad ampio gamut, dovrai fornire colori o risorse grafiche (uno sRGB e un altro con profilo colore incorporato). Informazioni dettagliate sui profili colore sono disponibili nelle linee guida HID di Apple in caso di necessità.

Codice personalizzato per risultati perfetti per i pixel

Grande! Ora sappiamo abbastanza per creare un design perfetto per i pixel; come lo condividiamo con lo sviluppatore? Ovviamente dobbiamo entrare nella nostra cassetta degli attrezzi.

Scegliere gli strumenti giusti

Ci sono strumenti incredibilmente utili per condividere il lavoro del designer con gli sviluppatori: Zeplin. Usalo e lo sviluppatore avrà quasi tutte le informazioni necessarie per garantire che la progettazione dell'interfaccia utente funzioni: risorse grafiche, caratteri e colori utilizzati nel design, testo e molto altro. Praticamente l'unica cosa che il designer potrebbe dover fornire a questo punto sono i file dei caratteri, nel caso in cui utilizzassero caratteri non inclusi in iOS.

Un altro strumento interessante è PaintCode, che può generare codice da immagini vettoriali. PaintCode utilizza i percorsi SVG e i dati sui colori per generare classi Swift o ObjC. Con PaintCode, puoi usare espressioni, variabili, ecc. per creare stati passivi/attivi dei tuoi pulsanti, stati su/giù, testo dinamico, animazioni da variabili e molto altro.

Ovviamente dovrai fare affidamento su Xcode e alcuni strumenti di sviluppo iOS standard, ma ci arriveremo più avanti.

È estremamente utile se devi aggiornare dinamicamente solo una parte specifica di una risorsa di progettazione, ad esempio, cambiare il colore di base per uno sfondo sfumato sull'icona della chat. E, come comodo bonus, la tua app perderà peso.

Ok, lo sviluppatore ha finalmente tutto ciò di cui ha bisogno, quindi come possiamo implementare perfettamente un design perfetto per i pixel (scusate il gioco di parole)?

Configurazione e sincronizzazione dei tuoi strumenti

Con Zeplin dovresti ottenere quasi tutto ciò di cui hai bisogno, a condizione che il designer abbia impostato tutto correttamente. Se qualcosa viene trascurato o poco chiaro, Zeplin fornisce un'efficace funzione per i commenti, consentendo al designer e allo sviluppatore di identificare e risolvere rapidamente potenziali problemi. Anche se tutto viene eseguito correttamente, i commenti possono essere utilizzati per feedback e piccoli miglioramenti.

Tuttavia, come tutti sappiamo, le cose non vanno sempre come previsto, quindi a volte lo sviluppatore dovrà scegliere un colore, anche se il designer ha fornito la tavolozza dei colori utilizzata nell'app.

Per farlo correttamente, devi sincronizzare i tuoi strumenti:

• Imposta il profilo colore del tuo display su sRGB: vai su Preferenze di Sistema - Display - Colore e scegli sRGB IEC61966-2.1 .

• In Digital Color Meter o qualsiasi altro strumento di selezione del colore, scegli di visualizzare in sRGB .

• Verifica che il profilo colore nella tavolozza dei colori Xcode sia impostato su Device RGB.

Nota: le immagini possono avere un profilo colore incorporato. Se questo è il caso, dovrai adattare i tuoi strumenti a questo profilo se vuoi prendere il colore corretto da questa immagine. Fortunatamente, questa dovrebbe essere un'eccezione e non dovresti riscontrare casi simili troppo spesso.

In Xcode 9, ricorda di conservare i dati vettoriali quando necessario. Sebbene aumenterà le dimensioni dell'app, ciò ti consentirà anche di utilizzare l'immagine per qualsiasi dimensione di visualizzazione. Tuttavia, su iOS 10 e versioni precedenti del sistema operativo mobile di Apple, le immagini non verranno ingrandite utilizzando i dati vettoriali aggiuntivi.

Invece, le versioni precedenti del sistema operativo utilizzeranno i meccanismi di ridimensionamento legacy e ti lasceranno con un'immagine sfocata quando il ridimensionamento supera le dimensioni originali. Puoi controllare la documentazione ufficiale di Apple per ulteriori informazioni su questo particolare problema.

Infine, lo sviluppatore dovrà assicurarsi che le dimensioni e le distanze corrispondano il più possibile al progetto originale. Se ci sono informazioni discutibili in Zeplin, puoi misurare le distanze tra i diversi componenti dell'interfaccia utente di iOS con variazioni sulle regole dello schermo. Uno di questi è xScope, un righello su schermo con molte caratteristiche pratiche.

Dare vita al design dell'interfaccia utente iOS

Quando si tratta di implementare la progettazione dell'interfaccia utente iOS, ci sono alcuni approcci tra cui scegliere: Storyboard, XIB e codice personalizzato.

• Storyboard - Visualizza le schermate e la navigazione tra di esse, ma non ci sono opzioni per ereditare un progetto da un controller all'altro.

• XIBs - Visualizza una schermata o una sua parte, facile da ereditare. Prima di Xcode 9, non c'era alcuna opzione per utilizzare le guide di layout in alto/in basso, mentre in Xcode 9 possiamo usare Safe Area .

• Codice - Di gran lunga l'opzione più flessibile, ma non fornisce una visualizzazione immediata.

Per gli storyboard, dovrai dividere il tuo progetto in flussi, ad esempio LoginFlow.storyboard, SettingsFlow.storyboard o NewsFeedFlow.storyboard. In questo modo manterrai leggeri i tuoi storyboard.

Raggruppa gli elementi dell'interfaccia utente in blocchi. Ciò semplifica il supporto per tutti i vincoli. Non essere pigro e posiziona le viste con nome in ordine, poiché appaiono sullo schermo dall'alto verso il basso. Tieni presente che la parte inferiore verrà visualizzata sopra quella superiore. Questo ti aiuterà a trovare visualizzazioni diverse più velocemente.

Vedere l'esempio seguente per elementi non raggruppati e raggruppati:

Se hai più oggetti allineati a sinistra/destra, non allinearli al bordo con l'offset. L'approccio migliore è allinearsi all'elemento precedente o implementare una speciale _ffset view_con un vincolo di larghezza. Se in futuro è necessario modificare l'offset, sarà un po' più semplice.

Per utilizzare i colori in IB, puoi preparare una tavolozza nella parte inferiore di Xcode Color Picker.

Nota: se la versione iOS minima della tua app è 11, puoi utilizzare l'opzione "Colori con nome" in Asset Catalog.

Avvolgendo

Questo è tutto. Ora non ci resta che inviare il risultato al team QA, controllare che tutto sia in ordine e voilà! La nostra app perfetta per i pixel è pronta.

L'obiettivo di questo articolo era fornire un esempio lineare e semplice di progettazione dell'interfaccia utente iOS perfetta per i pixel, ottenendo i migliori risultati nel minor tempo possibile. La collaborazione tra progettisti e sviluppatori dell'interfaccia utente non è sempre così semplice e senza attriti, ma questo è un problema per un altro articolo.