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.

1. 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.
2. 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.
3. 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

1. 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.
2. 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.
3. 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.
4. Sous-titre: ligne de texte plus petite qui fournit des informations ou du contexte supplémentaires sous un titre principal.
5. 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.

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