Cette page a été traduite par l'API Cloud Translation.

Grilles

Un mode Grille affiche au moins deux colonnes d'images représentant des éléments de contenu, avec un court texte sous chaque image. Cette vue est préférable lorsque les utilisateurs font leur sélection en se basant principalement sur des images.

Les grilles peuvent être faites défiler verticalement et peuvent varier en taille, en espacement et en nombre de colonnes. Le contenu de la grille peut également être regroupé en catégories.

Composant "List items"

Les listes constituent un autre moyen d'afficher du contenu nécessitant davantage de texte explicatif.

Anatomie

Les grilles contiennent des commandes de texte et d'interface utilisateur. Les utilisateurs devant y répondre, ils ne doivent jamais être dissimulés, que ce soit par d'autres éléments ou par le bord de l'écran.

Élément de grille

Texte principal et secondaire

Arrière-plan de la grille

Caractéristiques techniques

Libellés de mise en page

Définitions de E, M, KL, P et Flex

Composant "List items"

Spécifications, consignes de style, etc.

Grille de contenu (3 ou 4 colonnes)

Grille d'applications (4 colonnes)

Grille d'applications avec les éléments fréquemment utilisés dans la première ligne

Position de l'icône de l'indicateur en mode Grille

Ajuster les mises en page

Ces mises en page de référence montrent comment adapter les grilles pour les adapter aux écrans de différentes largeurs et hauteurs. (Les catégories de largeur et de hauteur sont définies dans la section Layout (Mise en page).) Notez que toutes les valeurs de pixels sont exprimées en pixels de rendu, avant tout échantillonnage sous-échantillonnage ou sur-échantillonnage.

Mise en page

Marges, lignes de repère et marge intérieure pour différentes tailles d'écran

Libellés de mise en page

Définitions de E, M, KL, P et Flex

Écrans de largeur standard

Grands écrans

Pour les écrans larges, une mise en page en trois colonnes est recommandée. Si vous utilisez une mise en page à 4 colonnes, maintenez une taille de tuile minimale de 219 dp.

Écrans extra larges et super grand angle

Espacement vertical des grilles d'applications sur des écrans de différentes hauteurs

Pour les écrans courts, l'espacement vertical doit être réduit entre les éléments de contenu de la grille, ainsi qu'entre les icônes et les titres d'application.

Styles

Consignes relatives à la typographie

Références de mise à l'échelle et de grille, exemples typographiques, etc.

Consignes relatives aux couleurs

Palettes, valeurs d'élévation et d'opacité, etc.

Typographie

Style de type	Police	Poids	Taille (dp)
Corps 1	Roboto	Standard	32
Corps 2	Roboto	Standard	28
Corps 3	Roboto	Standard	24

Couleur

Élément	Couleur(mode Jour)	Couleur (mode Nuit)
Type principal / Icônes	Blanc	Blanc à 88%
Type secondaire / Icônes	Blanc à 72%	Blanc à 60%
Divider line	Blanc à 22%	Blanc à 12%
Arrière-plan de la grille	Black	Black
Fond de contenu	N/A	Noir à 22%
Troncation du gradient	Noir entre 0 et 100% dans 10% de l'espace de texte	Noir entre 0 et 100% dans 10% de l'espace de texte