Материальный дизайн — использование цвета в интерфейсе

Элементы интерфейса используют цвет последовательным и значимым образом.

Принципы

Последовательность

Цвет — часть интерфейса. Он должен дополнять бренд.

Заметность

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

Уместность

Цвет используют целенаправленно.

Панель приложения

Использование цвета к панелям приложения помогает пользователям идентифицировать их и понять их отношение к окружающим элементам.

Панели приложения используют основной цвет приложения. Системная панель использует тёмный вариант основного цвета для визуального отделения.

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

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

Когда цвет панели приложения совпадает с цветом фона, они смешиваются вместе, делая акцент на контенте, а не на его структуре.

При прокрутке панель получает тень, показывая, что её высота выше, чем содержимое, прокручиваемое за ней.

Яркий дизайн этого приложения использует основной цвет — синий 700 для панели, навигации и фона, поэтому эти элементы выделяются меньше, а содержимое выделяется больше. Активное состояние использует вторичный желтый 500 с дополнительной тенью в нижней части навигации, чтобы показать разделение высот между поверхностями.

Фон

Фон имеет передний и задний слой. Чтобы различать эти два слоя, базовый цвет заднего слоя это основной цвет, а базовый передний слой — белый.

Это приложение использует основной цвет (фиолетовый 800) на заднем слое фона. Вторичный цвет (красный 700) акцентирует внимание на стоимости перелета.

Это приложение использует основной цвет (розовый 100) для заднего слоя фона, вторичный цвет (розовый 50) используется на переднем слое.

Поверхность

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

  1. В этом дизайне используется основной цвет (фиолетовый 500) вместо базового белого.
  2. В этом дизайне навигация использует основной цвет (фиолетовый 500) вместо базового белого.

К поверхностям, которые временно отображаются на экране (модальные окна, выпадающая навигация) нужно применять контрастные цвета.

Это приложение использует основной цвет (синий 700) в нижнем блоке навигации и дополнительный цвет (оранжевый 500) для выбранных элементов.

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

Это приложение использует основной цвет (розовый 500) при нажатии на выпадающее меню.

Карточки

Базовый цвет для карточек — белый. Карточки могут использовать другой цвет для выражения бренда или улучшения разборчивости. Текст и значки внутри карточек также могут использовать другой цвет для улучшения разборчивости.

 

Карточки используют основной цвет (фиолетовый 500). Цвет фона — белый. Вторичный цвет (бирюзовый 200) используется для данных.

Карточки могут наследовать основной цвет для демонстрации выбора или важности.

Для улучшения читаемости текста и видимости иконок на поверхности изображений — используйте цвет.

Кнопки, чекбоксы, переключатели

Эти элементы можно выделить применив к к ним основой или вторичный цвет.

Основной цвет подходит для выделения любых кнопок, кроме фиксированных кнопок действия.

Дополнительный цвет подходит для выделения элементов управления (переключатели, чекбоксы…) и фиксированных кнопок действия.

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

Элементы управления используют вторичный цвет. Уведомление об ошибке использует заметный цвет.

Элементы управления используют вторичный цвет. Уведомление об ошибке слабо акцентирует внимание.

Фиксированная кнопка действия

Этот элемент должен быть самым заметным на экране. Цвет — основной инструмент для придания контраста. Если в приложении множество цветов, используйте монохроматическое окрашивание, что бы выделить элемент.

Вторичный цвет выделяет кнопку действия.

Монохромные цвета выделят кнопку действия на пёстром фоне.

Типографика и иконографика

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

Иерархия

Оранжевый цвет (вторичный) подчёркивает заголовки, а фиолетовый (первичный) — вкладки и кнопки.

Вторичный цвет (оранжевый 800) привлекает внимание к заголовкам.

Для изменения значимости в этом дизайне используется жирность текста.

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

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

Осторожно используйте вторичный цвет для основного контента.

Читаемость текста

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

Иконки

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

В этом дизайне основной цвет (зелёный 800) и вторичный (оранжевый 800) выделяют иконки на фоне.