Livello 2: ottimizzato in modo adattivo

Le app ottimizzate supportano completamente tutti i tipi di schermi e gli stati dei dispositivi, 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 dello schermo e a tutti gli 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 schermi di tutte le dimensioni. Tutti i layout sono reattivi (vedi Eseguire la migrazione dell'interfaccia utente a layout reattivi). L'implementazione dei layout adattabili è determinata dalle classi di dimensioni delle finestre.

L'interfaccia utente 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 scalano il numero di colonne per adattarsi alle modifiche delle dimensioni delle finestre
  • Colonne di testo su schermi di grandi dimensioni
  • Pannelli di chiusura che sono aperti per impostazione predefinita sulle dimensioni dello schermo del computer e chiusi sugli schermi più piccoli

Crea layout a più riquadri (se appropriato) per sfruttare lo spazio degli schermi di grandi dimensioni. Vedi Layout canonici.

L'incorporamento delle attività consente alle app basate sulle attività di creare layout a 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 schermi e stati dei dispositivi, ad esempio:

  • I fogli inferiori non sono a larghezza intera sugli schermi di grandi dimensioni. (Applica una larghezza massima per evitare l'allungamento.) Vedi Comportamento nei fogli: in basso.
  • I pulsanti non sono a larghezza intera sugli schermi di grandi dimensioni. Vedi Comportamento in pulsanti.
  • I campi e le caselle di testo non si estendono a larghezza intera sugli schermi di grandi dimensioni. Vedi Comportamento nei campi di testo.
  • I piccoli menu o le finestre modali di modifica non coprono l'intero schermo e mantengono il più possibile il contesto per l'utente. Vedi Menu.
  • I menu contestuali vengono visualizzati accanto all'elemento selezionato dall'utente. Vedi l'argomento "Menu contestuali" in Menu.
  • Le barre di navigazione sostituiscono le barre di navigazione per una migliore ergonomia sugli schermi di grandi dimensioni. Vedi Barra di navigazione.
  • I riquadri di navigazione a scomparsa vengono aggiornati alle barre di navigazione espanse. Vedi Riquadro di navigazione a scomparsa.
  • Le finestre di dialogo vengono aggiornate all'ultimo componente Material. Vedi Finestre di dialogo.
  • Le immagini vengono visualizzate con una risoluzione corretta e non vengono allungate o ritagliate.
Touch_Targets T-Touch_Targets I touch target sono di almeno 48 dp. Vedi le linee guida per il layout e la tipografia di Material Design.
Drawable_Focus T-Drawable_Focus Viene creato uno stato attivo per gli elementi disegnabili personalizzati interattivi. Un elemento disegnabile personalizzato è qualsiasi elemento UI visivo non fornito dal framework Android. Se gli utenti possono interagire con una risorsa drawable personalizzata, questa deve essere selezionabile 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 di attività principali dell'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 selezionare, tagliare, copiare, incollare, annullare e ripetere. Vedi Compatibilità con l'input.
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 da video a schermo intero, PiP, modalità a schermo intero o presentazioni
  • Chiude i controlli sullo schermo, come barre di avanzamento o menu
  • Annulla i timer di Riproduci il video successivo / 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 tipico comportamento di clic con il tasto destro del mouse e del trackpad (tasto secondario del mouse o tocco secondario).
Content_Zoom T-Content_Zoom I contenuti dell'app possono essere ingranditi utilizzando la rotellina del mouse (in combinazione con la pressione del tasto Control o Ctrl) e i gesti di pizzicamento del trackpad.
Hover_States T-Hover_States Gli elementi dell'interfaccia utente su cui è possibile eseguire azioni 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 test ID linee guida Descrizione
T-Layout_Flow Responsive_adaptive_layouts,
UI_Secondary_Elements

Esegui l'app su dispositivi con un'ampia varietà di dimensioni dello schermo, inclusi 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. Controlla se l'app espande e contrae le barre di navigazione, scala il numero di colonne nei layout a griglia, inserisce il testo nelle colonne e così via. Verifica se gli elementi dell'interfaccia utente sono formattati sia per l'estetica sia per la funzionalità.

Per le app che utilizzano l'incorporamento delle attività, verifica se le attività vengono visualizzate una accanto all'altra sugli schermi di grandi dimensioni e impilate sugli schermi piccoli.
T-Touch_Targets Touch_Targets Verifica che i touch target 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 configurazioni di visualizzazione. Per informazioni sull'accessibilità, vedi Accessibility Scanner.
T-Drawable_Focus Drawable_Focus Su ogni schermata dell'app che contiene una risorsa drawable personalizzata interattiva, verifica che la risorsa drawable possa essere selezionata utilizzando una tastiera esterna, un D-pad o un altro dispositivo che consenta di selezionare gli elementi dell'interfaccia utente. Verifica che sia visibile un'indicazione visiva dello stato attivo. Per informazioni correlate, vedi Modalità touch.

Tastiera, mouse e trackpad

ID test ID linee guida Descrizione
T-Keyboard_Navigation T-Keyboard_Navigation Sposta lo stato attivo 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 le 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 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 il tasto esegua le seguenti operazioni (se applicabili):

  • 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 da video a schermo intero, PiP, modalità a schermo intero o presentazioni
  • Chiude i controlli sullo schermo
  • Annulla i timer di Riproduci il video successivo / 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 tasto 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 Control o Ctrl) e i gesti di pizzicamento del trackpad per ingrandire e ridurre i contenuti.
T-Hover_States Hover_States Passa il cursore del mouse o del trackpad sopra gli elementi dell'interfaccia utente su cui è possibile eseguire azioni per attivare lo stato di passaggio del mouse dell'elemento.