Si votre application contient plusieurs destinations que les utilisateurs peuvent parcourir, nous vous recommandons d'utiliser des combinaisons de mise en page et de navigation couramment utilisées par d'autres applications. Comme de nombreux utilisateurs possèdent déjà les modèles mentaux pour ces associations, votre application sera plus intuitive pour eux.
Associations de mise en page et de navigation
La barre de navigation et le panneau de navigation modal sont utilisés comme principaux modèles de navigation pour les vues de mise en page parent et les principales destinations de navigation.
La barre de navigation peut contenir trois à cinq destinations de navigation au même niveau de hiérarchie. Ce composant correspond à la barre de navigation pour les grands écrans.
Bien que le panneau de navigation puisse contenir plus de cinq destinations de navigation, le modèle n'est pas aussi idéal que la barre de navigation. En effet, les utilisateurs doivent atteindre la barre supérieure sur les tailles compactes.
Les onglets Material 3 et la barre d'application inférieure sont des modèles de navigation secondaires que vous pouvez utiliser pour compléter la navigation principale ou qui peuvent apparaître sur les vues enfants.
Ici, les onglets servent de couche de navigation secondaire pour regrouper les contenus frères.
Actions de mise en page
Fournissez des commandes pour permettre aux utilisateurs d'effectuer des actions. Les modèles courants incluent les actions de la barre supérieure, le bouton d'action flottant (FAB) et les menus.
Pour les actions les plus importantes, un FAB fournit un bouton grand et bien visible pour l'utilisateur. À ce niveau, ne fournissez qu'une seule action à la fois. Un FAB peut apparaître dans plusieurs tailles et dans une forme développée, qui inclut un libellé. Utilisez Scaffold pour épingler un FAB et vous assurer qu'il est toujours visible, même lors du défilement.
Bouton d'action flottant permettant aux utilisateurs d'ajouter des plantes à la galerie de plantes
Vous pouvez placer des actions secondaires dans la barre supérieure ou, si elles sont regroupées à proximité du contenu associé, dans la page.
Pour toute action supplémentaire qui n'est pas nécessaire rapidement ni fréquemment, ajoutez-la dans un menu à développer.
Navigation adaptative
Utilisez la mise en page adaptée à la classe de taille de fenêtre. Évitez d'utiliser la même barre de navigation inférieure pour toutes les tailles.
À faire
À éviter
Les tailles moyennes peuvent utiliser le rail de navigation ou les éléments de navigation horizontaux.
Bien que compact, un rail de navigation peut être plus ergonomique sur un écran de couverture.
Les couvertures plus grandes peuvent tirer parti de l'une ou l'autre orientation de navigation. Réfléchissez à la façon dont l'utilisateur pourrait interagir avec le contenu.