Цвет в UI и UX дизайне

Posted23 Листопада, 2021

Updated29 Листопада, 2021

ByСергій Головашкін

Существует множество терминов, теорий и всего-всего-всего, если говорить о цвете в UI дизайне. Ниже рассмотрим следующее:

Использование цвета в начале работы с проектом (вайрфреймах)
Цвет(а) компании (бренд)
Функциональные цвета / цвета элементов интерфейса
Нейтральные цвета
Отзывчивость
Цвет акцент
Взаимодействия
Контраст
Насыщенность
Дальтонизм / Colorblind
Дополнительно

Использование цвета в начале работы с проектом (вайрфреймах)

По стандарту — используются оттенки ч/б (0-255)
Но, можно выбрать и любой другой цвет.

На этом этапе главное — создать иерархию, отделить главное от вторичного

Основной цвет бренда/проекта

Обычно либо предоставляется заказчиком, либо используются цвета, подходящие под нишу.

Ниша / эмоция / воздействие на человека

Смотреть инфографику [TODO]

Функциональные цвета

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

Нейтральные цвета

Или базовые цвета (нейтральные атомы).

Например: у всех карточек фон #FFFFFF, у форм #FCFCFC

Отзывчивость (интерфейс отзывается)

Цвета, используемые, чтобы показать текущее состояние/статус действия.

Например: когда пароль не верен или действие выполнено

Цвет акцент

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

Довольно часто цвет акцент + фирменный / основной цвет — используется 1 и тот же цвет.

Желтый – #F3D576, в данном примере является цветом-акцентом

+ Идеально, когда цвет акцента одновременно хорошо читается на темном и светлых фонах

Взаимодействия

Создаем вариации цвета, когда, например, на кнопку навели курсором, нажали и тд.

Контраст

Four dog photographs increasing in contrast from left to right

Очень важно, чтобы соблюдался контраст. Ниже плагин

Плагин для проверки контраста

https://www.figma.com/community/plugin/732603254453395948/Stark

Насыщенность (Saturation)

При отрисовке вайрфреймов высокой детализации — очень удобно задавать параметр насыщенности 0, сохраняя фокусировку на проектировании, а не работе с UI-стилями.