Le modèle "Grille" présente les éléments dans une mise en page en grille. Il est utile lorsque les utilisateurs s'appuient principalement sur des images pour faire leur choix.
Ce modèle peut être intégré au modèle d'onglet pour fournir une navigation par onglets ou inclus dans le modèle Carte + contenu pour fournir une grille sur une carte.
Le modèle de grille comprend les éléments suivants :
- En-tête facultatif (l'en-tête est remplacé par des onglets lorsque ce modèle est intégré dans le modèle d'onglet)
- Éléments de grille (voir la remarque ci-dessous), chacun contenant une icône ou une image grand format
- Texte principal pour chaque élément de la grille (facultatif)
- Texte secondaire pour chaque élément de la grille (facultatif)
- Une image ou une icône (facultatif)
- Un badge
- Boutons d'action flottants (facultatif)
Pour plus de flexibilité et pour profiter des dernières fonctionnalités, utilisez le modèle "Élément sectionné" au lieu du modèle "Grille". Avec le modèle "Élément sectionné", vous pouvez combiner des listes et des grilles pour créer une structure de navigation personnalisée.
Exigences UX pour le modèle de grille
| DOIT | Limitez la longueur des chaînes de texte principal et secondaire pour éviter qu'elles ne soient tronquées. |
| DOIT | Associez une action à chaque élément de la grille (les éléments d'information uniquement ne sont pas recommandés). |
| DOIT | Indiquez clairement l'état des éléments (pour les éléments de grille qui ont plusieurs états, comme "sélectionné" et "non sélectionné") en variant l'image, l'icône ou le texte. |
| DOIT | Incluez un en-tête avec un titre facultatif, ainsi que des actions principales et secondaires. |
| NE DOIT PAS | Incluez à la fois une barre d'actions et un bouton d'action flottant. |
| MAI | Affichez un indicateur de chargement au lieu de l'icône ou de l'image d'un élément de grille lorsqu'une action associée à l'élément est en cours. |
Ressources
| Saisie | Lien |
| Documentation de référence de l'API |
GridTemplate, GridTemplate.Builder
|