Эта страница переведена с помощью Cloud Translation API.

Настройка цвета материала

1. Введение

Последнее обновление: 18.04.22

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

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

Что вы узнаете

Как создать собственную тему с помощью конструктора тем Material.
Применение пользовательской темы к макетам дизайна.
Возможности сочетания динамических и пользовательских цветов.

Предварительные требования

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

Знание основных концепций дизайна: цветовые палитры.
Знание современных цветовых схем и ролей Android.
Знание Figma
Дополнительно: Визуализация динамического цвета в вашем приложении (codelab)

Что вам понадобится

2. Начните

Настраивать

Для начала вам потребуется доступ к файлу Figma из Designlab. Все необходимое для работы находится в этом файле Figma. Вы можете либо скачать и импортировать файл, либо скопировать его из сообщества Figma.

Сначала войдите в Figma или создайте учетную запись .

Дубликат из сообщества Figma

Перейдите к файлу «Настройка Material Design» или найдите в сообществе Figma « Визуализация динамического цвета в вашем приложении с помощью Material Design». Нажмите «Дублировать» в правом верхнем углу, чтобы скопировать файл в свою папку.

Структура файла

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

Этот практический курс поможет вам более подробно разобраться в этих концепциях и выполнить упражнения. Читайте вместе с курсом, чтобы узнать больше о новых функциях Material You!

Начиная с монтажной области «Вступление» , расположены кнопки, которые последовательно связывают монтажные области между собой. Чтобы получить доступ к ссылке, нажмите на кнопку.

Установите плагин Figma.

В этом практическом занятии активно используется новый плагин Figma для генерации динамических цветовых схем и токенов. Установите плагин Figma непосредственно со страницы сообщества Figma или найдите "Material Theme Builder" в сообществе Figma.

3. Цветовая гамма материала

Сначала краткий обзор того, как цвет используется в Material Design и как работает новая цветовая система.

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

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

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

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

Фирменная тема

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

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

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

Добавление фирменных цветов в конструктор тем Material Theme.

4. Цветовая гамма: Акцентные цвета

Основой цветовой схемы является набор из пяти ключевых цветов, каждый из которых соответствует отдельной тональной палитре, состоящей из 13 оттенков. Конкретные оттенки из каждой тональной палитры назначаются определенным цветовым ролям в пользовательском интерфейсе. Давайте начнем с открытия плагина Material Theme Builder и настройки нашего первого акцентного цвета: Primary .

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

В модальном окне плагина нажмите «Пользовательская». Это переключит тему на пользовательскую. Для этой лабораторной работы мы будем использовать уже сгенерированную тему material-theme, но при желании можно создать и новую тему; подробнее об этом можно узнать в разделе «Визуализация динамического цвета» .
Далее мы зададим основной ключевой цвет. В качестве основного цвета может выступать ваш главный фирменный цвет или наиболее часто используемый акцентный цвет. Остальные ключевые цвета будут автоматически подбираться на основе основного цвета. Это означает, что нет необходимости добавлять дополнительные цвета, если они вам не нужны.

5. Создайте остальную часть темы.

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

В модальном окне плагина добавьте дополнительный цвет, щелкнув по полю «Дополнительный цвет». Дополнительные роли используются для менее заметных компонентов пользовательского интерфейса, расширяя при этом возможности для выражения цвета. Дополнительный цвет обновится в цветовой схеме и пользовательском интерфейсе приложения.
То же самое относится и к третичным цветам. Третичные цвета используются для создания контрастных акцентов, которые могут уравновешивать основные и второстепенные цвета или привлекать дополнительное внимание к элементу. Использование третичных цветов остается на усмотрение производителей и призвано способствовать более широкому выражению цветовой палитры в продукции.
Теперь нейтральные цвета используются для поверхностей и фонов, а текст и значки — для выделения.

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

Теперь фирменные цвета вашего бренда будут включены в основную цветовую схему, смещенную в соответствии с цветовым пространством M3, будут полностью доступны и смогут экспортироваться и внедряться в код в качестве темы.

6. Применение выбранной темы

Роли и токены

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

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

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

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

Дизайнерские токены создают общий язык между цветовыми ролями и их реализацией.

Цветовая иерархия

При назначении цветовых ролей вашим макетам учитывайте порядок важности или иерархию элементов. Эта концепция поможет присвоить фирменные цвета соответствующим ролям, а также отобразить их в пользовательском интерфейсе. Как правило, более насыщенные или концентрированные цвета привлекают внимание пользователя в первую очередь, поэтому роль основного цвета назначается компонентам, ориентированным на призывы к действию. Хотя Material Theme Builder использует цветовую систему M3 для генерации подходящих цветов, использование вторичных или третичных цветов с более высокой насыщенностью создаст цвета, которые будут затмевать основной цвет. Учитывайте порядок взаимодействия пользователей с элементами пользовательского интерфейса и контентом, чтобы правильно назначить цветовые роли; не все компоненты должны использовать роль основного цвета.

Насыщенный, сплошной цвет привлекает наибольшее внимание.

7. Переключиться на тему

Чтобы применить созданную вами пользовательскую тему к вашим проектам, нам потребуется установить в качестве макета токены из существующей темы Material Design.

Компоненты Material Design поставляются с предварительно назначенными ролями и будут автоматически работать с Material Theme Builder.

Переключитесь на другую тему в модальном окне Material Theme Builder.

Чтобы использовать эту тему, давайте переместим все токены (стили Figma) в макете вправо, выделив рамку макета и нажав «Поменять местами». Вы увидите, как префикс стиля обновится в цветах выделения.
Не все обновлено? Пользовательские компоненты, такие как карточка с советами по уходу за растением, сначала необходимо адаптировать под стиль Figma. Выберите контейнер с советами по уходу, после выбора контейнера нажмите на значок с четырьмя точками, чтобы назначить стиль, выберите «третичный контейнер» . Сделайте то же самое с содержимым карточки с советами по уходу, но назначьте стиль для третичного контейнера . Маленькие метки в списке также являются пользовательскими компонентами, но мы вернемся к ним позже!
Компоненты Material Design используют стандартные настройки отображения, но вы можете поэкспериментировать с назначением стилей, чтобы наилучшим образом адаптировать их к пользовательскому интерфейсу. Уделите немного времени, чтобы поэкспериментировать с различными цветовыми иерархиями и фирменным стилем.

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

При открытии плагина без выбранной темы отобразится экран настройки для начала работы. Нажатие кнопки «Начать» сгенерирует базовую тему по умолчанию «material-theme» в виде группы стилей Figma, которую можно подключить к вашим макетам или использовать с набором Material Design.

8. Выход за рамки основной схемы

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

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

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

Базовую цветовую схему можно расширить, включив в нее пользовательские цвета.

9. Расширение и настройка

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

Пользовательская схема с добавленными пользовательскими цветами.

В модальном окне плагина, в разделе основных цветов, нажмите «Добавить цвет» .
Текущая тема обновится, добавив новую строку Custom0. Измените этот цвет, щелкнув по цветовому полю и выбрав новый цвет.
Эти расширенные цвета можно найти в качестве стиля в стилях только для чтения под названием Custom0 . Их тональная палитра и схема присутствуют. Давайте сопоставим некоторые метки списка с новым цветом, выбрав фон метки и назначив одну из ролей добавленного цвета (контейнер on-custom0).

Настройка пользовательского цвета в выбранных цветовых решениях.

В Material Theme Builder цвета автоматически генерируются как Custom#. Чтобы переименовать добавленный пользовательский цвет, разверните группу стилей темы на панели стилей (она появится, когда ничего не выбрано). Затем найдите Custom0 в подгруппе источников. Переименование источника здесь переименует цвет в модальном окне плагина.

Пользовательские цветовые стили можно найти на панели стилей.

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

10. Поздравляем!

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

Если у вас возникнут вопросы, не стесняйтесь задавать их нам в любое время, используя @MaterialDesign в Твиттере .

Следите за обновлениями и новыми обучающими материалами по дизайну на youtube.com/MaterialDesign