Android è disponibile su una vasta gamma di dispositivi, formati e dimensioni dello schermo, pertanto la progettazione per blocchi specifici con pixel perfetti non solo è inefficace, ma può anche influire negativamente sull'esperienza utente. Progetta, crea e pensa in modo adattivo. Di recente abbiamo introdotto nuove API che portano alcuni concetti di progettazione familiari per aiutarti a creare layout adattivi.
Pawparazzi è un'app di esempio che mostra questi concetti. È progettata e creata per mettere in evidenza la progettazione adattiva utilizzando API adattive, come Grid e Flexbox.
Pensare in modo adattivo non significa solo progettare con punti di interruzione, ma anche considerare i contenuti in contenitori flessibili.
Tutto è una griglia
Avere una base per strutturare i contenuti aiuta a seguire le buone pratiche di progettazione e può aiutarti a decidere come adattare i contenuti. Android ha una griglia di base di 8 dp sottostante a cui possiamo allineare tutti i contenuti a livello micro.
Pawparazzi utilizza una griglia di layout gerarchica, anziché una griglia modulare uniforme o una griglia di colonne unidirezionale, il che significa che le colonne e le righe che la compongono vengono decise in base alla gerarchia dei contenuti.
La scelta del tipo di griglia deve dipendere dai contenuti. Inizia con i contenuti dell'app e pensa a come vengono raggruppati. Questo ti aiuta a definire la struttura generale del layout. Per saperne di più su come pensare in termini di riquadri, consulta Griglie e unità , Struttura dei contenuti e Guida introduttiva su computer.
Per Pawparazzi, l'obiettivo principale era vedere gli animali domestici del team in vari modi, a partire da una panoramica, dai dettagli e poi dagli animali domestici classificati. Ciò significava che la galleria di animali domestici avrebbe occupato il riquadro dei contenuti principali e una parte maggiore della griglia, seguita dagli elementi di navigazione e filtro. Quando è disponibile più spazio, la galleria può espandersi su più righe, mostrare più animali domestici e visualizzare contemporaneamente i dettagli. Questo principio adattivo è la visualizzazione, ovvero la visualizzazione di più contenuti su layout più grandi.
L'analisi dell'obiettivo principale dell'app e dei contenuti ha contribuito a determinare come e quando la griglia di layout avrebbe dovuto adattarsi: dimensioni della classe di finestra, posizionamento della cerniera e orientamenti del dispositivo.
Dalla griglia di layout, le sottogriglie aiutano a creare strutture di contenuti più flessibili. Le gallerie stesse sono una griglia. Per le dimensioni compatte, viene utilizzata una griglia a 2 colonne.
Le griglie sono un concetto di layout bidirezionale, quindi i contenuti possono scorrere sia in orizzontale che in verticale.
Puoi utilizzare questa funzionalità per creare layout più interessanti o una gerarchia visiva più chiara, ad esempio Pet della settimana, in cui la griglia viene utilizzata per mostrare gli animali domestici con la classifica più alta. La griglia può essere 2x4, ma la posizione in alto si estende su 2 colonne e righe.
Tutto questo è possibile con l'API Grid.
Fletti i componenti
Mentre la griglia copre la struttura dei contenuti macro e micro, Flexbox aiuta con i componenti che devono rispondere ai contenuti. Viene utilizzato per i contenuti unidirezionali, in cui è specificato solo l'orientamento orizzontale o verticale. Ad esempio, i chip di filtro possono rispondere alle etichette e l'area di filtro può espandersi a seconda della quantità di filtri. Utilizza la funzionalità di visualizzazione su schermi più grandi per mostrare più filtri contemporaneamente.
Query sfumate
Progettando una griglia di layout e utilizzando la griglia e Flexbox, consentiamo un layout adattivo su più schermi e persino di adattarsi a forme uniche come i dispositivi pieghevoli. Ma cosa succede con i diversi contesti utente? Gli utenti Android possono collegarsi a un display o collegare un mouse. MediaQuery ci consente di prendere decisioni di progettazione sfumate per soddisfare gli utenti in tutti i contesti.
In Pawparazzi, ciò significava sfruttare gli input del puntatore precisi, con aree target più piccole e contenuti più densi.
Esempi di UI adattiva di Android
Esplora design stimolanti e ottimizzati per i dispositivi con schermo grande. Sfoglia i modelli di UI/UX per le categorie di app più diffuse, tra cui media, creatività, giochi e altro ancora.
