[ez-toc]

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

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

  1. Использование цвета в начале работы с проектом (вайрфреймах)
  2. Цвет(а) компании (бренд)
  3. Функциональные цвета / цвета элементов интерфейса
  4. Нейтральные цвета
  5. Отзывчивость
  6. Цвет акцент
  7. Взаимодействия
  8. Контраст
  9. Насыщенность
  10. Дальтонизм / Colorblind 
  11. Дополнительно

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

По стандарту — используются оттенки ч/б (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-стилями.

More saturated and less saturated versions of the dog photograph

Дальтонизм / colorblind

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

Дополнительно

Рекомендую также просмотреть “Руководство по цвету” на ux.pub

Руководство по цвету в UX/UI дизайне. Как выбирать, смешивать и сочетать цвета

Термины и определения в визуальном дизайне:

https://www.nngroup.com/articles/visual-design-cheat-sheet/?lm=color-enhance-design&pt=article