Il design adattivo è la pratica di progettare layout che si adattano a punti di interruzione e dispositivi specifici.
Per implementare in modo efficace i layout adattivi:
Innanzitutto, considera la larghezza della classe della finestra del dispositivo per determinare le modifiche del layout, quindi regolala in base all'altezza. Supporta diverse dimensioni dello schermo.
Android sfrutta i concetti di responsive design, simili allo sviluppo web, utilizzando griglie e immagini flessibili per creare layout che rispondano in modo efficace al loro contesto.
Consenti ai layout di rispondere a una varietà di dimensioni con metodi adattivi: ridisposizione, visualizzazione, modifica della presentazione.
Evita di bloccare l'app solo in verticale. In questo modo si verifica il letterboxing quando le dimensioni dell'app vengono modificate.
Cosa non fare
Per le linee guida di progettazione sull'adattamento dei layout alle dimensioni dello schermo espanse, leggi la guida per gli sviluppatori Supportare diverse dimensioni dello schermo in Compose e la pagina M3 Applying Layout. Puoi anche consultare la galleria canonica di Android per schermi di grandi dimensioni per trovare ispirazione e implementare i layout per schermi di grandi dimensioni.
Pensa in modo adattivo
Il design adattivo deve essere l'impostazione predefinita quando progetti la tua app. Il mercato mobile Android è in continua evoluzione, quindi non puoi pensare al mobile solo come smartphone. Al contrario, deve includere tutto, dagli smartphone ai dispositivi pieghevoli, ai tablet e tutto il resto.
Sebbene alcune funzionalità e alcuni casi d'uso potrebbero non essere adatti a ogni dimensione dello schermo o fattore di forma. Il design adattivo offre agli utenti una maggiore libertà in termini di ergonomia, usabilità e qualità dell'app.
Metodi e qualità
Puoi iniziare progettando le schermate principali (comunicando i concetti essenziali o la tua app) con le dimensioni delle classi come punti di interruzione per fungere da linee guida per il resto dell'app. Queste esperienze principali possono mettere in evidenza le qualità adattive e del fattore di forma differenziate. In alternativa, puoi progettare i contenuti in modo che siano adattabili a livello fondamentale annotando come i contenuti devono essere vincolati, espansi o ridisposti.
In questo esempio, la navigazione e i contenuti vengono ridisposti, flessi e scalati per una migliore navigazione ergonomica. La griglia del layout si espande da orientamento verticale a più colonne. L'indirizzo nella barra dell'app e i filtri vengono ridisposti e flessi per adattarsi alla griglia del layout.
Cosa fare
Cosa non fare
Cosa fare
Cosa fare
Cosa non fare
Assicurati che gli input e i pulsanti non siano estesi.
Pensa in termini di contenimento e riquadri.
Utilizza il concetto di contenimento dei riquadri per raggruppare i contenuti per i layout adattivi. Ad esempio, l'esempio utilizzato è una schermata dei dettagli, un riquadro che potrebbe essere mostrato in un layout elenco-dettagli.
Le dimensioni compatte devono rispettare un layout a un riquadro.
Le dimensioni medie possono utilizzare layout a 1-2 riquadri.
Le dimensioni grandi ed extra-large possono utilizzare layout a più riquadri.
Utilizza contenitori intrinseci e visivi per raggruppare gli elementi. I riquadri possono spostarsi, nascondersi, espandersi, essere vincolati o apparire. Pensare con i riquadri semplifica la progettazione su tutti i dispositivi mobili.
Sebbene i riquadri non siano essenziali sugli schermi di grandi dimensioni, dovresti comunque pensare ai contenuti in raggruppamenti di contenimento per una maggiore flessibilità.
Consenti agli elementi di spostarsi e riorganizzarsi concentrandoti su come si adattano alla griglia. Considera la modifica verticale degli elementi e combinala con vincoli e modifiche della presentazione.
Considera la scala e la quantità di contenuti mostrati.
Una piccola griglia di video su uno smartphone diventa stretta e opprimente su un tablet. Aggiorna la scala degli elementi dell'interfaccia utente in base alle dimensioni dello schermo, alla densità e all'input.
Un'app di alta qualità deve soddisfare il livello differenziato nelle linee guida sulla qualità delle app principali e degli schermi di grandi dimensioni.
Per saperne di più sui layout, consulta la pagina Material Design 3 (M3) Understanding layout page.
Sfrutta le dimensioni uniche del fattore di forma.
Non dimenticare anche le dimensioni dello schermo più piccole e le proporzioni diverse, poiché gli smartphone Android hanno una gamma di dimensioni e i dispositivi pieghevoli possono includere un piccolo schermo di copertura che può visualizzare la tua app.
Per i layout basati sui controlli, come i lettori multimediali, consenti ai controlli di ridisporre e ai contenuti di rivelarsi.
Per aiutare gli utenti a regolare, utilizza un elemento di ancoraggio, ad esempio un pulsante di riproduzione di grandi dimensioni, per adattare i contenuti e la grafica principale diventa lo sfondo dello schermo di copertura.
Oltre le classi di dimensioni
Sebbene le dimensioni della finestra siano un fattore comune per il design adattivo, la tua app deve anche essere pronta per gli utenti a collegare monitor e dispositivi di input, visualizzare a varie distanze e modificare la postura del dispositivo. È possibile verificare queste
modifiche utilizzando l'API mediaQuery, che consente di aggiungere sfumature quando progetti la modalità di adattamento di elementi dell'interfaccia utente specifici a determinati casi d'uso.
Adatta il design dell'app a livello di componente o riquadro, anziché progettare intere schermate per dimensioni, input, fattore di forma e postura.
Per saperne di più sull'interazione di input, leggi le guide all'interazione con l'esperienza desktop.
Dai un'occhiata a un case study di esempio, Pawparrazzi, creato e progettato con le ultime API adattive e le linee guida di progettazione.
