I riquadri di navigazione a scomparsa sono componenti essenziali di qualsiasi app TV in quanto consentono agli utenti di accedere a diverse destinazioni e funzionalità. Un riquadro di navigazione a scomparsa è la spina dorsale dell'architettura delle informazioni di un'app e fornisce un modo chiaro e intuitivo per navigare nell'app.
A differenza del riquadro di navigazione a scomparsa, il riquadro di navigazione a scomparsa sulla TV mostra all'utente gli stati espansi e compressi.
Risorse
| Tipo | Collega | Stato |
|---|---|---|
| Progettazione | Origine progettazione (Figma) | Disponibile |
| Implementazione |
Jetpack Compose (NavigatorDrawer)
Jetpack Compose (ModalNavigatorDrawer) |
Disponibile |
In evidenza
- Le destinazioni sono ordinate in base all'importanza per l'utente, con prima le destinazioni frequenti e le destinazioni correlate raggruppate insieme.
- È necessaria una barra di navigazione sia per i riquadri a scomparsa standard che per quelli modali quando sono compressi.
Varianti
Esistono due tipi di stili di riquadro di navigazione a scomparsa:
- Riquadro di navigazione a scomparsa standard: si espande per creare ulteriore spazio per la navigazione, spingendo da parte i contenuti della pagina.
- Riquadro di navigazione a scomparsa modale: appare come un overlay sopra i contenuti dell'app con una griglia che migliora la leggibilità quando il riquadro a scomparsa viene espanso.
Riquadro di navigazione standard a scomparsa
Anatomia
- Sezione superiore: mostra il logo dell'app. Serve da pulsante per cambiare profilo o per attivare l'azione di ricerca. In stato compresso, solo l'icona rimane visibile nel contenitore superiore.
- Elemento di navigazione: ogni elemento nella barra di navigazione presenta una combinazione di un'icona e del testo. È visibile solo l'icona nello stato compresso.
- Barra di navigazione: la barra di navigazione è una colonna che mostra da 3 a 7 destinazioni delle app, fungendo da menu principale. Ogni destinazione ha un'etichetta di testo e un'icona facoltativa, con la possibilità di raggruppare le voci di menu per migliorare la contestualizzazione.
- Sezione inferiore: può avere da uno a tre pulsanti di azione, ideali per pagine come le impostazioni, la guida o il profilo.
Comportamento
- Espansione del riquadro di navigazione a scomparsa: quando è espanso, i cassetti di navigazione standard spingono i contenuti della pagina per fare spazio alla versione espansa per la navigazione.
- Aggiornamenti di navigazione: passando da un elemento di navigazione a un altro, la pagina si aggiorna automaticamente alla nuova destinazione.
Riquadro di navigazione modale a scomparsa
Anatomia
- Sezione superiore: mostra il logo dell'app. Fungere da pulsante per cambiare profilo o per attivare un'azione di ricerca. Nello stato compresso, rimane visibile solo l'icona nel contenitore superiore.
- Elemento di navigazione: ogni elemento nella barra di navigazione presenta una combinazione di un'icona e del testo. È visibile solo l'icona nello stato compresso.
- Guida di navigazione: colonna che mostra da tre a sette destinazioni dell'app e che funge da menu principale. Ogni destinazione ha un'etichetta di testo e un'icona facoltativa, con la possibilità di raggruppare le voci di menu per migliorare la contestualità.
- Scrim:per una migliore leggibilità del testo degli elementi di navigazione.
- Sezione inferiore: può avere da uno a tre pulsanti di azione, ideali per pagine come le impostazioni, la guida o il profilo.
Comportamento
- Espansione del riquadro a scomparsa: viene visualizzata come un overlay sulla parte superiore dei contenuti dell'app, con una struttura che migliora la leggibilità quando il riquadro a scomparsa è espanso.
- Aggiornamenti di navigazione: si verificano quando l'utente seleziona un elemento di navigazione.
Tela
Per il riquadro di navigazione modale, una cornice dietro il cassetto garantisce che il contenuto del riquadro sia leggibile. Puoi utilizzare una superficie sfumata o solida dietro il riquadro di navigazione a scomparsa per creare diverse varianti dell'interfaccia utente.
Tela con gradiente
Tela piena
Specifiche
Utilizzo
Indicatore attivo
L'indicatore attivo è un segnale visivo che evidenzia la destinazione del riquadro di navigazione a scomparsa che viene visualizzata. In genere, l'indicatore è rappresentato da una forma di sfondo visivamente distinta dagli altri elementi nel riquadro a scomparsa. L'indicatore attivo aiuta gli utenti a capire dove si trovano nell'app e quale destinazione stanno navigando. Assicurati che l'indicatore attivo sia chiaramente visibile e facilmente distinguibile dagli altri elementi nel riquadro di navigazione a scomparsa.
Divisori (facoltativi)
I divisori possono essere utilizzati per separare i gruppi di destinazioni all'interno del riquadro di navigazione a scomparsa, in modo da migliorare l'organizzazione. Tuttavia, è importante usarli con parsimonia poiché troppi divisori possono creare rumore visivo e aggiungere inutili sovraccarichi cognitivi agli utenti.
Badge
I badge sono indizi visivi che possono essere aggiunti agli elementi di navigazione per fornire ulteriori informazioni. Ad esempio, puoi utilizzare un badge per indicare il numero di nuovi film disponibili in un'app di streaming. Utilizza i badge con parsimonia e solo quando necessario, poiché possono far apparire l'interfaccia utente piena e disordinata. Quando utilizzi i badge, assicurati che siano chiari e più facili da comprendere e che non interferiscano con la capacità dell'utente di navigare nell'app.
Badge espanso
Badge compresso
Etichette
Le etichette nel riquadro di navigazione a scomparsa devono essere chiare e concise in modo da essere più facili da leggere.
Attenzione
Cosa non fare
Cosa non fare
Cosa non fare
I riquadri di navigazione a scomparsa sono elementi fondamentali che rappresentano la gerarchia dell'app e devono essere utilizzati per elencare solo da cinque a sei destinazioni di navigazione principali.
Cosa fare
