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

Grilles

L'affichage en grille présente deux colonnes d'images ou plus représentant les éléments de contenu, accompagnées d'un court texte sous chaque image. Cet affichage est idéal lorsque les utilisateurs se basent principalement sur les images pour faire leur choix.

Les grilles sont défilables 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 d'éléments de liste

Les listes offrent une autre façon d'afficher un contenu qui nécessite davantage de texte explicatif.

Anatomie

Les grilles contiennent du texte et des éléments d'interface utilisateur. Comme les utilisateurs doivent interagir avec elles, ces éléments ne doivent jamais être masqués, ni par d'autres éléments ni par le bord de l'écran.

1. Élément de la grille
2. Textes primaires et secondaires
3. Fond de grille

Spécifications

composant d'éléments de liste

Spécifications, directives de style et plus encore.

Grille de contenu (3 ou 4 colonnes)

Grille d'application (4 colonnes)

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

Placement des icônes d'indicateur dans la grille

Mise à l'échelle des mises en page

Ces schémas de référence montrent comment adapter les grilles aux écrans de différentes largeurs et hauteurs. Notez que toutes les valeurs de pixels sont exprimées en pixels rendus, avant tout sous-échantillonnage ou suréchantillonnage.

Écrans de largeur standard

Écrans larges

Écrans extra-larges et super-larges

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

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

Styles

Typographie

Style de caractères	Police de caractères	Poids	Taille (dp)
Corps 1	Roboto	Régulier	32
Corps 2	Roboto	Régulier	28
Corps 3	Roboto	Régulier	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 %
Ligne de séparation	Blanc à 22%	Blanc à 12%
Fond de grille	Noir	Noir
Scrim de contenu	N / A	Noir à 22%
troncature du gradient	Noir à 0-100 % dans 10 % de l'espace texte	Noir à 0-100 % dans 10 % de l'espace texte

Tailles

Élément	Taille (dp)
Icône de l'application	76
Cellule d'application minimale	135
Cellule de contenu minimum	158

Élévation

Élément	Couleur	Axe Y	Se brouiller
Tuile de grille	Noir à 22%	2	2