Système d'Élévation et de Profondeur

Que fait Système d'Élévation et de Profondeur ?

Objectif

Le Système d'Élévation et de Profondeur fournit une méthodologie pour gérer la dimension verticale (axe Z) d'une interface web. Il utilise des indices visuels comme les ombres, les traitements de surface et les ordres d'empilement pour établir une hiérarchie claire des couches. Ce système garantit que les utilisateurs comprennent la relation entre les éléments qui se chevauchent, peuvent identifier les surfaces interactives et bénéficient d'un environnement prévisible et tactile qui imite la profondeur du monde réel.

Cas d'Utilisation

• Définir une échelle d'ombre cohérente pour un système de conception.
• Concevoir des interfaces complexes à plusieurs couches comme des tableaux de bord ou des IDE.
• Établir des normes d'ordre d'empilement (z-index) pour éviter les « conflits » d'interface.
• Fournir un retour tactile pour les états interactifs (par exemple, un bouton qui se soulève au survol).
• Distinguer le contenu de page persistant des superpositions temporaires.

Quand NE PAS Utiliser

• Designs plats/brutalistes : Où l'esthétique intentionnelle est 2D et manque de profondeur ou d'ombres perçues.
• Contenu purement textuel : Articles simples ou documents sans couches qui se chevauchent ou surfaces interactives.
• Appareils bas de gamme critiques en performance : Où l'utilisation intensive de filtres CSS ou d'ombres complexes pourrait entraîner un décalage de rendu significatif.

Entrées

1. Esthétique de la Marque : La profondeur est-elle « Physique/Matérielle » (ombres réalistes) ou « Graphique » (décalages solides) ?
2. Inventaire des Composants : Une liste de tous les éléments d'interface nécessitant une élévation (Cartes, Barres de navigation, Modales, Boutons).
3. Source Lumineuse Principale : Généralement supposée venir du haut ou du haut-centre.
4. Système d'Espacement : Le système-d'espacement-fluide pour aligner les étendues d'ombre avec les marges de mise en page.

Sorties

1. Échelle d'Élévation (Ombres) : Un ensemble de 5 à 6 jetons d'ombre standardisés (par exemple, élévation-petite à élévation-très-grande).
2. Carte des Contextes d'Empilement (Z-Index) : Une échelle définie de valeurs z-index catégorisées par fonction de couche.
3. Palette de Surfaces : Définitions des couleurs d'arrière-plan qui se décalent en fonction de l'élévation (par exemple, les surfaces plus foncées « coulent », les surfaces plus claires « montent »).
4. Spécification d'Interaction : Règles pour la modification de l'élévation pendant les états de survol, d'activation et de focus.

Flux de Travail

1. Établir les Niveaux d'Empilement

Diviser l'interface en couches fonctionnelles du bas vers le haut :

• Niveau 0 (Base) : L'arrière-plan/toile de la page.
• Niveau 1 (Plat) : Contenu reposant sur la base (par exemple, cartes plates, séparateurs).
• Niveau 2 (Surélevé) : Éléments interactifs ou cartes principales qui « flottent » subtilement.
• Niveau 3 (Collant/Flottant) : En-têtes globaux, FAB (boutons d'action flottants).
• Niveau 4 (Superposition) : Modales, tiroirs et leurs fonds.
• Niveau 5 (Système) : Infobulles, toasts et alertes critiques.

2. Définir l'Échelle d'Ombre

Créer une progression d'ombres qui correspondent à la distance de la base :

• Petite (2dp) : Séparation subtile pour les boutons ou les petites cartes.
• Moyenne (4dp-8dp) : Élévation standard pour les listes déroulantes et la navigation.
• Grande (12dp-24dp) : Élévation élevée pour les modales et les couches flottantes.
• Très Grande (32dp+) : Profondeur spectaculaire pour le focus temporaire ou les alertes système.

Remarque : Utilisez plusieurs couches d'ombre (par exemple, une ombre « nette » et une ombre « douce ») pour un effet plus réaliste et de haute qualité.

3. Assigner les Couleurs de Surface

La profondeur ne se limite pas aux ombres ; elle implique aussi la réflexion de la lumière :

• Mode Clair : Les éléments de plus haute élévation deviennent souvent légèrement plus clairs ou maintiennent un blanc pur tandis que la base est blanc cassé.
• Mode Sombre : Les éléments de plus haute élévation DOIVENT devenir plus clairs (en utilisant des superpositions blanches semi-transparentes) pour simuler une plus grande proximité de la source lumineuse.
• Implémentation : Utilisez color-mix(in oklch, var(--surface-base) 100%, white X%) (ou une fonction de jeton basée sur OKLCH équivalente) pour générer la couleur de surface de chaque niveau d'élévation par programmation, plutôt que de choisir manuellement une nouvelle valeur hexadécimale par niveau. OKLCH maintient des pas de luminosité perçue uniformes entre les teintes, ce que des ajustements hexadécimaux plats ne garantissent pas.

4. Créer des « Soulèvements » d'Interaction

Appliquer le système-d'état-interactif à l'axe Z :

• Survol : Augmenter le flou et l'étendue de l'ombre pour simuler le soulèvement de l'élément vers l'utilisateur.
• Actif (Clic) : Diminuer ou supprimer l'ombre pour simuler l'enfoncement de l'élément dans la surface.

5. Documenter la Stratégie d'Empilement (Z-Index)

Prévenir les « guerres de Z-Index » en utilisant une échelle de 10 ou 100 pas :

• 0 : Défaut
• 100 : Navigation/En-tête
• 500 : Fonds
• 600 : Modales/Tiroirs
• 1000 : Infobulles/Toasts

Règles de Décision

• La Règle de la Source Lumineuse : Toutes les ombres du système DOIVENT partager la même source lumineuse implicite (généralement de haut en bas) pour maintenir une logique visuelle.
• L'Élévation équivaut à l'Importance : L'information temporaire la plus importante (par exemple, une alerte) doit avoir l'élévation la plus élevée et l'ombre la plus spectaculaire.
• Ombre vs. Bordure : Utilisez les bordures pour la structure (Niveau 0-1) et les ombres pour la profondeur (Niveau 2+). N'utilisez pas les deux abondamment sur le même élément, sauf si la marque est fortement « skeuomorphe ».
• Élévation en Mode Sombre : En mode sombre, n'utilisez jamais d'ombres foncées sur des arrière-plans foncés. Utilisez l'éclaircissement de la couleur de surface (décalages de luminosité) comme principal indicateur de profondeur.

Contraintes

• Accessibilité : Les indices d'élévation (ombres) doivent compléter, et non remplacer, les indices structurels. Assurez-vous que les éléments ont un contraste ou des bordures suffisants pour être identifiables sans l'ombre. Les superpositions élevées (modales, listes déroulantes) ne doivent jamais se rendre au-dessus d'un indicateur de focus d'une manière qui le coupe ou le cache (WCAG 2.2 SC 2.4.11).
• Performance : Évitez box-shadow sur les éléments qui s'animent fréquemment ou qui se trouvent dans des conteneurs de défilement à haute fréquence.
• Réactivité : Les grandes ombres peuvent « déborder » de l'écran sur mobile ; réduisez l'étendue de l'ombre ou passez à des bordures sur les petits écrans.

Schémas d'Échec Courants

• Sources Lumineuses Incohérentes : Avoir certaines ombres qui vont à droite et d'autres qui descendent, créant une interface « ivre » ou fragmentée.
• « Nombres Magiques » de Z-Index : Utiliser z-index: 99999 pour résoudre un problème, ce qui conduit finalement à un code non maintenable.
• Ombres Boueuses : Utiliser du noir pur (#000) pour les ombres au lieu d'une version transparente de la couleur de surface ou d'un neutre foncé.
• Superpositions Plates : Concevoir une modale sans ombre ni fond, la faisant se fondre dans le contenu derrière elle.
• Sur-Élévation : Donner à chaque carte une ombre lourde, ce qui aplatit la hiérarchie car rien ne se démarque.

Critères de Validation

• Une échelle d'élévation cohérente de 5 à 6 pas est définie et utilisée.
• Toutes les ombres partagent une source lumineuse unique et cohérente.
• Les valeurs de z-index sont regroupées en niveaux logiques et documentés.
• Le mode sombre utilise des décalages de luminosité de surface pour indiquer la profondeur.
• Les états d'interaction (Survol/Actif) incluent un mouvement vertical ou des décalages d'ombre.
• Les ombres ne provoquent pas de débordement horizontal ou vertical sur mobile.
• Les éléments sont distinguables même si les ombres sont supprimées (vérification A11y).
• Les couches de haute élévation n'obscurcissent jamais les indicateurs de focus sur les éléments en dessous ou à l'intérieur (WCAG 2.2 SC 2.4.11).