Listes

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.

1. 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.
2. Liste sur deux lignes: utilise deux lignes parallèles pour communiquer chaque élément. Cette conception structurée assure une lisibilité cognitive de surcharge.
3. 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

1. Icône: petit graphique représentant un objet ou une action spécifique, souvent utilisé pour communiquer visuellement une idée ou un concept.
2. 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.
3. Titre: une grande ligne de texte en gras qui sert de titre principal un élément de conception ou une page.
4. Sous-titre: ligne de texte plus petite qui fournit des informations supplémentaires ou le contexte sous un titre principal.
5. 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.

1. Cases à cocher: sélectionnez un ou plusieurs éléments dans la liste.
2. Cases d'option: sélectionnez une seule option. dans la liste.
3. 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.