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

Цветовая схема помогает создавать дизайн отражающий ваш бренд или стиль.

Применение цвета и палитры

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

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

  1. Первичный цвет.
  2. Вторичный цвет.
  3. Оттенки.

Принципы

Иерархия

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

Читаемость

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

Выразительность

Уместно используйте цвет для усиления бренда.

Основной цвет

Основной цвет используется наиболее часто в вашем дизайне.

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

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

В этом интерфейсе используется только основной цвет.

Вторичный цвет

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

Вторичный цвет лучше всего подходит для:

  • кнопок действия;
  • переключателей;
  • подсветки текста;
  • прогресс-баров;
  • ссылок и заголовков.

Как и основной цвет, вторичный цвет может иметь тёмные и светлые оттенки.

В этом интерфейсе используется основной и вторичный цвет.

Цвет фона, поверхности и ошибок

Обычно эти цвета не усиливают бренд.

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

Фоновый цвет остаётся за содержимым, по умолчанию это #FFFFFF.

Цвет ошибок акцентирует внимание на ошибках, например, при вводе в текстовое поле. По умолчанию это #B00020

Стандартные цвета материального дизайна.

Цвет в типографике и иконографике

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

Значения по умолчанию для этих цветов: #FFFFFF и #000000.

Стандартные цвета для типографики и иконографики.

Доступность

Галочки указывают, является ли цвет текста разборчивым перед фоном:

  • Белая галочка указывает, когда белый текст разборчив на фоне цвета.
  • Черная галочка указывает, когда черный текст разборчив на цвет фона.

В этом примере белый цвет хорошо читается на цветном фоне.

В этом примере чёрный цвет хорошо читается на цветном фоне.

Альтернативные цвета

В материальном дизайне можно использовать альтернативные цвета, вместо основных и второстепенных.

Альтернативные цвета лучше всего подходят для:

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

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

Альтернативные цвета можно использовать для оформления различных частей приложения.

Жёлтый используется в качестве основного цвета на главном экране.

Синий используется в качестве основного цвета для экрана личной учётной записи.

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

Дополнительные цвета для визуализации данных

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

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

  1. Раздел «Счета» использует зеленый.
  2. Раздел «Вексель» использует оранжевый и жёлтый.
  3. Раздел «Бюджет» использует фиолетовый и синий.