Rivalry2

HTML Diff

0 added 0 removed

Original 2026-01-01

Modified 2026-02-21

1 <a>#Руководства</a>

2 <ul><li>30 июл 2021</li>

3 <li>0</li>

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

5 Meery Mary для Skillbox Media

6 Редактор. Пишет про дизайн, редактирует книги, шутит шутки, смотрит аниме.

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

8 Страница Марии в<a>Facebook*</a>.

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

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

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

12 Изображение: дизайн<a>Akhil T. J. и Sreemikil T. Manoharan</a>В Figma, как и в любом другом графическом редакторе, есть два вида теней: внутренняя и внешняя. Их можно настроить в блоке Effects:

13 <ul><li>Выберите любой объект на макете.</li>

14 <li>В блоке Effects на панели слоёв нажмите на плюсик.</li>

15 <li>Нажмите на название появившегося эффекта и выберите нужный вид тени - Drop shadow (падающая) или Inner shadow (внутренняя).</li>

16 </ul>Изображение: Мария Булина / Skillbox MediaЧтобы настроить тень, нажмите на иконку :

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

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

19 Blur - размытие.

20 Spread - размер.

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

22 Изображение: Мария Булина / Skillbox MediaИзображение: Мария Булина / Skillbox MediaТени помогают выделить элемент интерфейса, показать его интерактивность или состояние: тень под кнопкой показывает, что на неё можно нажать. Использовать тени необязательно - также элемент можно выделить с помощью цвета, размера, формы.

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

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

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

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

27 Изображение: Мария Булина / Skillbox MediaВысота элементов

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

29 Изображение: Мария Булина / Skillbox MediaЖёсткая и очень плотная тень обычно обращает на себя слишком много внимания. Если у вас нет задачи сделать тени вычурными, советуем избегать такого эффекта.

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

31 <a>Илья Бирман</a>,арт-директор "Бюро Горбунова"

32 Изображение: Мария Булина / Skillbox MediaОттенок объекта в тени

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

34 Изображение: Мария Булина / Skillbox MediaПростых формул по подбору оттенка тени не существует: ориентируйтесь на глаз - следите, чтобы её цвет не был грязным и не создавал ощущения неряшливости:

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

36 Изображение: Мария Булина / Skillbox MediaОбъём

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

38 Изображение: Мария Булина / Skillbox MediaЕсли иллюстрация векторная и плоская, тень обычно не нужна. На многих современных сайтах, например на промостранице Notion, иллюстрации простые, и тени на них смотрелись бы странно.

39 Здесь иллюстрации без теней выглядят хорошо. Скриншот: сайт NotionС реалистичными изображениями сложнее. Часто тень на них нужна, чтобы предмет был визуально устойчив.

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

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

42 Книги:

43 <ul><li>"<a>Игра света и тени для художников</a>", Бёрн Хогарт.</li>

44 <li>"<a>Искусство цвета</a>", Иоханнес Иттен.</li>

45 <li>"<a>Основы учебного академического рисунка</a>", Николай Ли, - об основах перспективы, построения объектов, падающих теней, композиции.</li>

46 <li>Статья<a>Lights and Shadows</a>Бартоша Цехановского - о свете, тенях и их природе. На английском.</li>

47 </ul>Видеоуроки:

48 <ul><li><a>на английском</a>,</li>

49 <li><a>с русскими субтитрами</a>.</li>

50 </ul><a>Самоучитель по Figma</a>

51 Самые полные и полезные инструкции, которые помогут вам освоить все функции графического редактора.

52 * Решением суда запрещена "деятельность компании Meta Platforms Inc. по реализации продуктов - социальных сетей Facebook* и Instagram* на территории Российской Федерации по основаниям осуществления экстремистской деятельности".

53 <a>Научитесь: Figma с нуля до PRO Узнать больше</a>