Тени в интерфейсах: зачем они нужны и как их рисовать в Figma
Рассказываем, в каких случаях нельзя обойтись без теней, как с помощью них показать высоту элемента и почему они никогда не бывают чёрными.
![](https://248006.selcdn.ru/main/iblock/a44/a446f6ad7f45ad0a57e1b34f0be54d92/54edc7dae690dab73d537fa7b2a5be7c.png)
![](https://248006.selcdn.ru/main/iblock/a44/a446f6ad7f45ad0a57e1b34f0be54d92/54edc7dae690dab73d537fa7b2a5be7c.png)
Meery Mary для Skillbox Media
![](/upload/setka_images/07535730072021_1e8a5d7f91d7a0ac6a6e2560e5e9f76a333de3e0.jpg)
Мария Булина
Дизайнер в Wildberries. Работала в «Бюро Горбунова», где участвовала в создании интерфейсов сайта и блога компании Mindbox, веб‑системы Gismeteo, сайта и приложения сервиса «Руки».
Страница Марии в Facebook*.
Тени — это инструмент, который помогает решить графические задачи в интерфейсах: упорядочить элементы, показать их интерактивность и выделить важное. Вместе с дизайнером Марией Булиной разбираемся, нужны ли тени в вашем интерфейсе и как их делать.
Как понять, нужны ли тени в вашем интерфейсе
Стоит ли использовать тени, зависит от задачи и общей стилистики:
Тень нужна | Тень не нужна |
---|---|
В интерфейсах, где важно показать физичность всех кнопок и переключателей. Тени помогут быстрее разобраться людям, которые редко используют мобильные приложения. | В плоском дизайне тени необязательны, так как интерактивность любого элемента интерфейса можно показать с помощью цвета или размера. |
Основа дизайн-системы Material Design — физические свойства простой бумаги. Поэтому все элементы интерфейса в Android отбрасывают тень. | В приложениях Apple тени используются очень редко. Например, в приложении Wallet на банковской карте. |
![](/upload/setka_images/12563929072021_accf102caaa970ce65d217b9ae9a8e9a57caa67c.jpg)
Если ваши кнопки уже и так достаточно яркие и видно, что на них можно нажать, то тени под ними могут выглядеть громоздко и неприятно:
![](https://248006.selcdn.ru/main/upload/setka_images/12563929072021_08fda0244b5397e030ee401fd2bea5b24f78a72b.jpg)
Настройки тени в Figma
В Figma, как и в любом другом графическом редакторе, есть два вида теней: внутренняя и внешняя. Их можно настроить в блоке Effects:
- Выберите любой объект на макете.
- В блоке Effects на панели слоёв нажмите на плюсик.
- Нажмите на название появившегося эффекта и выберите нужный вид тени — Drop shadow (падающая) или Inner shadow (внутренняя).
![](https://248006.selcdn.ru/main/upload/setka_images/12563929072021_6896a8696b8038f4fc8989ab005e4fccc3b90047.jpg)
Чтобы настроить тень, нажмите на иконку :
X — смещение тени по вертикали.
Y — смещение по горизонтали.
Blur — размытие.
Spread — размер.
Также у тени можно изменить цвет и непрозрачность.
![](/upload/setka_images/12563929072021_c7c2d6650fe8dd3125b1541cb39af56649bd56fa.jpg)
![](/upload/setka_images/12564029072021_08b05e7a793ee96c87ad6538ed513e45f4ce5704.gif)
Тень в интерфейсах
Тени помогают выделить элемент интерфейса, показать его интерактивность или состояние: тень под кнопкой показывает, что на неё можно нажать. Использовать тени необязательно — также элемент можно выделить с помощью цвета, размера, формы.
Источник света
Значения X и Y зависят от источника света. Например, если источник стоит в левом верхнем углу, тень будет падать от предмета в правый нижний угол.
Обычно в интерфейсах на все элементы «светит» один источник света. Часто он располагается в верхнем левом углу или просто сверху.
Если источник в верхнем левом углу, X и Y должны быть больше нуля. Если просто сверху — X равен нулю, а Y больше нуля:
![](https://248006.selcdn.ru/main/upload/setka_images/12563929072021_b30ff17d14b759c017197570526ff51b33cc83c5.jpg)
Высота элементов
Тени показывают, на какой высоте находится элемент интерфейса относительно других. Это помогает разобраться в их иерархии. Чем больше непрозрачность и меньше Blur, тем элемент ближе к поверхности:
![](/upload/setka_images/12563929072021_fc9956ee2f4201e204a5532c68850c6715ed24e0.jpg)
Жёсткая и очень плотная тень обычно обращает на себя слишком много внимания. Если у вас нет задачи сделать тени вычурными, советуем избегать такого эффекта.
![](/upload/setka_images/12563929072021_6caf85fa09e0642959e62c753d9a2f18236eb1da.jpg)
Правило рисования тени простое. Она должна быть или темнее того, что её отбрасывает, или светлее. Иначе получается не тень, а размазня.
Илья Бирман,
арт-директор «Бюро Горбунова»
![](https://248006.selcdn.ru/main/upload/setka_images/13234129072021_c0c954a3a268bfc515e88839a41a25de5bd1b194.jpg)
Оттенок объекта в тени
В реальном мире тени не бывают чёрными — они всегда содержат оттенки окружающих предметов. Поэтому чтобы тень была более мягкой и естественной, добавляйте в неё оттенок своего элемента:
![](/upload/setka_images/13234129072021_cece785eb92cd643f5e788e5f37e3d933a76f56c.jpg)
Простых формул по подбору оттенка тени не существует: ориентируйтесь на глаз — следите, чтобы её цвет не был грязным и не создавал ощущения неряшливости:
![](/upload/setka_images/13234129072021_2229e417950c39bd1ac90259b6c781a232a40430.jpg)
Если элемент жёлтого цвета, в тень стоит добавить оттенок оранжевого. Иначе она будет выглядеть грязно:
![](/upload/setka_images/13234129072021_71b97f3681cfd481f98f8279e17d064ae63ea66a.jpg)
Объём
С помощью внутренней тени можно показать объём элемента. Например, можно сделать вдавленное поле ввода или дополнительно привлечь внимание к важной кнопке.
![](https://248006.selcdn.ru/main/upload/setka_images/13234129072021_b96f49b701f581862428f9c58e1a46c731d0aa89.jpg)
Тень в иллюстрации
Если иллюстрация векторная и плоская, тень обычно не нужна. На многих современных сайтах, например на промостранице Notion, иллюстрации простые, и тени на них смотрелись бы странно.
![](/upload/setka_images/13234129072021_d75dd4921f9f5ca9dc828e1efafbd5a21dfa9c5d.jpg)
С реалистичными изображениями сложнее. Часто тень на них нужна, чтобы предмет был визуально устойчив.
![](https://248006.selcdn.ru/main/upload/setka_images/13234129072021_b76bc71fa80c20942ed01e19c21ead7b69ad6b89.jpg)
Реалистичные тени — сложная и не всегда нужная вещь, особенно сейчас, когда дизайнеры стремятся упростить графику. Но полезно отличать плохо нарисованные тени от хороших и уметь рисовать их правильно, чтобы быть готовым к любой задаче.
Книги и видео, которые помогут узнать больше о тенях
Книги:
- «Игра света и тени для художников», Бёрн Хогарт.
- «Искусство цвета», Иоханнес Иттен.
- «Основы учебного академического рисунка», Николай Ли, — об основах перспективы, построения объектов, падающих теней, композиции.
- Статья Lights and Shadows Бартоша Цехановского — о свете, тенях и их природе. На английском.
Видеоуроки:
![](/upload/setka_images/14193802062022_93332d2c63ae51fe843eb0192ae360f05bf930b6.png)
Самые полные и полезные инструкции, которые помогут вам освоить все функции графического редактора.