Les listes sont une représentation visuelle d'un ou plusieurs éléments connexes. Ils sont généralement utilisés pour afficher un ensemble d'options.
Ressources
Type | Lien | État |
---|---|---|
Conception | Source de la conception (Figma) | Disponible |
Implémentation | Jetpack Compose | Disponible |
Sélection
- Les listes sont une collection continue de texte ou d'images.
- Les listes doivent paraître naturelles et être lisibles.
- Les listes sont constituées d'éléments contenant des données représentées par des icônes et du texte.
Variantes
Il existe trois types de listes: les listes sur une ligne, les listes sur deux lignes et sur trois lignes.
- Liste sur une ligne: une seule ligne pour communiquer chaque élément. C'est simple, la conception garantit que chaque élément est clairement distinct de l'autre.
- Liste sur deux lignes: utilise deux lignes parallèles pour communiquer chaque élément. Cette conception structurée assure une lisibilité cognitive de surcharge.
- Liste sur trois lignes: utilise trois lignes parallèles pour représenter chaque élément. Cette conception décorative crée un haut niveau de proéminence visuelle.
Anatomie
- Icône: petit graphique représentant un objet ou une action spécifique, souvent utilisé pour communiquer visuellement une idée ou un concept.
- Ligne supérieure: courte ligne de texte affichée au-dessus du titre ou du sous-titre. souvent utilisée pour fournir du contexte ou une emphase supplémentaire.
- Titre: une grande ligne de texte en gras qui sert de titre principal un élément de conception ou une page.
- Sous-titre: ligne de texte plus petite qui fournit des informations supplémentaires ou le contexte sous un titre principal.
- Commande: élément interactif qui permet à l'utilisateur de saisir une décision.
États
Caractéristiques techniques
Utilisation
Les listes sont des groupes de texte et d'images organisés verticalement. Optimisée pour la compréhension écrite, une liste se compose d'un seul une colonne continue d'éléments. Les éléments de liste peuvent contenir des actions principales et supplémentaires représentées par des icônes et du texte.
![](https://developer.android.com/static/design/ui/tv/guides/components/images/lists/container-do.webp?authuser=8&hl=fr)
À faire
![](https://developer.android.com/static/design/ui/tv/guides/components/images/lists/container-dont.webp?authuser=8&hl=fr)
Attention
Commandes de sélection
Les commandes affichent des informations et des actions pour les éléments de la liste. Ils peuvent être alignés jusqu'au bord au début ou à la fin de l'élément de liste.
![Case à cocher de sélection](https://developer.android.com/static/design/ui/tv/guides/components/images/lists/selection-checkbox.webp?authuser=8&hl=fr)
![Radio de sélection](https://developer.android.com/static/design/ui/tv/guides/components/images/lists/selection-radio.webp?authuser=8&hl=fr)
![Bouton de sélection](https://developer.android.com/static/design/ui/tv/guides/components/images/lists/selection-switch.webp?authuser=8&hl=fr)
- Cases à cocher: sélectionnez un ou plusieurs éléments dans la liste.
- Cases d'option: sélectionnez une seule option. dans la liste.
- Boutons bascules: activez ou désactivez une commande.
![](https://developer.android.com/static/design/ui/tv/guides/components/images/lists/selection-do.webp?authuser=8&hl=fr)
À faire
![](https://developer.android.com/static/design/ui/tv/guides/components/images/lists/selection-dont.webp?authuser=8&hl=fr)
À éviter
![](https://developer.android.com/static/design/ui/tv/guides/components/images/lists/action-dont.webp?authuser=8&hl=fr)
À éviter
Icônes
![](https://developer.android.com/static/design/ui/tv/guides/components/images/lists/icon-do.webp?authuser=8&hl=fr)
À faire
![](https://developer.android.com/static/design/ui/tv/guides/components/images/lists/icon-dont.webp?authuser=8&hl=fr)
À éviter
Avatars et images
Les éléments de liste peuvent inclure des images dans un recadrage circulaire pour représenter une personne physique ou morale.