Riquadro di navigazione a scomparsa

I riquadri di navigazione sono componenti essenziali di qualsiasi app per TV, in quanto consentono agli utenti di accedere a destinazioni e funzionalità diverse. Il riquadro di navigazione è la colonna portante dell'architettura delle informazioni dell'app e offre un modo chiaro e intuitivo per navigare nell'app.

A differenza del riquadro di navigazione dei dispositivi mobili, il riquadro di navigazione sulla TV ha stati espansi e compressi visibili all'utente.

Risorse

In evidenza

• Le destinazioni sono ordinate in base all'importanza per l'utente, con le destinazioni frequenti in primo piano e quelle correlate raggruppate.
• Una barra di navigazione è obbligatoria per i riquadri di navigazione standard e modali quando sono compressi.

Varianti

Esistono due tipi di stili di riquadri di navigazione:

1. Riquadro di navigazione standard: si espande per creare ulteriore spazio per la navigazione, spingendo di lato i contenuti della pagina.
2. Menu a scomparsa di navigazione: viene visualizzato come un overlay sopra i contenuti dell'app con una schermata semitrasparente che contribuisce a migliorare la leggibilità quando il riquadro è espanso.

Riquadro di navigazione standard

Anatomia

1. Sezione superiore: mostra il logo dell'app. Serve da pulsante per cambiare profilo o attivare l'azione di ricerca. Nello stato compresso, solo l'icona rimane visibile nel contenitore superiore.
2. Elemento di navigazione: ogni elemento della barra di navigazione presenta una combinazione di un'icona e del testo, con solo l'icona visibile nello stato compresso.
3. Barra di navigazione:la barra di navigazione è una colonna che mostra da 3 a 7 destinazioni dell'app e funge da menu principale. Ogni destinazione ha un'etichetta di testo e un'icona facoltativa, con la possibilità di raggruppare gli elementi del menu per una maggiore contestualizzazione.
4. Sezione in basso: può avere da uno a tre pulsanti di azione, ideali per pagine come impostazioni, guida o profilo.

Comportamento

• Espansione del riquadro di navigazione:quando è espanso, il riquadro di navigazione standard spinge i contenuti della pagina per fare spazio alla versione espansa della navigazione.
• Aggiornamenti di navigazione: quando passi da un elemento di navigazione all'altro, la pagina si aggiorna automaticamente in base alla nuova destinazione.

Riquadro di navigazione a scomparsa modale

Anatomia

1. Sezione superiore: mostra il logo dell'app. Serve da pulsante per cambiare profilo o per attivare un'azione di ricerca. Nello stato compresso, solo l'icona rimane visibile nel contenitore superiore.
2. Elemento di navigazione: ogni elemento della barra di navigazione è costituito da una combinazione di un'icona e del testo, con solo l'icona visibile nello stato compresso.
3. Barra di navigazione:colonna che mostra da tre a sette destinazioni dell'app e funge da menu principale. Ogni destinazione ha un'etichetta di testo e un'icona facoltativa, con la possibilità di raggruppare gli elementi del menu per una maggiore contestualizzazione.
4. Scrim:per una migliore leggibilità del testo dell'elemento di navigazione.
5. Sezione in basso: può avere da uno a tre pulsanti di azione, ideali per pagine come impostazioni, guida o profilo.

Comportamento

• Espansione del riquadro:viene visualizzato come overlay sopra i contenuti dell'app, con una schermata semitrasparente che migliora la leggibilità quando il riquadro è espanso.
• Aggiornamenti di navigazione: si verificano quando l'utente seleziona un elemento di navigazione.

Scrim

Per il riquadro di navigazione modale, una schermata semitrasparente dietro il riquadro garantisce la leggibilità dei contenuti. Puoi utilizzare una superficie a gradiente o a tinta unita dietro il riquadro di navigazione a scomparsa per creare diverse variazioni dell'interfaccia utente.

Specifiche

Utilizzo

Badge

I badge sono indicatori visivi che possono essere aggiunti agli elementi di navigazione per fornire informazioni aggiuntive. Ad esempio, un badge potrebbe essere utilizzato per indicare il numero di nuovi film disponibili in un'app di streaming. Utilizza i badge con parsimonia e solo quando necessario, poiché possono rendere l'interfaccia utente ingombrata e disordinata. Quando utilizzi i badge, assicurati che siano chiari e facili da comprendere e che non interferiscano con la capacità dell'utente di navigare nell'app.

Etichette

Le etichette nel riquadro di navigazione devono essere chiare e concise in modo da essere più facili da leggere.

warning

Attenzione

Se non è possibile evitare di utilizzare etichette lunghe, troncale l'etichetta utilizzando tre puntini.

cancel

Cosa non fare

Evita di utilizzare etichette di testo lunghe che richiedono il testo a capo.

cancel

Cosa non fare

Evita di creare un riquadro di navigazione senza icone, perché potrebbe essere difficile per gli utenti navigare nell'app.

cancel

Cosa non fare

Evita di mescolare elementi di navigazione con icone con elementi di navigazione senza icone, in quanto ciò potrebbe rendere confusa l'esperienza di navigazione per gli utenti.

I riquadri di navigazione sono elementi fondamentali che rappresentano la gerarchia della tua app e devono essere utilizzati per elencare solo cinque-sei destinazioni di navigazione principali.

check_circle

Cosa fare

Limita il numero di destinazioni di navigazione principali nel riquadro di navigazione a cinque o sei per un'esperienza utente migliore.

cancel

Cosa non fare

Evita di aggiungere troppi elementi di navigazione, in quanto ciò può creare uno scorrimento verticale e rendere più difficile per gli utenti navigare nell'app.