Iniziare a utilizzare i layout adattivi

L'ecosistema Wear OS è costituito da dispositivi con schermi di varie dimensioni. L'utilizzo dei principi della UI adattiva è fondamentale per offrire la massima qualità possibile a tutti gli utenti.

Che cos'è l'interfaccia utente adattiva?

Le UI adattive ampliano e cambiano per sfruttare al meglio tutto lo spazio disponibile sullo schermo, indipendentemente dalle dimensioni dello schermo su cui viene visualizzata.

Le UI adattive cambiano in modo reattivo, utilizzando componenti e metodi integrati direttamente nella logica del layout. Questi layout utilizzano inoltre i punti di interruzione delle dimensioni dello schermo, applicando un design diverso a diverse dimensioni dello schermo, per creare un'esperienza ancora più completa per gli utenti.

Dimensioni schermo principali

Scopri le principali dimensioni di riferimento da tenere a mente quando progetti nuove esperienze

Dimensioni schermo

Tipi di layout

Durante la progettazione dei layout adattivi sullo schermo rotondo, le visualizzazioni a scorrimento e senza scorrimento hanno requisiti unici per la scalabilità degli elementi UI e il mantenimento di un layout e di una composizione bilanciati.

Visualizzazioni a scorrimento
Tutti i margini superiore, inferiore e laterale devono essere definiti in percentuali per evitare tagli e fornire una scalabilità proporzionale degli elementi.
Visualizzazioni senza scorrimento
Tutti i margini devono essere definiti in percentuale e i vincoli verticali devono essere definiti in modo che i contenuti principali al centro possano allungarsi per riempire l'area disponibile.

Aggiungi valore tramite layout adattivi e pratiche di progettazione

Durante la progettazione dei layout adattivi sullo schermo rotondo, le visualizzazioni a scorrimento e senza scorrimento hanno requisiti unici per la scalabilità degli elementi UI e il mantenimento di un layout e di una composizione bilanciati.

Le immagini seguenti sono suggerimenti generali; gli esempi sono solo a scopo illustrativo. Visualizza ogni componente o pagina di piattaforma per indicazioni dettagliate, contestuali e adattabili.

Riepilogo di più contenuti
I layout adattabili consentono di inserire più chip, schede, righe di testo e pulsanti in un'unica schermata
Più elementi di contenuti visibili
Utilizza nuovi layout, applicati in corrispondenza di punti di interruzione delle dimensioni dello schermo definiti, per consentire l'introduzione di nuovi contenuti, ove possibile, e offrire all'utente un valore aggiuntivo sui dispositivi con schermi di dimensioni più grandi.
Visibilità migliorata
Utilizza uno spazio aggiuntivo sullo schermo per fornire contenitori più grandi, testo più grande, anelli più spessi e una visualizzazione dei dati più granulare per fornire una migliore visibilità agli utenti.
Maggiore usabilità
Usa più spazio sullo schermo per fornire target dei tocchi più grandi, una gerarchia visiva più ampia e più spazio tra i contenuti per rendere le interfacce con cui è più facile e confortevole interagire.
Composizioni ottimizzate
Utilizza i nostri componenti e modelli aggiornati per offrire un aspetto migliore alle nostre UI su tutti gli schermi di tutte le dimensioni.

Qualità dell'app

Le nostre norme sulla qualità sono organizzate in tre livelli. Offri agli utenti la migliore esperienza possibile rispettando le linee guida in tutti e tre i livelli.

Norme sulla qualità

Pronta per schermi di tutte le dimensioni
Assicurati che la tua app offra un'esperienza di qualità su schermi di tutte le dimensioni. Crea layout che utilizzano appieno lo spazio disponibile per le app.

Inizia

Adattabili e ottimizzati
Fornisci più contenuti agli utenti sui dispositivi che lo consentono e utilizza layout adattabili che si adattano automaticamente alle diverse dimensioni dello schermo.

Inizia

Adattiva e differenziata
Sfrutta al meglio lo spazio aggiuntivo utilizzando i punti di interruzione per offrire nuove ed efficaci esperienze su schermi più grandi che non sono possibili su dispositivi con schermi più piccoli.

Inizia

Utilizza layout canonici consolidati

Utilizza layout canonici consolidati per consentire alla tua UI di adattarsi senza problemi a una vasta gamma di dispositivi di dimensioni diverse.

I nostri layout canonici sono stati sviluppati in modo accurato per offrire un'esperienza di alta qualità su schermi di tutte le dimensioni.

Layout canonici