Livello 2: adattabile e ottimizzato
Mantieni tutto organizzato con le raccolte
Salva e classifica i contenuti in base alle tue preferenze.
Le app che utilizzano layout reattivi e si adattano automaticamente a diverse dimensioni dello schermo offrono un valore aggiunto agli utenti e forniscono esperienze utente più produttive e coinvolgenti.
I layout reattivi formattano e posizionano in modo dinamico elementi come pulsanti,
campi di testo e finestre di dialogo per un'esperienza utente ottimale. Offri automaticamente
agli utenti della tua app un valore aggiunto su schermi più grandi utilizzando pratiche di progettazione
responsive. Che si tratti di più testo visibile a colpo d'occhio, più azioni sullo schermo o target di tocco più grandi e accessibili, le pratiche reattive offrono un'esperienza migliorata per gli utenti di schermi più grandi.
Aggiungere valore tramite il design responsivo
check_circle
Cosa fare
- Utilizza la libreria di componenti M3 Compose, che ha un comportamento
reattivo e adattivo integrato.
- Utilizza layout adattabili, che
si adattano automaticamente e senza problemi per riempire lo spazio disponibile su tutte le dimensioni dello schermo.
cancel
Cosa non fare
- Estendi gli elementi dell'interfaccia utente, inclusi campi di testo, pulsanti e dialoghi, per riempire lo spazio aggiuntivo.
- Aumenta le dimensioni dei caratteri, a meno che
non abbiano uno scopo principalmente grafico.
Esempi
Le seguenti immagini mostrano esempi di app adattabili e ottimizzate.
Riquadro con schede immagine
Elenco di schede con immagini
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.
[[["Facile da capire","easyToUnderstand","thumb-up"],["Il problema è stato risolto","solvedMyProblem","thumb-up"],["Altra","otherUp","thumb-up"]],[["Mancano le informazioni di cui ho bisogno","missingTheInformationINeed","thumb-down"],["Troppo complicato/troppi passaggi","tooComplicatedTooManySteps","thumb-down"],["Obsoleti","outOfDate","thumb-down"],["Problema di traduzione","translationIssue","thumb-down"],["Problema relativo a esempi/codice","samplesCodeIssue","thumb-down"],["Altra","otherDown","thumb-down"]],["Ultimo aggiornamento 2025-07-27 UTC."],[],[],null,["# Tier 2: Responsive and optimized\n\nApps that employ responsive layouts and automatically adapt to different screen\nsizes offer additional value to users and provide more productive, engaging user\nexperiences.\n\nResponsive layouts dynamically format and position elements such as buttons,\ntext fields, and dialogs for an optimal user experience. Automatically offer\nusers of your app additional value on larger screens by utilizing responsive\ndesign practices. Whether it's more text visible at a glance, more actions on\nscreen, or larger, more accessible tap targets, responsive practices provide an\nenhanced experience for users of larger screens.\n\nAdd value through responsive design\n-----------------------------------\n\ncheck_circle\n\n### Do\n\n- Use the M3 Compose component library which has built-in responsive and adaptive behavior.\n- Utilize responsive layouts, which automatically and smoothly adjust to fill the available space across screen sizes. \ncancel\n\n### Don't\n\n- Stretch UI elements---including text fields, buttons, dialogs---to fill extra space.\n- Increase the sizes of fonts, unless they're serving a primarily graphic purpose.\n\nExamples\n--------\n\nThe following images show examples of apps that are responsive and optimized.\n\n\n### Edge-hugging buttons\n\n\u003cbr /\u003e\n\n\n### List of cards\n\n\u003cbr /\u003e\n\n\n### List of switchers and buttons\n\n\u003cbr /\u003e\n\n\n### Tile with image cards\n\n\u003cbr /\u003e\n\n\n### List of cards with images\n\n\u003cbr /\u003e\n\n\n### Tile with graph\n\n\u003cbr /\u003e"]]
