Эффекты

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

Тень

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

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

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

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

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

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

Затемнение

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

Градиенты

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

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

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

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

Тонирование

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

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