Материальный дизайн — назначение цвета

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

Иерархия

Когда цвет контрастирует с окружением пользователи могут посчитать, что этот элемент важный, так как он привлекает внимание.

Фоновый контраст

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

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

Цвет и форма

Следующий вид акцента — изменение цвета объекта и его формы. Такое состояние указывает пользователю, что он взаимодействует с интерфейсом.

В примере карточки розового цвета, с тенью и иконкой галочки указывают, что они были выбраны пользователем.

Монохромный цвет

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

В примере плавающая кнопка сильно контрастирует с яркими цветами, делая её более заметной.

Оттенки серого хорошо подходят для выделения текста и фотографий.

Фирменный цвет

Фирменный цвет используют, когда нужно подчеркнуть присутствие бренда в дизайне. Это может быть смелый и дерзкий, тонкий и сложный, или дизайн где-то посередине.

Смелый и дерзкий

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

Стартовый экран

Стартовый экран может быть весёлым и задавать настроение с помощью контрастного прелоадера.

Онбординг

Цвет используемый в интерактивном режиме взаимодействия с интерфейсом может связать интерфейс и бренд.

Отображение раскрытия

Новые функции могут быть выделены цветом, чтобы направить внимание пользователя.

Тонкий и сложный

Тонкие, ненавязчивые цвета подходят для акцентирования внимания на контенте и подчёркивании элегантности дизайна.

Заглушка

UI заглушки отображаются при загрузке приложения. Использование цвета даст пользователям представление о том, что в приложении сейчас появится некий контент.

Индикатор прогресса

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

Состояние объекта

В изменённом состоянии объект может использовать фирменный цвет и слегка усиливать присутствие бренда в дизайне.

Смысл и значение

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

Согласованность и контекст

Фирменный цвета всегда должен означать одно и то же, даже если контекст меняется.

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

Поскольку красный относится к фирменному цвету, его не стоит использовать для выделения ошибок из-за низкой заметности.

Альтернативный цвет для обозначения ошибки выглядит заметнее.

Состояние интерфейса

С помощью цвета можно показывать логическое состояние объекта. 

  • Текущее состояние, например, включена ли кнопка или нет.
  • Изменённое состояние.

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

Покажите взаимодействия

Для этого используйте яркие цвета по отношению к основному контенту.

Отметьте выбор пользователя

Для этого используйте яркие цвета по отношению к основному контенту.