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 plusieurs éléments connexes.
Ils sont généralement utilisés pour afficher un ensemble d'options.
Ressources
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.
check_circle
À faire
Les éléments de liste ne sont pas des boutons. Les éléments n'ont pas de conteneur. Par défaut, les éléments de liste sont désélectionnés et non sélectionnés.
warning
Attention
N'utilisez l'arrière-plan du conteneur pour les éléments de liste qu'en cas de nécessité.
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.
- 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.
check_circle
À faire
Utilisez un indicateur de sélection d'icône pour afficher 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éliorera l'expérience utilisateur globale.
cancel
À éviter
Évitez de vous fier uniquement à la couleur d'arrière-plan pour indiquer la sélection dans une liste.
cancel
À éviter
Évitez de placer des boutons à l'intérieur d'un élément de liste, car cela peut prêter à confusion quant à l'élément 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 si elles ne servent à rien et ne fournissent pas d'informations supplémentaires.
cancel
À éviter
Évitez d'utiliser la même icône pour tous les éléments d'une liste. Cela peut être visuellement écrasant et déroutant pour les utilisateurs. Utilisez plutôt des icônes uniquement lorsqu'elles apportent une valeur ajoutée 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 physique ou morale.
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 2024/08/19 (UTC).
[{
"type": "thumb-down",
"id": "missingTheInformationINeed",
"label":"Il n'y a pas l'information dont j'ai besoin"
},{
"type": "thumb-down",
"id": "tooComplicatedTooManySteps",
"label":"Trop compliqué/Trop d'étapes"
},{
"type": "thumb-down",
"id": "outOfDate",
"label":"Obsolète"
},{
"type": "thumb-down",
"id": "translationIssue",
"label":"Problème de traduction"
},{
"type": "thumb-down",
"id": "samplesCodeIssue",
"label":"Mauvais exemple/Erreur de code"
},{
"type": "thumb-down",
"id": "otherDown",
"label":"Autre"
}]
[{
"type": "thumb-up",
"id": "easyToUnderstand",
"label":"Facile à comprendre"
},{
"type": "thumb-up",
"id": "solvedMyProblem",
"label":"J'ai pu résoudre mon problème"
},{
"type": "thumb-up",
"id": "otherUp",
"label":"Autre"
}]
{"lastModified": "Derni\u00e8re mise \u00e0 jour le 2024/08/19\u00a0(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 2024/08/19 (UTC)."]]