Тени в UI: почему чёрная тень с 25% выглядит неправильно и какие многослойные тени использовать

Тень, к которой тянется большинство дизайнеров, это чёрный с 25%. С такой силой она не похожа на свет. Она похожа на грязное пятно под карточкой.

Хорошая тень почти невидима: вы чувствуете подъём раньше, чем замечаете саму тень. Вот как к этому прийти, плюс четыре токена, которые можно скопировать.

Почему тень по умолчанию выглядит как пятно

Тень по умолчанию в Figma: чёрный с прозрачностью 25%, смещение 4 вниз. Её повторяют два популярных туториала, и она расходится дальше: дефолт инструмента становится дизайн-решением, которого никто не принимал.

Настоящая тень мягкая. Свет огибает объект, поэтому край тени плавно затухает, а по мере удаления от объекта тень становится слабее. У одного жёсткого тёмного слоя всего этого нет. У него один край и одна сила, и глаз читает это как грязь, серое пятно, а не как приподнятую поверхность.

Правка 1: 8 процентов, а не 25

Чёрный с 25%

Чёрный с 8%, больше размытие

Та же карточка, тот же фон. Слева тень самое громкое, что есть на карточке. Справа это мягкий подъём, и вы смотрите на содержимое. Снижение прозрачности это половина правки. Рост размытия другая половина.

Когда размытие растёт, то же количество тени распределяется по большей площади и само становится светлее. Поэтому широкая тень с 8 процентами выглядит естественнее, чем узкая с теми же 8. Начните с 8 процентов и повышайте, только если карточка пропадает на вашем фоне.

Правка 2: сложите две тени

Одна тень вынуждена делать две работы и обе делает плохо. Две тени делят их между собой.

Узкая лежит прямо под краем и говорит: «это касается поверхности». Широкая это мягкий ореол, который говорит: «это приподнято над ней». Вместе они выглядят как одна естественная тень, потому что именно так ведёт себя настоящий свет: тёмная линия контакта плюс широкое слабое затухание.

В CSS два слоя это одна декларация, разделённая запятой:

Правка 3: тонируйте, а не серите

Чистый чёрный

Тонированная ink

Чистый чёрный, смешанный с цветным фоном, делает его серым и мутным. Тень в тёмном оттенке собственного цвета фона остаётся чистой. Обе тени здесь по 16 процентов, так что разница только в цвете.

Правило: берите свой ink, самый тёмный цвет палитры, как цвет тени, с низкой прозрачностью. В наших токенах ink это #1B1530, очень тёмный фиолетовый. На белой странице тонировку почти не видно. На цветной странице, в брендовой панели или тонированной секции, это разница между тенью, которая на своём месте, и тенью, которая выглядит приклеенной.

Правка 4: выше значит больше

Когда объект расположен выше, например меню над карточкой или модалка над страницей, его тень становится больше и мягче, потому что у света больше места, чтобы рассеяться. Темнее она не становится. Дизайнер, который делает тень верхнего объекта темнее, возвращается к тому же пятну.

Отсюда небольшой замкнутый набор токенов:

У каждого слоя X равен 0 и spread равен 0, цвет это ink #1B1530. Поля X, Y, blur и spread в Figma напрямую соответствуют четырём числам в CSS box-shadow.

Токены в виде CSS

Эти четыре токена наша рекомендация, а не значение платформы. Замените цвет ink на свой самый тёмный брендовый оттенок и сохраните структуру.

Где тени перестают работать: тёмная тема

Тень на тёмном

Более светлая поверхность

Тень затемняет то, что находится под ней, а на тёмном фоне затемнять почти нечего. Слева большая тень невидима, и карточка тает на странице. Справа карточка просто более светлая поверхность, и именно это её приподнимает.

Поэтому в тёмной теме поднимайте слой, делая его светлее, а не затеняя. Наш материал о цветовых системах тёмного режима разбирает шкалу поверхностей, а цвет фона светлого режима разбирает серые с другой стороны.

Тест прищуриванием

Прищурьтесь на экран или отойдите от него. Если вы всё ещё видите каждую тень как тёмную фигуру, она слишком сильная. Если края карточек пропадают на вашем худшем мониторе, поднимите прозрачность на одну ступень. Правильная тень исчезает, когда вы смотрите на неё прямо, и проявляется, когда её убирают.

FAQ

Какая тень лучше всего подходит для UI?

Два слоя в тёмном оттенке вашего ink: узкий, например 0 1px 2px при 6 процентах, и широкий, например 0 8px 24px при 8 процентах. Это читается как естественный свет, а не как пятно.

Какой должна быть прозрачность тени в UI?

Наши четыре токена лежат в диапазоне от 6 до 12 процентов. Для карточки начните с 8 процентов и повышайте, только если край пропадает. Чёрный с 25 процентами, частый дефолт, редко подходит для чистого интерфейса.

Какая тень по умолчанию в Figma?

Чёрный (#000000) с прозрачностью 25 процентов и смещением 4 вниз. Это отправная точка инструмента, а не дизайн-решение, так что большинство дизайнов улучшается, если её поменять.

Должны ли тени быть чисто чёрными?

Нет. Используйте очень тёмную версию бренд-цвета или ink. На цветном фоне чистый чёрный делает тень серой и мутной, а тонированная тень сохраняет цвет чистым.

Как показать высоту с помощью теней?

Делайте тень более высокого элемента больше и мягче, а не темнее. Используйте небольшой набор токенов, например XS, SM, MD и LG, чтобы каждый слой интерфейса использовал одну из четырёх теней.

Работают ли тени в тёмной теме?

Плохо. Светлого фона, который можно затемнить, почти нет, поэтому большие тени исчезают. Поднимайте слой, давая ему более светлый цвет поверхности.

Как написать многослойный box-shadow в CSS?

Перечислите слои в одной декларации box-shadow через запятую: box-shadow: 0 1px 2px rgba(27,21,48,.06), 0 8px 24px rgba(27,21,48,.08);.

Источники

• Тень по умолчанию в Figma: #000000 с прозрачностью 25%, X 0, Y 4. Туториалы сходятся на чёрном 25%, но расходятся в размытии по умолчанию, поэтому в этом материале оно не указано.
• #00000040 это #000000 с 25% в 8-значном hex (0x40 это 64 из 255, около 25%).
• Четыре токена и ink #1B1530 (violet 900) это наши стили эффектов UX Brainy. Это рекомендация, а не значение платформы.
• Карточки выше наши собственные примеры. В демо тонировки используется #4E2FB3 с 16 процентами рядом с чёрным с 16 процентами.
• Больше постов в духе «одно правило» в UX Brainy.