Дизайн
#Руководства

Тени в интерфейсах: зачем они нужны и как их рисовать в Figma

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

Meery Mary для Skillbox Media

Мария Булина

Дизайнер в Wildberries. Работала в «Бюро Горбунова», где участвовала в создании интерфейсов сайта и блога компании Mindbox, веб‑системы Gismeteo, сайта и приложения сервиса «Руки».

Страница Марии в Facebook.

Тени — это инструмент, который помогает решить графические задачи в интерфейсах: упорядочить элементы, показать их интерактивность и выделить важное. Вместе с дизайнером Марией Булиной разбираемся, нужны ли тени в вашем интерфейсе и как их делать.

Как понять, нужны ли тени в вашем интерфейсе

Стоит ли использовать тени, зависит от задачи и общей стилистики:

Тень нужнаТень не нужна
В интерфейсах, где важно показать физичность всех кнопок и переключателей. Тени помогут быстрее разобраться людям, которые редко используют мобильные приложения.В плоском дизайне тени необязательны, так как интерактивность любого элемента интерфейса можно показать с помощью цвета или размера.
Основа дизайн-системы Material Design — физические свойства простой бумаги. Поэтому все элементы интерфейса в Android отбрасывают тень.В приложениях Apple тени используются очень редко. Например, в приложении Wallet на банковской карте.
В приложениях Google все элементы отбрасывают тень. В приложениях Apple — только чтобы показать расположение или физическую форму. Изображения: Google / Apple / Skillbox Media

Если ваши кнопки уже и так достаточно яркие и видно, что на них можно нажать, то тени под ними могут выглядеть громоздко и неприятно:

Изображение: дизайн Akhil T. J. и Sreemikil T. Manoharan

Настройки тени в Figma

В Figma, как и в любом другом графическом редакторе, есть два вида теней: внутренняя и внешняя. Их можно настроить в блоке Effects:

  1. Выберите любой объект на макете.
  2. В блоке Effects на панели слоёв нажмите на плюсик.
  3. Нажмите на название появившегося эффекта и выберите нужный вид тени — Drop shadow (падающая) или Inner shadow (внутренняя).
Изображение: Мария Булина / Skillbox Media

Чтобы настроить тень, нажмите на иконку :

X — смещение тени по вертикали.

Y — смещение по горизонтали.

Blur — размытие.

Spread — размер.

Также у тени можно изменить цвет и непрозрачность.

Тень в интерфейсах

Тени помогают выделить элемент интерфейса, показать его интерактивность или состояние: тень под кнопкой показывает, что на неё можно нажать. Использовать тени необязательно — также элемент можно выделить с помощью цвета, размера, формы.

Источник света

Значения X и Y зависят от источника света. Например, если источник стоит в левом нижнем углу, тень будет падать от предмета в левый правый угол.

Обычно в интерфейсах на все элементы «светит» один источник света. Часто он располагается в верхнем левом углу или просто сверху.

Если источник в верхнем левом углу, X и Y должны быть больше нуля. Если просто сверху — X равен нулю, а Y больше нуля:

Изображение: Мария Булина / Skillbox Media

Высота элементов

Тени показывают, на какой высоте находится элемент интерфейса относительно других. Это помогает разобраться в их иерархии. Чем больше непрозрачность и меньше Blur, тем элемент ближе к поверхности:

Изображение: Мария Булина / Skillbox Media

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

Изображение: Мария Булина / Skillbox Media

Правило рисования тени простое. Она должна быть или темнее того, что её отбрасывает, или светлее. Иначе получается не тень, а размазня.

Илья Бирман,
арт-директор «Бюро Горбунова»

Изображение: Мария Булина / Skillbox Media

Оттенок объекта в тени

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

Изображение: Мария Булина / Skillbox Media

Простых формул по подбору оттенка тени не существует: ориентируйтесь на глаз — следите, чтобы её цвет не был грязным и не создавал ощущения неряшливости:

Изображение: Мария Булина / Skillbox Media

Если элемент жёлтого цвета, в тень стоит добавить оттенок оранжевого. Иначе она будет выглядеть грязно:

Изображение: Мария Булина / Skillbox Media

Объём

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

Изображение: Мария Булина / Skillbox Media

Тень в иллюстрации

Если иллюстрация векторная и плоская, тень обычно не нужна. На многих современных сайтах, например на промостранице Notion, иллюстрации простые, и тени на них смотрелись бы странно.

Здесь иллюстрации без теней выглядят хорошо. Скриншот: сайт Notion

С реалистичными изображениями сложнее. Часто тень на них нужна, чтобы предмет был визуально устойчив.

На промостранице Apple One с помощью теней показывают, что устройства не летают в воздухе. Скриншот: официальный сайт Apple

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

Книги и видео, которые помогут узнать больше о тенях

Книги:

Видеоуроки:


Глубоко, бесплатно:
вебинары по программированию, маркетингу и дизайну.

Расписание

Курс

Figma с нуля до PRO

Вы освоите самую популярную программу для веб-дизайна на профессиональном уровне. Научитесь создавать интерактивные прототипы, передавать макеты разработчикам и экономить время на рутинных задачах.

Узнать про курс
Figma с нуля до PRO Узнать больше
Понравилась статья?
Да

Пользуясь нашим сайтом, вы соглашаетесь с тем, что мы используем cookies 🍪

Ссылка скопирована