Livello 2: ottimizzato in modo adattivo

Le app ottimizzate supportano completamente tutti i tipi di schermo e gli stati del dispositivo, incluse le transizioni di stato.

Linee guida

Crea la tua app in modo che si adatti a tutte le dimensioni di visualizzazione e agli stati dei dispositivi.

Interfaccia utente

ID linea guida	ID test	Descrizione
Responsive_adaptive_layouts	T-Layout_Flow	L'app ha layout adattabili e reattivi progettati per tutte le dimensioni dello schermo. Tutti i layout sono adattabili (consulta Esegui la migrazione della UI ai layout adattabili). L'implementazione dei layout adattivi è determinata dalle classi di dimensioni della finestra. La UI dell'app può includere: Barre di navigazione all'avanguardia che si espandono in pannelli di navigazione completi su finestre di dimensioni maggiori Layout a griglia che ridimensionano il numero di colonne per adattarsi alle modifiche delle dimensioni della finestra Colonne di testo su schermi grandi Riquadri sul lato finale che sono aperti per impostazione predefinita sugli schermi di dimensioni desktop e chiusi sugli schermi più piccoli Crea layout con più riquadri (se appropriato) per sfruttare lo spazio degli schermi di grandi dimensioni. Consulta Layout canonici. Per le app Jetpack Compose, utilizza layout adattivi (come ListDetailPaneScaffold) per creare UI con più riquadri. Per le app legacy basate su attività, l'incorporamento delle attività consente di creare layout con più riquadri visualizzando le attività una accanto all'altra.
UI_Secondary_Elements	T-Layout_Flow	Le finestre modali, i menu contestuali e altri elementi secondari sono formattati correttamente su tutti i tipi di schermo e stati del dispositivo, ad esempio: I riquadri inferiori non occupano l'intera larghezza sugli schermi di grandi dimensioni. (Applica una larghezza massima per evitare l'allungamento). Consulta Layout adattabile in Riquadri inferiori. I pulsanti non occupano l'intera larghezza sugli schermi di grandi dimensioni. Consulta la sezione Design adattivo in Pulsanti. I campi e le caselle di testo non si estendono per l'intera larghezza sugli schermi di grandi dimensioni. Consulta Design adattivo in Campi di testo. I menu di modifica o i modali di piccole dimensioni non coprono l'intero schermo e mantengono il contesto per l'utente il più possibile. Consulta Menu. I menu contestuali vengono visualizzati accanto all'elemento selezionato dall'utente. Consulta l'argomento "Menu contestuali" in Menu. Le barre di navigazione laterali sostituiscono le barre di navigazione per una migliore ergonomia sugli schermi di grandi dimensioni. Consulta Modalità di navigazione laterale. I riquadri di navigazione a scomparsa vengono aggiornati alle barre di navigazione espandibili. Consulta la sezione Riquadro di navigazione a scomparsa. Le finestre di dialogo sono aggiornate al componente Material più recente. Consulta la sezione Finestre di dialogo. Le immagini vengono visualizzate con una risoluzione adeguata e non sono allungate o ritagliate.
Touch_Targets	T-Touch_Targets	I touch target sono di almeno 48 dp. Consulta le linee guida di Material Design relative alle dimensioni dei target.
Drawable_Focus	T-Drawable_Focus	Viene creato uno stato attivo per gli elementi drawable personalizzati interattivi. Un drawable personalizzato è un qualsiasi elemento UI visivo non fornito dal framework Android. Se gli utenti possono interagire con un elemento drawable personalizzato, questo deve essere attivabile quando il dispositivo non è in modalità touch e deve essere visibile un'indicazione visiva dello stato attivo.

Tastiera, mouse e trackpad

ID linea guida	ID test	Descrizione
Keyboard_Navigation	T-Keyboard_Navigation	I flussi delle attività principali nell'app supportano la navigazione da tastiera, inclusa la navigazione con i tasti Tab e Freccia. Consulta Crea app più accessibili.
Keyboard_Shortcuts	T-Keyboard_Shortcuts	L'app supporta le scorciatoie da tastiera per le azioni di uso comune, come selezione, taglio, copia, incolla, annullamento e ripetizione. Consulta Tastiera, mouse e trackpad.
Keyboard_Media_Playback	T-Keyboard_Media_Playback	La tastiera può essere utilizzata per controllare la riproduzione dei contenuti multimediali. Ad esempio, la barra spaziatrice riproduce e mette in pausa i contenuti multimediali.
Keyboard_Send	T-Keyboard_Send	Il tasto Invio della tastiera esegue una funzione di invio nelle app di comunicazione.
Keyboard_Exit	T-Keyboard_Exit	Il tasto Esc della tastiera esegue una funzione di uscita che termina o annulla un'azione, ad esempio: Chiude finestre modali, finestre di dialogo, popup e menu Cancella il testo della ricerca o rimuove lo stato attivo della ricerca Annulla la selezione della tastiera Esce dal video a schermo intero, da PiP, dalla modalità a schermo intero o dalle presentazioni Chiude i controlli sullo schermo, come le barre di avanzamento o i menu Annulla i timer di A seguire / riproduzione automatica Deseleziona tutti gli elementi selezionati Interrompe la ridenominazione/modifica senza salvare Esce dagli strumenti di ritaglio/trasformazione e ignora le modifiche
Context_Menus	T-Context_Menus	È possibile accedere ai menu contestuali tramite il tipico comportamento del clic con il tasto destro del mouse e del trackpad (pulsante secondario del mouse o tocco secondario).
Content_Zoom	T-Content_Zoom	È possibile aumentare lo zoom dei contenuti dell'app utilizzando la rotellina di scorrimento del mouse (insieme alla pressione del tasto Control o Ctrl) e i gesti di pizzicamento del trackpad.
Hover_States	T-Hover_States	Gli elementi dell'interfaccia utente utilizzabili hanno stati di passaggio del mouse (se appropriato) per indicare agli utenti di mouse e trackpad che gli elementi sono interattivi.

Test

Per assicurarti che la tua app sia ottimizzata e reattiva per tutte le configurazioni di visualizzazione, esegui i seguenti test.

Interfaccia utente

ID di test	ID linee guida	Descrizione
T-Layout_Flow	Responsive_adaptive_layouts, UI_Secondary_Elements	Esegui l'app su dispositivi con un'ampia gamma di dimensioni dello schermo, tra cui smartphone, smartphone pieghevoli, tablet piccoli e grandi e computer. Esegui l'app in modalità multi-finestra sui dispositivi. Verifica che il layout dell'app risponda e si adatti alle diverse dimensioni dello schermo e della finestra. Verifica se l'app espande e contrae le barre di navigazione, scala il numero di colonne nei layout a griglia, dispone il testo in colonne e così via. Osserva se gli elementi UI sono formattati sia per l'estetica sia per la funzionalità. Per le app legacy che utilizzano l'incorporamento delle attività, verifica se le attività vengono visualizzate una accanto all'altra sugli schermi grandi e una sopra l'altra sugli schermi piccoli.
T-Touch_Targets	Touch_Targets	Verifica che i touch target mantengano dimensioni e posizione coerenti e accessibili e non siano nascosti o oscurati da altri elementi UI per tutte le dimensioni e configurazioni del display. Per informazioni sull'accessibilità, consulta Accessibility Scanner.
T-Drawable_Focus	Drawable_Focus	In ogni schermata dell'app che contiene un elemento drawable personalizzato interattivo, verifica che l'elemento drawable possa essere selezionato utilizzando una tastiera esterna, un D-pad o un altro dispositivo che consente di selezionare gli elementi UI. Verifica che sia presente un'indicazione visiva dello stato attivo. Per informazioni correlate, consulta la documentazione sullo stato attivo di Compose.

Tastiera, mouse e trackpad

ID di test	ID linee guida	Descrizione
T-Keyboard_Navigation	Keyboard_Navigation	Naviga tra i componenti attivabili dell'app utilizzando il tasto Tab e i tasti freccia di una tastiera esterna.
T-Keyboard_Shortcuts	Keyboard_Shortcuts	Utilizza le scorciatoie da tastiera su una tastiera esterna per eseguire azioni di selezione, taglio, copia, incolla, annullamento e ripetizione.
T-Keyboard_Media_Playback	Keyboard_Media_Playback	Utilizza una tastiera esterna per avviare, interrompere, mettere in pausa, riavvolgere e mandare avanti velocemente la riproduzione di contenuti multimediali.
T-Keyboard_Send	Keyboard_Send	Utilizza il tasto Invio di una tastiera esterna per inviare o confermare i dati.
T-Keyboard_Exit	Keyboard_Exit	Utilizza il tasto Esc di una tastiera esterna per eseguire una funzione di uscita. Verifica che la chiave esegua le seguenti operazioni (se applicabile): Chiude finestre modali, finestre di dialogo, popup e menu Cancella il testo della ricerca o rimuove lo stato attivo della ricerca Annulla la selezione della tastiera Esce dal video a schermo intero, da PiP, dalla modalità a schermo intero o dalle presentazioni Chiude i controlli sullo schermo Annulla i timer di A seguire / riproduzione automatica Deseleziona tutti gli elementi selezionati Interrompe la ridenominazione/modifica senza salvare Esce dagli strumenti di ritaglio/trasformazione e ignora le modifiche
T-Context_Menus	Context_Menus	Utilizza il pulsante secondario del mouse o la funzionalità di tocco secondario del trackpad per accedere al menu contestuale degli elementi interattivi.
T-Content_Zoom	Content_Zoom	Utilizza la rotellina di scorrimento del mouse (insieme al tasto Control o Ctrl) e i gesti di pizzicamento del trackpad per aumentare e diminuire lo zoom dei contenuti.
T-Hover_States	Hover_States	Passa il cursore del mouse o del trackpad sugli elementi dell'interfaccia utente utilizzabili per attivare lo stato di passaggio del mouse dell'elemento.