Navigationsleisten sind wesentliche Bestandteile jeder TV-App, da Nutzer mit ihnen auf verschiedene Ziele und Funktionen zugreifen können. Eine Navigationsleiste ist das Rückgrat der Informationsarchitektur der App und bietet eine klare und intuitive Navigation durch die App.
Im Gegensatz zur Navigationsleiste für Mobilgeräte ist bei der Navigationsleiste auf Fernsehern sowohl der maximierte als auch der minimierte Status für den Nutzer sichtbar.
Weitere Informationen
| Typ | Verknüpfen | Status |
|---|---|---|
| Design | Designquelle (Figma) | Verfügbar |
| Implementierung |
Jetpack Compose (NavigationDrawer)
Jetpack Compose (ModalNavigationDrawer) |
Verfügbar |
Highlights
- Ziele werden nach der Wichtigkeit der Nutzer sortiert, wobei häufig besuchte Ziele zuerst und zugehörige Ziele gruppiert sind.
- Im minimierten Zustand ist sowohl für die Standard- als auch die modale Navigationsleiste eine Navigationsschiene erforderlich.
Varianten
Es gibt zwei Arten von Navigationsleistenstile:
- Standardnavigationsleiste: Wird maximiert, um zusätzlichen Platz für die Navigation zu schaffen, indem der Seiteninhalt beiseite geschoben wird.
- Modal-Navigationsleiste – Erscheint als Overlay über dem Inhalt der App mit einem Gitter, das die Lesbarkeit verbessert, wenn die Leiste maximiert wird.
Standardnavigationsleiste
Anatomie
- Oberer Abschnitt:Das App-Logo ist zu sehen. Die Schaltfläche dient als Schaltfläche zum Wechseln des Profils oder zum Auslösen einer Suchaktion. Im minimierten Zustand bleibt nur das Symbol im oberen Container sichtbar.
- Navigationselement:Jedes Element in der Navigationsleiste besteht aus einer Kombination aus Symbol und Text. Nur das Symbol ist im minimierten Zustand sichtbar.
- Navigationsleiste:Der Navigationsstreifen ist eine Spalte mit drei bis sieben App-Zielen und dient als Hauptmenü. Jedes Ziel hat ein Textlabel und ein optionales Symbol, wobei Menüelemente für einen besseren Kontext gruppiert werden können.
- Unterer Abschnitt:Kann eine bis drei Aktionsschaltflächen enthalten. Sie eignen sich ideal für Seiten wie „Einstellungen“, „Hilfe“ oder „Profil“.
Verhalten
- Erweiterung der Navigationsleiste:Wenn die Standardnavigationsleiste maximiert ist, wird der Seiteninhalt verschoben, um Platz für die erweiterte Version für die Navigation zu schaffen.
- Navigationsupdates:Wenn Sie von einem Navigationselement zum anderen wechseln, wird die Seite automatisch auf das neue Ziel aktualisiert.
Modale Navigationsleiste
Anatomie
- Oberer Abschnitt:Das App-Logo ist zu sehen. Die Schaltfläche dient als Schaltfläche zum Wechseln des Profils oder zum Auslösen einer Suchaktion. Im minimierten Zustand bleibt nur das Symbol im oberen Container sichtbar.
- Navigationselement:Jedes Element in der Navigationsleiste besteht aus einer Kombination aus Symbol und Text. Nur das Symbol ist im minimierten Zustand sichtbar.
- Navigationsbereich:Spalte mit drei bis sieben App-Zielen, die als Hauptmenü dient. Jedes Ziel hat ein Textlabel und ein optionales Symbol, wobei Menüelemente für einen besseren Kontext gruppiert werden können.
- Scrim (Scrim): Für bessere Lesbarkeit des Textes in Navigationselementen.
- Unterer Abschnitt:Kann eine bis drei Aktionsschaltflächen enthalten. Sie eignen sich ideal für Seiten wie „Einstellungen“, „Hilfe“ oder „Profil“.
Verhalten
- Leistenerweiterung:Erscheint als Overlay über dem App-Inhalt mit einem Gitter, das die Lesbarkeit verbessert, wenn die Leiste maximiert wird.
- Navigationsupdates:Sie treten auf, wenn der Nutzer ein Navigationselement auswählt.
Logo: Scrim
Bei der modalen Navigationsleiste sorgt ein Gitter hinter der Leiste dafür, dass der Leisteninhalt gut lesbar ist. Sie können einen Farbverlauf oder eine durchgehende Oberfläche hinter der Navigationsleiste verwenden, um verschiedene Varianten der Benutzeroberfläche zu erstellen.
Farbverlauf
Festes Gitter
Technische Daten
Nutzung
Aktiver Indikator
Die Anzeige „Aktiv“ ist ein visueller Hinweis, dass das angezeigte Ziel der Navigationsleiste hervorgehoben wird. Der Indikator wird normalerweise durch eine Hintergrundform dargestellt, die sich optisch von den anderen Elementen in der Leiste unterscheidet. Anhand des Indikators „Aktiv“ können Nutzer erkennen, wo sie sich in der App befinden und welches Ziel sie aufrufen. Achten Sie darauf, dass die Anzeige „Aktiv“ deutlich sichtbar und leichter von den anderen Elementen auf der Navigationsleiste zu unterscheiden ist.
Trennlinien (optional)
Mithilfe von Trennlinien können Zielgruppen innerhalb der Navigationsleiste voneinander getrennt werden, um den Überblick zu behalten. Es ist jedoch wichtig, sie sparsam zu verwenden, da zu viele Trennlinien visuelles Rauschen erzeugen und die Nutzenden unnötig überlasten.
Badges
Badges sind visuelle Hinweise, die Navigationselementen hinzugefügt werden können, um zusätzliche Informationen bereitzustellen. Beispielsweise könnte ein Logo verwendet werden, um die Anzahl der neuen Filme anzugeben, die in einer Streaming-App verfügbar sind. Verwenden Sie Logos sparsam und nur bei Bedarf, da sie die Benutzeroberfläche unübersichtlich und unübersichtlich wirken lassen können. Achte bei der Verwendung von Badges darauf, dass sie klar und verständlich sind und die Navigation des Nutzers in der App nicht beeinträchtigen.
Badge maximiert
Badge minimiert
Labels
Labels in der Navigationsleiste sollten klar und prägnant sein, damit sie leichter zu lesen sind.
Achtung
Don'ts
Don'ts
Don'ts
Navigationsleisten sind grundlegende Elemente, die die Hierarchie Ihrer App darstellen. Sie sollten verwendet werden, um nur fünf bis sechs primäre Navigationsziele aufzulisten.
Dos
