Les panneaux de navigation sont des composants essentiels de toute application TV, car ils permettent aux utilisateurs d'accéder à différentes destinations et fonctionnalités. Un panneau de navigation est la colonne vertébrale de l'architecture des informations de l'application. Il offre un moyen clair et intuitif de naviguer dans l'application.
Contrairement au panneau de navigation sur mobile, le panneau de navigation du téléviseur présente à la fois un état développé et un état réduit visibles par l'utilisateur.
Ressources
| Type | Lien | État |
|---|---|---|
| conception | Source de la conception (Figma) | Disponible |
| Implémentation |
Jetpack Compose (NavigationDrawer)
Jetpack Compose (ModalNavigationDrawer) |
Disponible |
Sélection
- Les destinations sont classées en fonction de l'importance pour l'utilisateur, les destinations fréquentes en premier et les destinations associées regroupées.
- Un rail de navigation est requis pour les panneaux de navigation standards et modals lorsqu'ils sont réduits.
Variantes
Il existe deux types de styles de panneau de navigation:
- Panneau de navigation standard : se développe pour créer un espace supplémentaire pour la navigation, en écartant le contenu de la page.
- Panneau de navigation modal : se présente sous la forme d'une superposition au-dessus du contenu de l'application avec un fond qui améliore la lisibilité lorsque le panneau est développé.
Panneau de navigation standard
Anatomie
- Section supérieure:comporte le logo de l'application. Sert de bouton pour changer de profil ou déclencher une action de recherche. À l'état réduit, seule l'icône reste visible dans le conteneur supérieur.
- Élément de navigation:chaque élément du rail de navigation combine une icône et du texte. Seule l'icône est visible à l'état réduit.
- Rail de navigation:le rail de navigation est une colonne qui affiche trois à sept destinations d'application et constitue le menu principal. Chaque destination comporte un libellé de texte et une icône facultative, avec la possibilité de regrouper les éléments du menu pour une meilleure contextualisation.
- Section inférieure:peut comporter un à trois boutons d'action, parfaits pour des pages telles que les paramètres, l'aide ou le profil.
Comportement
- Développement du panneau de navigation:une fois développés, les panneaux de navigation standards transfèrent le contenu de la page afin de laisser de la place à la version étendue pour la navigation.
- Mises à jour de navigation:lorsque vous passez d'un élément de navigation à un autre, la page est automatiquement mise à jour vers la nouvelle destination.
Panneau de navigation modal
Anatomie
- Section supérieure:comporte le logo de l'application. Permet de changer de profil ou de déclencher une action de recherche. À l'état réduit, seule l'icône reste visible dans le conteneur supérieur.
- Élément de navigation:chaque élément du rail de navigation combine une icône et du texte. Seule l'icône est visible à l'état réduit.
- Rail de navigation:colonne affichant trois à sept destinations d'application, servant de menu principal. Chaque destination comporte un libellé de texte et une icône facultative, avec la possibilité de regrouper les éléments du menu pour une meilleure contextualisation.
- Fond:pour une meilleure lisibilité du texte de l'élément de navigation.
- Section inférieure:peut comporter un à trois boutons d'action, parfaits pour des pages telles que les paramètres, l'aide ou le profil.
Comportement
- Expansion du panneau:se présente sous la forme d'une superposition sur le contenu de l'application, avec un fond qui améliore la lisibilité lorsque le panneau est développé.
- Mises à jour de la navigation:se produisent lorsque l'utilisateur sélectionne un élément de navigation.
Fond
Pour le panneau de navigation modal, une bordure en arrière-plan garantit la lisibilité de son contenu. Vous pouvez utiliser un dégradé ou une surface pleine derrière le panneau de navigation pour créer différentes variantes de l'interface utilisateur.
Fond dégradé
Fond uni
Caractéristiques techniques
Utilisation
Indicateur actif
L'indicateur actif est un repère visuel qui met en évidence la destination du panneau de navigation affichée. L'indicateur est généralement représenté par une forme d'arrière-plan qui se distingue visuellement des autres éléments du panneau. L'indicateur actif aide les utilisateurs à comprendre où ils se trouvent dans l'application et la destination qu'ils consultent. Assurez-vous que l'indicateur actif est clairement visible et qu'il est plus facile de le distinguer des autres éléments dans le panneau de navigation.
Séparateurs (facultatif)
Vous pouvez utiliser des séparateurs pour séparer des groupes de destinations dans le panneau de navigation pour une meilleure organisation. Cependant, il est important de les utiliser avec parcimonie, car trop de séparateurs peuvent créer du bruit visuel et ajouter une surcharge cognitive inutile pour les utilisateurs.
Badges
Les badges sont des repères visuels qui peuvent être ajoutés aux éléments de navigation pour fournir des informations supplémentaires. Par exemple, un badge peut être utilisé pour indiquer le nombre de nouveaux films disponibles dans une application de streaming. Utilisez les badges avec parcimonie et uniquement lorsque cela est nécessaire, car ils peuvent rendre l'interface utilisateur surchargée. Lorsque vous utilisez des badges, assurez-vous qu'ils sont clairs et plus faciles à comprendre, et qu'ils n'interfèrent pas avec la capacité de l'utilisateur à naviguer dans l'application.
Badge développé
Badge réduit
Libellés
Les étiquettes du panneau de navigation doivent être claires et concises afin d'être plus faciles à lire.
Attention
À éviter
À éviter
À éviter
Les panneaux de navigation sont des éléments fondamentaux qui représentent la hiérarchie de votre application. Ils ne doivent être utilisés que pour ne répertorier que cinq à six destinations de navigation principales.
À faire
