Les grilles présentent les éléments sous la forme d'une grille.
Ce modèle est utile lorsque les utilisateurs s'appuient principalement sur des images pour faire leurs sélections.
Ce modèle peut être intégré dans le modèle d'onglet pour permettre une navigation par onglets.
Articles inclus:
- En-tête avec une bande d'actions facultative (la bande d'actions est remplacée 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 de grande taille
- Texte principal de chaque élément de la grille (obligatoire)
- Texte secondaire pour chaque élément de la grille (facultatif)
- Bouton d'action flottant facultatif
Exemples de modèle de grille
Les exemples Android Auto et Android Automotive OS (AAOS) suivants ont été créés à l'aide du modèle Grid.
Grille dans laquelle certains éléments comportent du texte secondaire (exemple Android Auto)
Grille avec l'icône d'un élément temporairement remplacée par une icône de chargement et le texte principal d'un autre élément tronqué car sa longueur dépasse l'espace disponible (exemple AAOS)
Exigences de l'expérience utilisateur des modèles de grille
Développeurs d'applications:
| FORTEMENT RECOMMANDÉ | Limitez la longueur des chaînes de texte principale et secondaire pour éviter qu'elles ne soient tronquées. |
| FORTEMENT RECOMMANDÉ | ont une action associée à chaque élément de la grille (les éléments ne comportant que des informations ne sont pas recommandés). |
| FORTEMENT RECOMMANDÉ | Indiquez clairement l'état de l'élément (pour les éléments de la grille qui ont plusieurs états, tels que les éléments sélectionnés et non sélectionnés) par des variantes d'image, d'icône ou de texte. |
| NE DOIT PAS | Incluez une bande d'actions et un bouton d'action flottant en même temps. |
| MAI | Affichez une icône de chargement à la place de l'icône ou de l'image d'un élément de la grille lorsqu'une action associée à l'élément est en cours. |