Ombrages

L’ombrage est un style utilisé pour créer une hiérarchie visuelle et une apparence d'élévation entre les surfaces. L'effet d'élévation est défini par l'intensité et la profondeur de l'ombre projetée.

Les éléments de l’interface sont des objets placés dans un environnement en 3 dimensions et ils sont superposés au-dessus de l’arrière-plan. 

Certains objets peuvent être proches de l'utilisateur (surélevés), offrant une affordance (capacité d’un objet à suggérer son utilisation) qui incite à l’interaction.

D'autres objets peuvent être éloignés de l'utilisateur (non surélevés), apparaissant comme des objets statiques.

L’échelle d’élévation imaginée dans l'interface utilisateur va de 0 à 4 : 0 étant l’arrière-plan et 4 étant le point le plus élevé. Plus l’élévation est grande, plus l'ombre projetée par chaque couche est étendue.

Élévation 0

Les composantes qui emploient ce niveau ne sont pas surélevées : elles sont directement déposées sur l’arrière-plan. Ils contiennent du texte ou des hyperliens et n’ont pas d’effet au survol. Ils peuvent être présentés sans ou avec une bordure.

Usage : encadré

Exemple

Élévation 0

Élévation 1

Les composantes qui emploient ce niveau d'élévation sont destinées à être cliquables et sont déjà affichées par défaut (contrairement aux éléments avec les élévations 2, 3 et 4 qui sont cachés par défaut et qui exigent une action pour les faire afficher). Pour cela, elles sont légèrement plus surélevées pour communiquer leur affordance interactive.

Usage : tuiles cliquables, boutons principaux

Décalage en X : 0 px
Décalage en Y : 1 px
Flou (blur) : 4 px
Étendue (spread) : 0 px
Couleur: Bleu foncé (#223654), 24% d’opacité

Exemple

Élévation 1

Élévation 2

Les composantes qui emploient ce niveau d'élévation sont cachées par défaut et nécessitent une action pour les faire afficher. Elles peuvent avoir une certaine interaction à l'intérieur, mais ne sont pas entièrement interactives.

Usage : infobulle

Décalage en X : 0 px
Décalage en Y : 2 px
Flou (blur) : 8 px
Étendue (spread) : 0 px
Couleur: Bleu foncé (#223654), 24% d’opacité

Exemple

Élévation 2

Élévation 3

Les composantes qui emploient ce niveau d'élévation ne sont déjà pas affichées au chargement de la page et apparaissent après une action. Elles sont entièrement interactives.

Usage : champ date avec calendrier, sous-menu, notification contextuelle

Décalage en X : 0 px
Décalage en Y : 4 px
Flou (blur) : 16 px
Étendue (spread) : 0 px
Couleur: Bleu foncé (#223654), 24% d’opacité

Exemple

Élévation 3

Élévation 4

Les composantes qui emploient ce niveau d'élévation ne sont pas déjà affichées au chargement de la page et apparaissent après une action. Elles sont hautement interactives et ont un niveau d’importance supérieure, car elles apparaissent par-dessus tous les autres éléments de la page.

Usage : Boîte de dialogue modale

Décalage en X : 0 px
Décalage en Y : 6 px
Flou (blur) : 24 px
Étendue (spread) : 0 px
Couleur: Bleu foncé (#223654), 24% d’opacité

Exemple

Élévation 4

Fonctionnement

Par souci de simplicité, il faut supposer que :

• La composante qui emploie une élévation est située entre l’arrière-plan et la source lumineuse
• La source lumineuse est dirigée vers l’arrière-plan
• La source de lumière est toujours une valeur directe.

Faire ces hypothèses rend le système simple, facile et cohérent, tout en offrant une flexibilité.

Z = Valeur d'élévation
Décalage en X = 0
Décalage en Y = Z [1-4]
Flou de l’ombre = Z * 4
Étendue de l'ombre = 0
Opacité de l'ombre = 24%

• Appliquez des ombrages identiques aux objets similaires.
• N'utilisez pas d'ombrages uniquement pour le style. Leur application doit avoir un sens (superposition ou interaction).
• N'utilisez pas trop d'ombrages, car cela créerait une hiérarchie confuse.