Эффекты

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

Тень

Тень — самый простой способ показать визуальную иерархию. Один слой «приподнимается» над другим, что показывает их взаимоотношение и иерархию компонентов.

Интерфейс перегружен

Информационные слои

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

Мы стараемся не применять тени в базовых компонентах, а использовать их для выделения иерархии или визуального акцента.

Тень выделяет информационный слой

Затемнение

Когда нужно сфокусировать внимание на одном интерфейсном блоке, используется затемнение. Мы используем затемнение черного цвета #000000 с прозрачностью 50%.

Тень выделяет информационный слой

Дополнительная граница заливки усложняет интерфейс

Градиенты

Градиент используется, если необходимо сделать затемнение для фото.

Рекомендуем создавать градиент не из оттенков чисто черного, а из теплого черного — #171515.

Тонирование

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

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