Ombres

Présentation

Les ombres donnent une profondeur visuelle aux objets et permettent aux utilisateurs d'identifier les éléments importants sur la surface des pages. Les ombres sont importantes pour communiquer la profondeur, le sens du mouvement et les bords des surfaces. Elles aident les utilisateurs à comprendre la hiérarchie et rendent votre interface plus intuitive.

Structure

1. Conteneur d'ombre

2. Ombre intérieure

3. Ombre extérieure

Il existe des ombres derrière diverses formes de page, et qui ont une couleur de remplissage (y compris le blanc). Elles peuvent être définies comme des ombres extérieures ou intérieures.

Les ombres comprennent les éléments suivants :

Ombre (contenu)

1. Conteneur d'ombre : un conteneur dans l'application.
2. Ombre intérieure : les ombres intérieures sont affichées à l'intérieur d'un conteneur.
3. Ombre extérieure : les ombres extérieures sont affichées sur les conteneurs.

Meilleures pratiques

• Utilisez les ombres extérieures pour signaler des éléments de page interactifs, par exemple des boutons.
• Utilisez les ombres extérieures pour mettre en évidence des éléments de contenu importants qui doivent être portés à l'attention de l'utilisateur, par exemple des fiches d'objet.
• Utilisez les ombres intérieures pour signaler des conteneurs destinés à la saisie utilisateur, par exemple un champ de texte.
• Utilisez les ombres de façon cohérente et veillez à ce que les valeurs des ombres soient également cohérentes.
• Lorsque les éléments sont empilés les uns sur les autres, utilisez la même profondeur d'ombre.
• Si un élément est situé sur la troisième couche sans aucun élément en-dessous, l'ombre devra être deux fois plus profonde et répartie.
• Les ombres doivent contribuer à l'expérience utilisateur de manière ciblée, par exemple en attirant l'attention des utilisateurs sur des éléments importants de la page, par exemple un ensemble d'options de détermination du prix pour l'abonnement à un produit.
• Lorsque vous utilisez une combinaison d'ombres extérieures et intérieures, veillez à ce que les pages ne soient pas trop chargées ou confuses.