Listes
Restez organisé à l'aide des collections
Enregistrez et classez les contenus selon vos préférences.
Les listes sont une représentation visuelle d'un ou de plusieurs éléments associés.
Elles sont généralement utilisées pour afficher une collection d'options.
Ressources
Sélection
- Les listes sont une collection continue de texte ou d'images.
- Les listes doivent sembler naturelles et être lisibles.
- Les listes sont composées d'éléments contenant des actions principales et supplémentaires représentées par des icônes et du texte.
Variantes
Il existe trois types de listes: une liste sur une ligne, une liste sur deux lignes et une liste sur trois lignes.
- Liste sur une seule ligne: une seule ligne pour communiquer chaque élément. Cette conception simple garantit que chaque élément est clairement distinct des autres.
- Liste sur deux lignes: utilise deux lignes parallèles pour communiquer chaque élément.
Cette conception structurée garantit une lisibilité naturelle et évite la surcharge cognitive.
- Liste à trois lignes: utilise trois lignes parallèles pour représenter chaque élément.
Cette conception décorative crée un niveau élevé de proéminence visuelle.
Anatomie
- Icône: petit élément 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 qui apparaît au-dessus du titre ou du sous-titre, souvent utilisée pour fournir du contexte ou une accentuation supplémentaires.
- Titre: ligne de texte en gras et de grande taille qui sert de titre principal d'un élément de conception ou d'une page.
- Sous-titre: ligne de texte plus petite qui fournit des informations ou du contexte supplémentaires sous un titre principal.
- Commande: élément interactif permettant à l'utilisateur de prendre 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 de lecture, une liste se compose d'une seule 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.
check_circle
À faire
Les éléments de liste ne sont pas des boutons. Les éléments ne comportent pas de conteneurs. Par défaut, les éléments de liste ne sont pas sélectionnés ni mis en surbrillance.
warning
Attention
N'utilisez l'arrière-plan du conteneur pour les éléments de liste que si nécessaire.
Commandes de sélection
Les commandes affichent des informations et des actions pour les éléments de liste. Ils peuvent être alignés sur le bord avant ou arrière de l'élément de liste.
- Cases à cocher: sélectionnez un ou plusieurs éléments de liste.
- Cases d'option: sélectionnez exactement un seul élément dans la liste.
- Boutons: activez ou désactivez une commande.
check_circle
À faire
Utilisez un indicateur de sélection d'icône pour indiquer clairement l'élément sélectionné dans une liste. Cela aidera les utilisateurs à identifier facilement l'élément qu'ils ont sélectionné et à améliorer l'expérience utilisateur globale.
cancel
À éviter
Évitez de vous appuyer uniquement sur la couleur d'arrière-plan pour indiquer une sélection dans une liste.
cancel
À éviter
Évitez de placer des boutons dans un élément de liste, car cela peut prêter à confusion quant à l'élément actuellement sélectionné.
Icônes
check_circle
À faire
Si vous affichez le même type de contenu dans la liste, omettez les icônes pour réduire le bruit visuel et améliorer l'expérience utilisateur. Évitez d'utiliser des icônes dans une liste lorsqu'elles n'ont aucune utilité et ne fournissent aucune information supplémentaire.
cancel
À éviter
Évitez d'utiliser la même icône pour tous les éléments d'une liste. Cela peut être visuellement accablant et déroutant pour les utilisateurs. Utilisez plutôt des icônes uniquement lorsqu'elles ajoutent de la valeur ou fournissent des informations supplémentaires.
Avatars et images
Les éléments de liste peuvent inclure des images dans un recadrage circulaire pour représenter une personne ou une entité.
Le contenu et les exemples de code de cette page sont soumis aux licences décrites dans la Licence de contenu. Java et OpenJDK sont des marques ou des marques déposées d'Oracle et/ou de ses sociétés affiliées.
Dernière mise à jour le 2025/07/27 (UTC).
[[["Facile à comprendre","easyToUnderstand","thumb-up"],["J'ai pu résoudre mon problème","solvedMyProblem","thumb-up"],["Autre","otherUp","thumb-up"]],[["Il n'y a pas l'information dont j'ai besoin","missingTheInformationINeed","thumb-down"],["Trop compliqué/Trop d'étapes","tooComplicatedTooManySteps","thumb-down"],["Obsolète","outOfDate","thumb-down"],["Problème de traduction","translationIssue","thumb-down"],["Mauvais exemple/Erreur de code","samplesCodeIssue","thumb-down"],["Autre","otherDown","thumb-down"]],["Dernière mise à jour le 2025/07/27 (UTC)."],[],[],null,["# Lists are a visual representation of one or more related items.\nThey are commonly used to display a collection of options.\n\nResources\n---------\n\n| Type | Link | Status |\n|----------------|----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|-----------|\n| Design | [Design source (Figma)](https://goo.gle/tv-desing-kit) | Available |\n| Implementation | [Jetpack Compose](/reference/kotlin/androidx/tv/material3/package-summary#ListItem(kotlin.Boolean,kotlin.Function0,kotlin.Function0,androidx.compose.ui.Modifier,kotlin.Boolean,kotlin.Function0,kotlin.Function0,kotlin.Function0,kotlin.Function1,kotlin.Function0,androidx.compose.ui.unit.Dp,androidx.tv.material3.ListItemShape,androidx.tv.material3.ListItemColors,androidx.tv.material3.ListItemScale,androidx.tv.material3.ListItemBorder,androidx.tv.material3.ListItemGlow,androidx.compose.foundation.interaction.MutableInteractionSource)) | Available |\n\nHighlights\n----------\n\n- Lists are a continuous collection of text or images.\n- Lists should feel natural and be scannable.\n- Lists are made up of items containing primary and supplemental actions represented by icons and text.\n\nVariants\n--------\n\nThere are three types of lists: one-line list, two-line list, and\nthree-line list.\n\n1. **One-line list**: A single line to communicate each item. This simple design ensures each item is clearly distinct from the other.\n2. **Two-line list**: Uses two parallel lines to communicate each item. This structured design ensures natural readability and avoids cognitive overload.\n3. **Three-line list**: Uses three parallel lines to represent each item. This decorative design creates a high level of visual prominence.\n\nAnatomy\n-------\n\n1. **Icon**: A small graphic that represents a specific object or action, often used to visually communicate an idea or concept.\n2. **Overline**: A short line of text that appears above title or subtitle, often used to provide additional context or emphasis.\n3. **Title**: A large, bold line of text that serves as the main heading of a design element or page.\n4. **Subtitle**: A smaller line of text that provides additional information or context below a main title.\n5. **Control**: An interactive element that allows the user to input a decision.\n\nStates\n------\n\nSpec\n----\n\nUsage\n-----\n\nLists are vertically organized groups of text and images.\nOptimized for reading comprehension, a list consists of a single\ncontinuous column of items.\nList items can contain primary and supplemental actions represented\nby icons and text. \ncheck_circle\n\n### Do\n\nList items are not buttons. The items don't have containers. List items are, by default, unselected and unfocused. \nwarning\n\n### Caution\n\nUse container background for list items only when necessary.\n\n### Selection controls\n\nControls display information and actions for list items. They can be aligned\nto the leading or trailing edge of the list item.\n\n\n\u003cbr /\u003e\n\n1. **Checkboxes**: Select one or more list items.\n2. **Radio buttons**: Select exactly one item in the list.\n3. **Switches**: Toggle a control on or off.\n\ncheck_circle\n\n### Do\n\nUse an icon selection indicator to clearly show the selected item in a list. This will help users easily identify which item they have selected and improve the overall user experience. \ncancel\n\n### Don't\n\nAvoid relying solely on the background color to indicate selection in a list. \ncancel\n\n### Don't\n\nAvoid placing buttons inside a list item as it can cause confusion about which element is currently in focus.\n\n### Icons\n\ncheck_circle\n\n### Do\n\nIf you're showing the same type of content in the list, omit icons to reduce visual noise and improve the user experience. Avoid using icons in a list when they serve no purpose and don't provide additional information. \ncancel\n\n### Don't\n\nAvoid using the same icon for all items in a list. This can be visually overwhelming and confusing for users. Instead, use icons only when they add value or provide additional information.\n\n### Avatars and images\n\nList items can include images in a circular crop to represent a\nperson or entity."]]
