Цвет в интерфейсе должен быть не просто живым, но и выполнять функциональную роль: где-то нужно показать пользователю что-то важное, а где-то наоборот увести на задний план. В этом посте я расскажу, как правильно организовать цветовую палитру проекта.
Основные цвета
Это цвета, которые пользователь чаще всего видит в вашем продукте. Их можно взять из фирменного стиля компании, а если такого нет, то подобрать самостоятельно.
Акцентный цвет
Только один. Используется для выделения и призыву к действию. Должен быть контрастным по отношению к основному цвету и фону, чтобы пользователь мог сразу его заметить.Используй его в небольших количествах. Максимум 10%.
Семантические цвета (или цвета поддержки)
Показывают состоние: ошибка, успех, предупреждение, информация. Эти цвета твёрдо сидят в нашей психологии:• красный — ошибка, опасность;• зелёный — успех, безопасность;• жёлтый — предупреждение;• синий — информация.Если сложно запомнить, вспомни про светофор.
Нейтральные
Чёрный, белый, серый (много серых).Обычно используются для текста, обводки и заливки элементов. Вместо того, чтобы вручную высчитывать и подбирать цвета, воспользуйтесь инструментом Material Design: Inline Color Tool. Да, и не забудь проверить контрастность на Color Contrast Checker. Это очень важный момент, никогда не пренебрегай им.
Визуализация данных
Набор из 10-20 цветов для визуализации данных. Тут есть свои подкатегории, о которых можно рассказать в отдельном посте.В целом, это цвета, с помощью которых можно разделить информацию по категориям, состояниям, последовательности.
Подписывайся на мой Telegram-канал!