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.

Rappresentazione dei tre livelli di qualità come livelli impilati verticalmente con il livello intermedio evidenziato.

Linee guida

Crea la tua app in modo che si adatti a tutte le dimensioni del display e a tutti gli stati del dispositivo.

Interfaccia utente

ID linea guida ID test Descrizione
Responsive_adaptive_layouts T-Layout_Flow

L'app ha layout adattabili e reattivi progettati per schermi di tutte le dimensioni. Tutti i layout sono reattivi (vedi Migrare l'interfaccia utente a layout reattivi). L'implementazione dei layout adattivi è determinata dalle classi di dimensioni della finestra.

L'interfaccia utente dell'app può includere:

  • Barre di navigazione all'avanguardia che si espandono in pannelli di navigazione completi con dimensioni della finestra più grandi
  • Layout a griglia che scalano il numero di colonne per adattarsi alle modifiche delle dimensioni della finestra
  • Colonne di testo su schermi grandi
  • Pannelli a comparsa aperti per impostazione predefinita sulle dimensioni dello schermo del computer; chiusi, sugli schermi più piccoli

Crea layout a più riquadri (se opportuno) per sfruttare lo spazio disponibile sugli schermi di grandi dimensioni. Consulta Layout canonici.

Per le app Jetpack Compose, utilizza layout adattivi (come ListDetailPaneScaffold) per creare UI a più riquadri. Per le app legacy basate sull'attività, l'incorporamento dell'attività consente layout a più riquadri visualizzando le attività una accanto all'altra.
UI_Secondary_Elements T-Layout_Flow

Modal, menu contestuali e altri elementi secondari sono formattati correttamente su tutti i tipi di schermo e stati del dispositivo, ad esempio:

  • I fogli inferiori non occupano l'intera larghezza sugli schermi di grandi dimensioni. (Applica una larghezza massima per evitare lo stiramento.) Vedi Comportamento in Fogli: in basso.
  • I pulsanti non occupano l'intera larghezza sugli schermi di grandi dimensioni. Vedi Comportamento in Pulsanti.
  • I campi e le caselle di testo non si estendono per tutta la larghezza sugli schermi di grandi dimensioni. Consulta Comportamento in Campi di testo.
  • I piccoli menu di modifica o modali non coprono l'intero schermo e mantengono il contesto per l'utente il più possibile. Vedi Menu.
  • I menu contestuali vengono visualizzati accanto all'elemento selezionato dall'utente. Consulta l'argomento "Menu contestuali" in Menu.
  • Le barre di navigazione vengono sostituite dalle barre di navigazione laterali per una migliore ergonomia su schermi di grandi dimensioni. Vedi Barra di navigazione.
  • I riquadri di navigazione vengono aggiornati alle barre di navigazione espanse. Vedi Riquadro di navigazione a scomparsa.
  • Le finestre di dialogo vengono aggiornate al componente Material più recente. Vedi Dialoghi.
  • Le immagini vengono visualizzate a una risoluzione adeguata e non sono allungate o ritagliate.
Touch_Targets T-Touch_Targets I touch target sono almeno 48 dp. Consulta le linee guida di Material Design su layout e tipografia.
Drawable_Focus T-Drawable_Focus Viene creato uno stato attivo per le risorse disegnabili personalizzate interattive. Un elemento disegnabile personalizzato è qualsiasi elemento visivo dell'interfaccia utente non fornito dal framework Android. Se gli utenti possono interagire con un elemento disegnabile personalizzato, questo deve essere selezionabile quando il dispositivo non è in modalità tocco 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 di attività principali nell'app supportano la navigazione da tastiera, inclusa la navigazione con i tasti Tab e Freccia. Vedi Creare app più accessibili.
Keyboard_Shortcuts T-Keyboard_Shortcuts L'app supporta le scorciatoie da tastiera per le azioni di uso comune, come seleziona, taglia, copia, incolla, annulla e ripeti. Vedi 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 di ricerca o rimuove lo stato attivo della ricerca
  • Annulla lo stato attivo della tastiera
  • Esce dal video a schermo intero, dalla modalità PIP, dalla modalità a schermo intero o dalle presentazioni
  • Chiude i controlli sullo schermo, ad esempio barre di avanzamento o menu
  • Annulla i timer di Prossimi video / 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 I menu contestuali sono accessibili tramite il normale comportamento di clic con il tasto destro del mouse e del trackpad (tasto del mouse secondario o tocco secondario).
Content_Zoom T-Content_Zoom È possibile aumentare lo zoom dei contenuti dell'app utilizzando la rotellina di scorrimento del mouse (in combinazione con la pressione del tasto Controllo o Ctrl) e i gesti di pizzicamento del trackpad.
Hover_States T-Hover_States Gli elementi dell'interfaccia utente interattivi 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 a 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 dispositivi desktop. Esegui l'app in modalità multi-finestra sui dispositivi.

Verifica che il layout dell'app risponda e si adatti a diverse dimensioni dello schermo e della finestra. Verifica se l'app espande e contrae le barre di navigazione, ridimensiona il numero di colonne nei layout a griglia, inserisce il testo nelle colonne e così via. Osserva se gli elementi UI sono formattati sia per l'estetica che per la funzionalità.

Per le app legacy che utilizzano l'incorporamento di attività, verifica se le attività vengono visualizzate una accanto all'altra su schermi grandi e impilate su schermi piccoli.
T-Touch_Targets Touch_Targets Verifica che i target di tocco mantengano dimensioni e posizione coerenti e accessibili e che non siano nascosti o oscurati da altri elementi dell'interfaccia utente per tutte le dimensioni e le configurazioni del display. Per informazioni sull'accessibilità, consulta Accessibility Scanner.
T-Drawable_Focus Drawable_Focus In ogni schermata dell'app che contiene un elemento disegnabile personalizzato interattivo, verifica che sia possibile selezionarlo utilizzando una tastiera esterna, un D-pad o un altro dispositivo che consente di selezionare gli elementi della UI. Verifica che sia visibile un'indicazione visiva dello stato attivo. Per informazioni correlate, consulta la documentazione sulla messa a fuoco della composizione.

Tastiera, mouse e trackpad

ID di test ID linee guida Descrizione
T-Keyboard_Navigation T-Keyboard_Navigation Naviga tra i componenti attivabili dell'app utilizzando i tasti Tab e 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 ripristino.
T-Keyboard_Media_Playback Keyboard_Media_Playback Utilizza una tastiera esterna per avviare, interrompere, mettere in pausa, riavvolgere e mandare avanti la riproduzione dei contenuti multimediali.
T-Keyboard_Send Keyboard_Send Utilizza il tasto Invio di una tastiera esterna per inviare o inviare 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 di ricerca o rimuove lo stato attivo della ricerca
  • Annulla lo stato attivo della tastiera
  • Esce dal video a schermo intero, dalla modalità PIP, dalla modalità a schermo intero o dalle presentazioni
  • Chiude i controlli sullo schermo
  • Annulla i timer di Prossimi video / 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 del mouse (in combinazione con il tasto Controllo 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 sopra gli elementi UI interattivi per attivare lo stato di passaggio del mouse dell'elemento.