Mises en page et modèles de navigation

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 courantes dans 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 hiérarchique. 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. Cela est dû à la nécessité d'accéder à 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 dans 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, en vous assurant qu'il est toujours visible, même lors du défilement.

Bouton d'action flottant (FAB) qui permet à l'utilisateur d'ajouter rapidement 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é, sur la page.

Figure 20 : Action d'alerte dans la barre supérieure sur l'affichage des détails (à gauche) et icône de menu à trois points intégrée à l'élément de liste (à droite)

Pour toutes les actions supplémentaires qui ne sont pas nécessaires rapidement ni fréquemment, ajoutez-les dans un menu de dépassement.