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 ombrages sont utilisés pour représenter l’interactivité de certains composants. Leur niveau d’élévation dépend donc du degré d’interactivité de ces éléments.

Il ne faut pas utiliser les ombrages pour des raisons purement esthétiques, ils doivent contribuer à la hiérarchie de l’information et faciliter l’utilisation des interfaces.

• 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.
• Lors de l'utilisation du thème sombre, assurez-vous que les couleurs d'arrière-plan et d'ombrage des éléments en élévation suivent les principes de la page Thème sombre.

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 composants qui emploient ce niveau ne sont pas surélevés : ils sont directement déposés 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é

background-color: #FFFFFF;
border: 1px solid #C5CAD2;

Exemple

Élévation 0

Élévation 1

Les composants qui emploient ce niveau d'élévation sont destinés à être cliquables et sont déjà affichés 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, ils sont légèrement plus surélevés pour communiquer leur affordance interactive.

Usage : tuiles cliquables, boutons principaux

background-color: #FFFFFF;
box-shadow: 0px 1px 4px 0px rgba(34, 54, 84, 0.24);

Exemple

Élévation 1

Élévation 2

Au chargement de la page, les composants qui emploient ce niveau d’élévation sont cachés par défaut. Une action de l’utilisateur est requise pour les faire afficher. Ils peuvent avoir une certaine interaction à l'intérieur, mais ne sont pas entièrement interactifs.

Usage : infobulle

background-color: #FFFFFF;
box-shadow: 0px 2px 8px 0px rgba(34, 54, 84, 0.24);

Exemple

Élévation 2

Élévation 3

Au chargement de la page, les composants qui emploient ce niveau d’élévation sont cachés par défaut. Une action de l’utilisateur est requise pour les faire afficher. Ils sont entièrement interactifs.

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

background-color: #FFFFFF;
box-shadow: 0px 4px 16px 0px rgba(34, 54, 84, 0.24);

Exemple

Élévation 3

Élévation 4

Au chargement de la page, les composants qui emploient ce niveau d’élévation sont cachés par défaut. Une action de l’utilisateur est requise pour les faire afficher. Ils sont hautement interactifs et ont un niveau d’importance supérieure, car ils apparaissent par-dessus tous les autres éléments de la page.

Usage : Boîte de dialogue modale

background-color: #FFFFFF;
box-shadow: 0px 6px 24px 0px rgba(34, 54, 84, 0.24);

Exemple

Élévation 4

Fonctionnement

Par souci de simplicité, il faut supposer que :

• Le composant qui emploie une élévation est situé 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 %