Listes

Les listes sont des conteneurs d'éléments avec défilement et focus intégrés.

Principes

Organisation claire : les listes doivent présenter les informations de manière claire et verticale.

Présentation cohérente des éléments : les éléments de liste doivent suivre une structure visuelle cohérente.

Focus et navigation : dans les interfaces reposant sur la navigation directionnelle, les listes doivent indiquer clairement l'élément sélectionné.

Interactivité : les éléments de liste représentent souvent des éléments sélectionnables ou sur lesquels il est possible d'effectuer une action.

Utilisation et emplacement

Les listes peuvent contenir différents contenus frères avec des éléments répétables. Contrairement aux piles, les listes remplissent le conteneur de la vue Application.

Utiliser des voiles pour indiquer le contenu en dépassement : lorsqu'une liste contient plus d'éléments que ne peut en contenir une vue, un voile noir est utilisé près des limites de la liste.

Les listes peuvent utiliser un titre si nécessaire : un titre statique ou fixe peut être utilisé dans une liste pour plus de clarté.

cancel

À éviter

Ne pas avoir plus d'une liste par vue, car cela est visuellement et en termes de focus trop important.

Utiliser la profondeur pour indiquer la mise au point

Les éléments de liste se déplacent entre 0 et +4 de profondeur pour les états non sélectionnés et sélectionnés.

Les éléments de liste peuvent être utilisables

Les éléments d'une liste peuvent agir comme des actions. Conserver l'action dans l'élément de liste

Mettre en surbrillance le contrôle qui sera activé lorsque vous appuyez dessus, même si vous pouvez faire défiler autre chose. Si une liste ou une fiche peut être déplacée derrière un autre élément, ne sélectionnez que l'élément qui répond à l'appui.

check_circle

À faire

Ne mettre en surbrillance que l'élément actuellement sélectionné. Cela permet aux utilisateurs de découvrir les commandes sélectionnables.

cancel

À éviter

Ne pas mettre en surbrillance plusieurs éléments d'interface utilisateur sélectionnables, car cela prête à confusion quant à ce qui est lié à l'entrée par appui.

Anatomie

La liste est composée d'un conteneur à défilement et d'éléments de liste espacés de manière cohérente. Les listes doivent défiler verticalement, avec un dépassement minimal, lorsque le nombre d'éléments dépasse la fenêtre d'affichage.

A. Conteneur : zone à défilement

B. Élément de liste

C. Barres système

Élément de liste : chaque élément individuel de la liste.

A. Forme

B. Bordure

C. Icône précédant le texte

D. Texte

E. Indicateur de fin

Personnalisation

La majorité de la personnalisation s'effectue avec les éléments de liste.