Suggerimenti di progettazione

Android ti aiuta a sviluppare un'app che funzioni bene su un'ampia gamma di dimensioni dello schermo e fattori di forma dei dispositivi. Questa ampia compatibilità ti consente di progettare una singola app che puoi distribuire ampiamente a tutti i tuoi dispositivi di destinazione.

Tuttavia, per offrire ai tuoi utenti la migliore esperienza possibile in ogni configurazione dello schermo, devi ottimizzare i layout e gli altri componenti dell'interfaccia utente per diverse dimensioni. Su ChromeOS, l'ottimizzazione dell'interfaccia utente ti consente di sfruttare appieno lo spazio aggiuntivo dello schermo per offrire nuove funzionalità, presentare nuovi contenuti o migliorare l'esperienza per aumentare il coinvolgimento degli utenti.

Layout per schermi più grandi

Se hai sviluppato la tua app per smartphone e vuoi migliorare il design su ChromeOS e altri fattori di forma con schermi di grandi dimensioni, inizia apportando piccole modifiche a layout, caratteri e spaziatura. Per i tablet da 7 pollici o per un gioco con un'area di gioco di grandi dimensioni, questi aggiustamenti potrebbero essere sufficienti.

Per i display più grandi, puoi riprogettare parti della UI per sostituire una UI "allungata" con una UI efficiente a più riquadri, una navigazione più semplice e contenuti aggiuntivi. Gli studi sui materiali del team di Material Design forniscono esempi di come potrebbe apparire. Ad esempio, vedi come Rispondi si adatta a schermi di dimensioni diverse.

Ecco alcuni suggerimenti:

• Fornisci layout personalizzati per questi schermi più grandi. Puoi farlo utilizzando la dimensione più corta dello schermo o la larghezza e l'altezza minime disponibili.
• Immagina come funzionano l'esperienza utente e i layout in un ambiente orientato al formato orizzontale come ChromeOS. Adatta i layout in modo che abbiano un aspetto e un rendimento ottimali in questi orientamenti in base alle dimensioni della finestra oppure fornisci layout orizzontali specifici utilizzando il qualificatore di risorse land. Puoi scoprire di più sul ridimensionamento dinamico delle finestre e su altre considerazioni per gli schermi di grandi dimensioni nella pagina Gestione finestre.
• Le barre di navigazione in basso non vengono scalate correttamente quando l'app viene allargata. Valuta la possibilità di spostare la navigazione in un menu a sinistra, dove è più accessibile e può mostrare più opzioni. L'esempio di Risposta lo illustra bene.
• Come minimo, personalizza dimensioni come le dimensioni dei caratteri, i margini e la spaziatura per schermi più grandi per migliorare l'utilizzo dello spazio e la leggibilità dei contenuti. Considera l'aspetto degli elementi quando gli utenti si trovano un po' più lontano dal dispositivo, ad esempio un dispositivo ChromeOS o altri ambienti desktop.
• Regola il posizionamento dei controlli dell'interfaccia utente in modo che siano accessibili agli utenti quando utilizzano un mouse o tengono in mano un tablet, ad esempio verso i lati e lontano dal centro.
• Il padding degli elementi UI dovrebbe normalmente essere più grande su ChromeOS e altri dispositivi con schermo grande rispetto ai dispositivi mobili. I margini e le spaziature devono adattarsi alle diverse dimensioni dello schermo.
• Aggiungi un padding adeguato ai contenuti di testo in modo che non siano allineati direttamente ai bordi dello schermo. Utilizza un padding minimo di 16 dp intorno ai contenuti vicino ai bordi dello schermo.

In particolare, assicurati che i layout non appaiano "allungati" sullo schermo:

• Le righe di testo non devono essere eccessivamente lunghe. Ottimizza per un massimo di 100 caratteri per riga, con risultati ottimali tra 50 e 75.
• Elenchi e menu non devono utilizzare l'intera larghezza dello schermo.
• Utilizza il padding per gestire le larghezze degli elementi sullo schermo o passa a un'interfaccia utente a più riquadri per i dispositivi con schermi più grandi (vedi la sezione successiva).

Sfruttare l'area dello schermo aggiuntiva

I dispositivi ChromeOS offrono molto più spazio sullo schermo per la tua app. Quando progetti la UI dell'app per schermi più grandi, sfrutta al meglio lo spazio aggiuntivo.

Negli esempi Rispondi e Rally, le app adottano approcci diversi per utilizzare le dimensioni dello schermo maggiori. Rispondi aggiunge spazio per un aspetto più pulito, mentre Raggruppa mostra più dati per ridurre lo scorrimento e i tocchi.

Un buon punto di partenza è esaminare gli elementi che potrebbero essere nascosti all'utente e come renderli visibili. Potrebbe trattarsi di mostrare più informazioni su un elemento, rendere visibili i menu che potrebbero essere nascosti dietro un clic con il tasto destro o una pressione prolungata oppure mostrare opzioni di navigazione diverse o più approfondite ora che hai un'area di navigazione laterale più ampia. Si tratta di importanti miglioramenti dell'usabilità che possono migliorare la tua UX e dare un aspetto più simile a quello di un computer alla tua app, senza una riprogettazione completa dell'esperienza attuale.

Ecco alcuni consigli per la tua app:

• Il tuo brand determina la direzione da seguire quando pensi a queste diverse dimensioni dello schermo. La scelta di cosa dare la priorità e mostrare all'utente dipende dai tipi di percorsi utente esistenti e dalle funzionalità più utilizzate. Per trovare ispirazione, dai un'occhiata agli studi sui materiali e scopri come ogni prodotto risponde in modo diverso a uno schermo più grande.
• Pensa a come dovrebbe comportarsi il design della tua app utilizzando un sistema di griglie reattive e a come dovrebbero spostarsi contenuti, navigazione e opzioni man mano che lo spazio sullo schermo aumenta.
• Decidi per quali dimensioni dello schermo utilizzerai un layout diverso, quindi fornisci i diversi layout nei bucket delle dimensioni della finestra appropriati (ad esempio, large/xlarge) o nelle larghezze minime della finestra (ad esempio, sw600dp/sw720). Ricorda che, man mano che passi a questi layout, il contesto generale in cui si trovava l'utente non deve cambiare e devi cercare di mantenere lo stato dell'utente durante la transizione tra i layout (posizione di scorrimento, testo in fase di scrittura e così via).

Utilizzare asset progettati per schermi più grandi e con densità più elevata

Per fare in modo che la tua app abbia un aspetto ottimale, fornisci icone e altre risorse bitmap per ogni densità nell'intervallo comunemente supportato da ChromeOS. In particolare, devi progettare le icone per la barra delle app, le notifiche e il launcher in base alle linee guida per l'iconografia e fornirle in formati vettoriali in modo che possano essere scalate correttamente con i diversi schermi su cui verrà visualizzata la tua app.

Per ulteriori informazioni su VectorDrawable e sugli asset vettoriali su Android, consulta questo post del blog di Nick Butcher.

Regolare le dimensioni dei caratteri e i touch target

Per rendere la tua app utilizzabile su ChromeOS e su schermi a densità più elevata, regola le dimensioni dei caratteri e i target di tocco nella tua UI per tutte le configurazioni dello schermo che stai prendendo di mira. Puoi regolare le dimensioni dei caratteri tramite gli attributi con stile o le risorse di dimensione e puoi regolare i target di tocco tramite layout e drawables bitmap, come discusso in precedenza.

Ecco alcune considerazioni:

• Il testo non deve essere eccessivamente grande o piccolo su schermi e densità più grandi. Assicurati che le etichette abbiano le dimensioni appropriate per gli elementi dell'interfaccia utente a cui corrispondono e che non ci siano interruzioni di riga improprie in etichette, titoli e altri elementi.
• Le dimensioni consigliate del touch target per gli elementi sullo schermo sono 48 dp. Potrebbero essere necessari alcuni aggiustamenti nell'UI dello schermo più grande. Scopri di più sui metodi di spaziatura per informazioni sui touch target e sulla spaziatura tra gli elementi al variare delle dimensioni dello schermo. Questi consigli soddisfano anche le linee guida per l'accessibilità minime.
• Se possibile, per le icone più piccole, espandi l'area toccabile a più di 48 dp utilizzando TouchDelegate o centrando semplicemente l'icona all'interno del pulsante trasparente.