Listes

Les listes sont une représentation visuelle d'un ou de plusieurs éléments associés. 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	Bientôt disponible

Sélection

• Les listes sont une collection continue de textes ou d'images.
• Les listes doivent être naturelles et lisibles.
• Les listes sont constitué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 ligne: une seule ligne pour communiquer chaque élément. Cette conception simple garantit que chaque élément se distingue clairement de l'autre.
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 sur trois lignes: représente chaque élément à l'aide de trois lignes parallèles. Ce design décoratif 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 qui apparaît au-dessus du titre ou du sous-titre, souvent utilisée pour fournir plus de contexte ou d'accentuation.
3. Titre: une grande ligne de texte en gras qui sert de titre principal d'un élément de conception ou d'une page.
4. Sous-titre: il s'agit d'une ligne de texte plus petite qui fournit des informations supplémentaires ou du 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 textes et d'images organisés verticalement. Optimisée pour la compréhension en 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 n'ont pas de conteneur. Par défaut, les éléments de liste sont désélectionnés et ne sont pas sélectionnés.

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 les informations et les actions associées aux éléments de la 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 un seul élément dans la liste.
3. Commutateurs: 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éliorer 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 actif.

Icônes

check_circle

À faire

Si vous affichez le même type de contenu dans la liste, omettez les icônes afin de réduire le bruit visuel et d'améliorer l'expérience utilisateur. Évitez d'utiliser des icônes dans une liste lorsqu'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 accablant 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 recadrées de façon circulaire pour représenter une personne ou une entité.