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
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.

Tutti i margini superiore, inferiore e laterale devono essere definiti in percentuali per evitare tagli e fornire una scalabilità proporzionale degli elementi.

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.

I layout adattabili consentono di inserire più chip, schede, righe di testo e pulsanti in un'unica schermata

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.

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.

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.

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.
Pronta per schermi di tutte le dimensioni |
Adattabili e ottimizzati |
Adattiva e differenziata |
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.