Ombres d'UI : pourquoi l'ombre portée noire à 25 % fait faux, et les ombres en couches à utiliser

L'ombre que la plupart des designers choisissent, c'est du noir à 25 %. À cette intensité, on ne dirait pas de la lumière. On dirait une tache sous la carte.

Une bonne ombre est presque invisible : on sent le décollement avant de voir l'ombre. Voici comment y arriver, avec quatre tokens à copier.

Pourquoi la valeur par défaut ressemble à une tache

L'ombre portée par défaut de Figma est noire à 25 % d'opacité, décalée de 4 vers le bas. Deux tutoriels courants la répètent, donc elle se propage : un réglage d'outil devient une décision de design que personne n'a prise.

Une vraie ombre est douce. La lumière enveloppe l'objet, donc le bord d'une ombre s'estompe progressivement, et l'ombre s'affaiblit à mesure qu'elle s'éloigne de l'objet. Une seule couche sombre et dure n'a rien de tout ça. Elle a un seul bord et une seule intensité, et l'œil la lit comme de la saleté, une tache grise, pas comme une surface surélevée.

Correction 1 : 8 pour cent, pas 25

Noir à 25 %

Noir à 8 %, flou plus large

Même carte, même fond. À gauche, l'ombre est ce qu'il y a de plus bruyant sur la carte. À droite, c'est un léger décollement, et c'est le contenu que l'on regarde. Baisser l'opacité règle la moitié du problème. Laisser le flou grandir règle l'autre moitié.

Quand le flou grandit, la même quantité d'ombre s'étale sur une plus grande surface, donc elle devient plus claire d'elle-même. C'est pourquoi une ombre large à 8 pour cent paraît plus naturelle qu'une ombre serrée à 8 pour cent. Commencez à 8 pour cent et ne montez que si la carte disparaît sur votre fond.

Correction 2 : empilez deux ombres

Une seule ombre doit faire deux métiers et n'en fait bien aucun. Deux ombres se les partagent.

La serrée se place juste sous le bord et dit « ça touche la surface ». La large est le halo doux qui dit « ça flotte au-dessus ». Ensemble, elles ressemblent à une seule ombre naturelle, parce que c'est ce que fait la vraie lumière : une ligne de contact sombre plus une longue décroissance large et faible.

En CSS, les deux couches tiennent dans une seule déclaration, séparées par une virgule :

Correction 3 : teintez-la, ne la grisez pas

Noir pur

Teintée avec l'encre

Du noir pur mélangé à un fond coloré le rend gris et boueux. Une ombre dans une teinte sombre de la couleur du fond reste propre. Les deux ombres ici sont à 16 pour cent, donc la seule différence est la couleur.

La règle : utilisez votre encre, la couleur la plus sombre de votre palette, comme couleur d'ombre, à faible opacité. Dans nos propres tokens, l'encre est #1B1530, un violet très sombre. Sur une page blanche, la teinte est difficile à voir. Sur une page colorée, un panneau de marque ou une section teintée, c'est la différence entre une ombre qui appartient au décor et une qui semble collée.

Correction 4 : plus haut veut dire plus grand

Quand un élément est plus haut, un menu au-dessus d'une carte, une modale au-dessus d'une page, son ombre devient plus grande et plus douce, parce que la lumière a plus de place pour s'étaler. Elle ne devient pas plus sombre. Un designer qui assombrit l'ombre de l'élément le plus haut retombe sur la tache.

Cela donne un petit ensemble fermé de tokens :

Chaque couche utilise X 0 et un spread de 0, colorée avec l'encre #1B1530. Les champs X, Y, flou et spread de Figma correspondent directement aux quatre nombres du box-shadow CSS.

Les tokens en CSS

Ces quatre-là sont notre recommandation, pas une valeur de plateforme. Remplacez la couleur d'encre par votre propre teinte de marque la plus sombre et gardez la structure.

Quand les ombres ne marchent plus : le mode sombre

Ombre sur fond sombre

Surface plus claire

Une ombre assombrit ce qui se trouve derrière elle, et un fond sombre n'a plus grand-chose à assombrir. À gauche, la grande ombre est invisible et la carte fond dans la page. À droite, la carte est simplement une surface plus claire, et c'est ça qui la soulève.

Donc, dans un thème sombre, élevez une couche en l'éclaircissant, pas en l'ombrant. Notre article sur les systèmes de couleurs du mode sombre traite de la rampe de surfaces, et la couleur de fond en mode clair traite des gris de l'autre côté.

Le test du plissement d'yeux

Plissez les yeux devant l'écran, ou reculez. Si vous voyez encore chaque ombre comme une forme sombre, elle est trop forte. Si les bords des cartes disparaissent sur votre pire écran, montez l'opacité d'un cran. La bonne ombre disparaît quand on la regarde directement et se remarque quand on la retire.

FAQ

Quelle est la meilleure ombre portée pour une UI ?

Deux couches empilées dans une teinte sombre de votre propre encre : une serrée comme 0 1px 2px à 6 pour cent, et une large comme 0 8px 24px à 8 pour cent. Elle se lit comme de la lumière naturelle plutôt que comme une tache.

Quelle opacité pour une ombre d'UI ?

Nos quatre tokens vont de 6 à 12 pour cent. Commencez à 8 pour cent pour une carte et ne montez que si le bord disparaît. Du noir à 25 pour cent, une valeur par défaut courante, est rarement adapté à une interface épurée.

Quelle est l'ombre portée par défaut de Figma ?

Noir (#000000) à 25 pour cent d'opacité, avec un décalage de 4 vers le bas. C'est un point de départ de l'outil, pas une décision de design, donc la plupart des designs s'améliorent en la changeant.

Les ombres doivent-elles être en noir pur ?

Non. Utilisez une version très sombre de la couleur de votre marque ou de votre encre. Sur un fond coloré, le noir pur rend l'ombre grise et boueuse, alors qu'une ombre teintée garde la couleur propre.

Comment montrer l'élévation avec des ombres ?

Faites l'ombre de l'élément le plus haut plus grande et plus douce, pas plus sombre. Utilisez un petit ensemble de tokens, comme XS, SM, MD et LG, pour que chaque couche de l'interface utilise l'une de quatre ombres.

Les ombres marchent-elles en mode sombre ?

Mal. Il reste peu de fond clair à assombrir, donc les grandes ombres disparaissent. Élevez une couche en lui donnant plutôt une couleur de surface plus claire.

Comment écrire un box-shadow en couches en CSS ?

Listez les couches dans une seule déclaration box-shadow, séparées par des virgules : box-shadow: 0 1px 2px rgba(27,21,48,.06), 0 8px 24px rgba(27,21,48,.08);.

Sources

• L'ombre portée par défaut de Figma est #000000 à 25 % d'opacité, X 0, Y 4. Les tutoriels s'accordent sur le noir à 25 % ; ils divergent sur le flou par défaut, donc cet article ne l'indique jamais.
• #00000040 correspond à #000000 à 25 % en hexadécimal à 8 chiffres (0x40 vaut 64 sur 255, soit environ 25 %).
• Les quatre tokens et l'encre #1B1530 (violet 900) sont nos styles d'effets UX Brainy. Ils constituent une recommandation, pas une valeur de plateforme.
• Les cartes ci-dessus sont nos propres exemples. La démo de teinte utilise #4E2FB3 à 16 pour cent à côté de noir à 16 pour cent.
• Plus de posts à une règle comme celui-ci sur UX Brainy.