Le app che utilizzano layout adattabili e si adattano automaticamente a dimensioni dello schermo diverse offrono un valore aggiunto agli utenti e forniscono esperienze più produttive e coinvolgenti.
I layout responsivi formattano e posizionano dinamicamente elementi come pulsanti, campi di testo e finestre di dialogo per un'esperienza utente ottimale. Offri automaticamente agli utenti della tua app un valore aggiuntivo su schermi più grandi utilizzando pratiche di design responsive. Che si tratti di più testo visibile a colpo d'occhio, di più azioni sullo schermo o di target di tocco più grandi e accessibili, le pratiche responsive offrono un'esperienza migliorata per gli utenti di schermi più grandi.
Aggiungere valore tramite il design responsive
Cosa fare
- Utilizza la libreria di componenti di M3 Compose, che ha un comportamento reattivo e adattabile integrato.
- Utilizza layout adattabili, che si adattano automaticamente e senza problemi per riempire lo spazio disponibile in base alle dimensioni dello schermo.
Cosa non fare
- Allunga gli elementi dell'interfaccia utente, inclusi campi di testo, pulsanti e dialoghi, per riempire lo spazio extra.
- Aumenta le dimensioni dei caratteri, a meno che non abbiano uno scopo principalmente grafico.
Creare app e riquadri adattabili per Wear OS
Le UI reattive si estendono e cambiano per sfruttare al meglio tutto lo spazio sullo schermo disponibile, indipendentemente dalle dimensioni dello schermo su cui vengono visualizzate.
Quando si progettano layout adattabili su uno schermo rotondo, le visualizzazioni con scorrimento e senza scorrimento hanno requisiti unici per mantenere la scalabilità degli elementi dell'interfaccia utente e preservare un layout e una composizione equilibrati. Per le visualizzazioni con scorrimento, utilizza le percentuali per definire tutti i margini superiore, inferiore e laterale per evitare il ritaglio e fornire la scalatura proporzionale degli elementi. Per le visualizzazioni non scorrevoli, utilizza le percentuali e i vincoli verticali per tutti i margini. In questo modo, i contenuti principali al centro possono estendersi per riempire l'area disponibile.
Visualizzazioni a scorrimento
Tutti i margini superiore, inferiore e laterale devono essere definiti in percentuale per evitare il ritaglio e fornire una scala proporzionale degli elementi.
Visualizzazioni non scorrevoli
Tutti i margini devono essere definiti in percentuale e i vincoli verticali devono essere definiti in modo che i contenuti principali al centro possano estendersi per riempire l'area disponibile.
Esempi
Le seguenti immagini mostrano esempi di app responsive e ottimizzate.
Pulsanti aderenti ai bordi
Elenco di schede
Elenco di pulsanti e selettori
Riquadro con schede di immagini
Elenco di schede con immagini
Riquadro con grafico
