Iniziare a utilizzare i layout adattivi
Mantieni tutto organizzato con le raccolte
Salva e classifica i contenuti in base alle tue preferenze.
L'ecosistema Wear OS è costituito da dispositivi con una vasta gamma di dimensioni dello schermo. L'utilizzo di principi di UI adattabili è fondamentale per offrire un'esperienza di massima qualità a tutti gli utenti.
Che cos'è l'interfaccia utente adattiva?
Le UI adattive si estendono e cambiano per sfruttare al meglio tutto lo spazio sullo schermo disponibile, indipendentemente dalle dimensioni dello schermo su cui vengono visualizzate.
Le UI adattabili cambiano in modo dinamico, utilizzando componenti e metodi integrati direttamente nella logica del layout. Questi layout utilizzano anche breakpoint delle dimensioni dello schermo, applicando un design diverso a dimensioni dello schermo diverse, per creare un'esperienza ancora più ricca per gli utenti.
Dimensioni dello schermo principali
Scopri le dimensioni di riferimento chiave da tenere a mente durante la progettazione di nuove esperienze
Dimensioni dello schermo
Tipi di layout
Quando progetti layout adattivi per lo schermo rotondo, le visualizzazioni con scorrimento e quelle senza scorrimento hanno requisiti specifici per la scalabilità degli elementi dell'interfaccia utente e per mantenere un layout e una composizione equilibrati.
Visualizzazioni con 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.
Aggiungi valore tramite layout e pratiche di progettazione adattabili
Quando progetti layout adattivi per lo schermo rotondo, le visualizzazioni con scorrimento e quelle senza scorrimento hanno requisiti specifici per la scalabilità degli elementi dell'interfaccia utente e per mantenere un layout e una composizione equilibrati.
Le seguenti immagini sono suggerimenti generici; gli esempi sono solo a scopo illustrativo. Visualizza ogni pagina del componente o della piattaforma per ricevere indicazioni dettagliate, contestuali e dinamiche.
Più contenuti in un unico riepilogo
I layout adattabili consentono di inserire più chip, più schede, più righe di testo e più pulsanti in un'unica schermata
Più elementi di contenuti visibili
Utilizza nuovi layout, applicati a breakpoint delle dimensioni dello schermo definiti, per consentire, se possibile, l'introduzione di nuovi contenuti, offrendo all'utente un valore aggiuntivo su dispositivi con dimensioni dello schermo più grandi.
Visualizzazione rapida migliorata
Utilizza lo spazio extra dello schermo per fornire contenitori più grandi, testo più grande, anelli più spessi e visualizzazione dei dati più granulare per offrire agli utenti una migliore leggibilità.
Maggiore usabilità
Utilizza lo spazio extra dello schermo per fornire target di tocco più grandi, una gerarchia visiva migliore e uno spazio aggiuntivo tra gli elementi dei contenuti per rendere le interfacce più semplici e confortevoli con cui interagire.
Composizioni ottimizzate
Utilizza i nostri componenti e modelli aggiornati per offrire un aspetto migliore alle nostre UI su tutti i formati dello schermo.
Qualità dell'app
Le nostre norme sulla qualità sono organizzate in tre livelli. Offri la migliore esperienza possibile ai tuoi utenti rispettando le linee guida di tutti e tre i livelli.
Norme sulla qualità
Pronto per tutte le dimensioni dello schermo
Assicurati che la tua app offra un'esperienza di qualità su tutte le dimensioni dello schermo. Crea layout che utilizzino completamente lo spazio dell'app disponibile.
Inizia
Adattabile e ottimizzato
Offri più contenuti agli utenti sui dispositivi che lo consentono e utilizza layout adattabili che si adattano automaticamente a schermi di dimensioni diverse.
Inizia
Adattivo e differenziato
Sfrutta al meglio lo spazio aggiuntivo utilizzando i breakpoint per offrire nuove esperienze efficaci su schermi più grandi, non possibili su dispositivi con schermi più piccoli.
Inizia
Utilizzare layout canonici consolidati
Utilizza layout canonici stabiliti per consentire alle UI di adattarsi senza problemi a una serie di dimensioni dei dispositivi.
I nostri layout canonici sono stati sviluppati con attenzione per offrire un'esperienza di alta qualità su tutti i dispositivi.
Layout canonici
I campioni di contenuti e codice in questa pagina sono soggetti alle licenze descritte nella Licenza per i contenuti. Java e OpenJDK sono marchi o marchi registrati di Oracle e/o delle sue società consociate.
Ultimo aggiornamento 2025-07-27 UTC.
[null,null,["Ultimo aggiornamento 2025-07-27 UTC."],[],[],null,["# Get started with adaptive layouts\n\nThe Wear OS ecosystem is made up of devices that have a wide variety of screen\nsizes. Utilizing adaptive UI principles is critical to delivering the highest\nquality experience for all users.\n\nWhat is adaptive UI?\n--------------------\n\nAdaptive UIs stretch and change to make the best possible use of all available\nscreen space, no matter what size screen they're rendered on.\n\nAdaptive UIs change responsively, using components and methods built directly\ninto the layout logic. These layouts also utilize screen size\nbreakpoints---applying a different design on different screen sizes---to create an\neven richer experience for users.\n\nKey screen sizes\n----------------\n\n\nLearn about key reference sizes to keep in mind as you design new experiences\n\n[Screen sizes](/design/ui/wear/guides/foundations/screen-sizes) \n\n\u003cbr /\u003e\n\n\u003cbr /\u003e\n\nTypes of layouts\n----------------\n\nWhen designing for adaptive layouts on the round screen, scrolling and\nnon-scrolling views each have unique requirements for scaling UI elements and\nmaintaining a balanced layout and composition.\n\n\n**Scrolling views**\n\nAll top, bottom, and side margins\nshould be defined in percentages to avoid clipping and provide\nproportional scaling of elements. \n\n**Non-scrolling views**\n\nAll margins should be defined\nin percentages and vertical constraints should be defined such that the\nmain content in the middle can stretch to fill the available area.\n\n\u003cbr /\u003e\n\nAdd value through adaptive layouts and design practices\n-------------------------------------------------------\n\nWhen designing for adaptive layouts on the round screen, scrolling and\nnon-scrolling views each have unique requirements for scaling UI elements and\nmaintaining a balanced layout and composition.\n\nThe following images are broad suggestions; examples are for illustrative\npurposes only. View each component or surface page for detailed, contextual,\nresponsive guidance.\n\n\n**More content at a glance**\n\nResponsive layouts allow for more chips, more cards, more lines of text, and\nmore buttons to fit on a single screen \n\n**More content elements visible**\n\nUtilize new layouts, applied at defined screen size breakpoints, to allow for\nthe introduction of new content when possible, giving the user additional value\non devices with larger screen sizes.\n\n\u003cbr /\u003e\n\n\n**Improved glanceability**\n\nUse extra screen space to provide larger containers, larger text, thicker rings,\nand more granular data visualization to provide better glanceability for users. \n\n**Improved usability**\n\nUse extra screen space to provide bigger tap targets, greater visual hierarchy,\nand additional space between content items to make interfaces easier and more\ncomfortable to interact with.\n\n\u003cbr /\u003e\n\n\n**Optimized compositions**\n\nUtilize our updated components and templates to offer a better look and feel for\nour UIs across all screen sizes. \n\n\u003cbr /\u003e\n\nApp quality\n-----------\n\n\nOur quality guidelines are organized into three levels. Enable the best possible\nexperience for your users by meeting guidelines in all three tiers.\n\n[Quality guidelines](/docs/quality-guidelines/wear-app-quality) \n\n\u003cbr /\u003e\n\n\u003cbr /\u003e\n\n*** ** * ** ***\n\n\n**Ready for all screen sizes**\n\nMake sure your app is delivering a quality experience across all screen\nsizes. Create layouts that fully use the available app space.\n\n[Get started](/design/ui/wear/guides/foundations/larger-screens-ready) \n**Responsive and optimized**\n\nDeliver more content to users on devices which allow for it, and utilize\nresponsive layouts that automatically adapt to different screen sizes.\n\n[Get started](/design/ui/wear/guides/foundations/larger-screens-optimized) \n**Adaptive and differentiated**\n\nMake the most of additional real estate by utilizing breakpoints to offer\npowerful new experiences on larger screens which are not possible on devices\nwith smaller screens.\n\n[Get started](/design/ui/wear/guides/foundations/larger-screens-differentiated)\n\n\u003cbr /\u003e\n\n*** ** * ** ***\n\nUtilize established canonical layouts\n-------------------------------------\n\n\nUse established canonical layouts to help your UIs adapt smoothly across a range\nof device sizes.\n\nOur canonical layouts have been developed thoughtfully to offer a high quality\nexperience across all screen sizes.\n\n[Canonical layouts](/design/ui/wear/guides/foundations/canonical-adaptive-layouts) \n\n\u003cbr /\u003e"]]
