Существует множество терминов, теорий и всего-всего-всего, если говорить о цвете в UI дизайне. Ниже рассмотрим следующее:
- Использование цвета в начале работы с проектом (вайрфреймах)
- Цвет(а) компании (бренд)
- Функциональные цвета / цвета элементов интерфейса
- Нейтральные цвета
- Отзывчивость
- Цвет акцент
- Взаимодействия
- Контраст
- Насыщенность
- Дальтонизм / Colorblind
- Дополнительно
Использование цвета в начале работы с проектом (вайрфреймах)
По стандарту — используются оттенки ч/б (0-255)
Но, можно выбрать и любой другой цвет.
На этом этапе главное — создать иерархию, отделить главное от вторичного
Основной цвет бренда/проекта
Обычно либо предоставляется заказчиком, либо используются цвета, подходящие под нишу.
Ниша / эмоция / воздействие на человека
Смотреть инфографику [TODO]
Функциональные цвета
Например, для форм, полей для ввода и других элементов интерфейса. Чаще используются нейтральные оттенки (ч/б)
Нейтральные цвета
Или базовые цвета (нейтральные атомы).
Например: у всех карточек фон #FFFFFF, у форм #FCFCFC
Отзывчивость (интерфейс отзывается)
Цвета, используемые, чтобы показать текущее состояние/статус действия.
Например: когда пароль не верен или действие выполнено
Цвет акцент
Цвет акцента используется чтобы выделить важную информацию. У цвета акцента обычно яркость и насыщенность выше, чем у других цветов.
Довольно часто цвет акцент + фирменный / основной цвет — используется 1 и тот же цвет.
+ Идеально, когда цвет акцента одновременно хорошо читается на темном и светлых фонах
Взаимодействия
Создаем вариации цвета, когда, например, на кнопку навели курсором, нажали и тд.
Контраст
Очень важно, чтобы соблюдался контраст. Ниже плагин
Плагин для проверки контраста
https://www.figma.com/community/plugin/732603254453395948/Stark
Насыщенность (Saturation)
При отрисовке вайрфреймов высокой детализации — очень удобно задавать параметр насыщенности 0, сохраняя фокусировку на проектировании, а не работе с UI-стилями.
Дальтонизм / colorblind
В идеале, проектировать (или хотя бы понимать как) интерфейсы с учетом людей с ограниченными возможностями.
Дополнительно
Рекомендую также просмотреть “Руководство по цвету” на ux.pub
Руководство по цвету в UX/UI дизайне. Как выбирать, смешивать и сочетать цвета
Термины и определения в визуальном дизайне:
https://www.nngroup.com/articles/visual-design-cheat-sheet/?lm=color-enhance-design&pt=article