Les grilles présentent les éléments sous forme de grille.
Ce modèle est utile lorsque les utilisateurs s'appuient principalement sur des images pour effectuer leurs sélections.
Ce modèle peut être intégré au modèle d'onglet pour permettre une navigation par onglets.
Ce modèle peut être inclus dans le modèle Carte + Contenu pour fournir une grille sur une carte.
Inclut:
- En-tête facultatif (l'en-tête est remplacé par des tabulations 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 (facultatif)
- Texte secondaire pour chaque élément de la grille (facultatif)
- Bouton d'action flottant facultatif
![Maquettes fonctionnelles du modèle de grille](https://developers.google.cn/static/cars/design/create-apps/apps-for-drivers/templates/images/grid-template.png?authuser=6&hl=fr)
Exemples de modèles de grille
Les exemples Android Auto et Android Automotive OS (AAOS) suivants ont été créés à l'aide du modèle de grille.
![Exemple montrant une grille des actions possibles sur une carte](https://developers.google.cn/static/cars/design/create-apps/apps-for-drivers/templates/images/map_with_grid.png?authuser=6&hl=fr)
![Exemple d'affichage des paramètres](https://developers.google.cn/static/cars/design/create-apps/apps-for-drivers/templates/images/grid_example_2.png?authuser=6&hl=fr)
Exigences de l'expérience utilisateur des modèles de grille
Développeurs d'applications:
DOIT | Limitez la longueur des chaînes de texte principales et secondaires pour éviter qu'elles ne soient tronquées. |
DOIT | Associer une action à chaque élément de la grille (les éléments ne comportant que des informations ne sont pas recommandés). |
DOIT | Indiquez clairement l'état de l'élément (pour les éléments de grille ayant plusieurs états, tels que ceux sélectionnés et non sélectionnés) en fonction des variantes d'image, d'icône ou de texte. |
DOIT | Incluez un en-tête avec un titre facultatif et des actions principales et secondaires. |
NE DOIT PAS | Incluez en même temps une bande d'actions et un bouton d'action flottant. |
PEUT | 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. |