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

Guideline ID Test IDs Description
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 sul bordo posteriore aperti per impostazione predefinita sulle dimensioni dello schermo del computer; chiusi sugli schermi più piccoli

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

L'incorporamento delle attività consente alle app basate sull'attività di creare 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 in barre di navigazione espanse. Vedi Riquadro di navigazione a scomparsa.
  • Le finestre di dialogo vengono aggiornate all'ultimo componente Material. 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 UI visivo 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

Guideline ID Test IDs Description
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 seleziona, taglia, copia, incolla, annulla e ripeti. Consulta la sezione Compatibilità degli 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.
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 ingrandire i contenuti delle app utilizzando la rotellina 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

Test ID Guideline IDs Description
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 comprime 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 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, vedi Modalità multi-touch.

Tastiera, mouse e trackpad

Test ID Guideline IDs Description
T-Keyboard_Navigation 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 dati.
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.