1. Введение
Последнее обновление: 18.04.22
Приложения могут использовать множество цветов из базовых схем, динамических цветов, созданных пользователем, или фирменных цветов.
В предыдущей лаборатории цветов Material You изучалось, как визуализировать динамические цвета в макетах дизайна, но вы также можете использовать темы Material, чтобы настроить свое приложение с цветами вашего бренда. Использование новой цветовой системы с цветами вашего бренда создаст доступную цветовую схему, которая может иметь более динамичные функции!
Что вы узнаете
- Как создать собственную тему с помощью конструктора тем Material.
- Применение пользовательской темы для создания макетов.
- Возможности комбинирования динамических и пользовательских цветов.
Предварительные условия
В этой лабораторной работе мы будем опираться на некоторые фундаментальные концепции дизайна.
- Знание основополагающих концепций дизайна: цветовых палитр.
- Знание текущих цветовых схем и ролей Android.
- Знание Фигмы
- Необязательно: визуализация динамического цвета в кодовой лаборатории вашего приложения.
Что вам понадобится
- Аккаунт Фигмы
- Файл Figma Designlab
- Плагин Figma Material Theme Builder
2. Начните работу
Настраивать
Для начала вам необходимо получить доступ к файлу Designlab Figma. Все, что вам нужно для лаборатории, находится в файле Figma. Вы можете скачать и импортировать файл или продублировать его из сообщества Figma.
Сначала войдите в Figma или создайте учетную запись .
Дубликат из сообщества Figma
Перейдите к файлу настройки материала или найдите «Визуализация динамического цвета» в своем приложении с помощью Material Design в сообществе Figma . Нажмите «Дублировать» в правом верхнем углу, чтобы скопировать файл в свои файлы.
Макет файла
Просматривая файл, обратите внимание, что он самодостаточен, начиная с введения. Каждый раздел разделен на ряд артбордов, связанных между собой, с некоторыми основными концепциями раздела, за которыми следуют упражнения. Разделы и упражнения дополняют друг друга и должны выполняться последовательно.
В этой кодовой лаборатории вы более подробно ознакомитесь с этими концепциями и упражнениями. Прочтите кодовую лабораторию, чтобы узнать больше о новых функциях Material You!
Начиная с артборда Intro , есть кнопки, которые связывают артборды вместе по порядку. Чтобы перейти по ссылке, нажмите кнопку.
Установите плагин Фигмы.
Эта кодовая лаборатория в значительной степени опирается на новый плагин Figma для создания динамических цветовых схем и токенов. Установите плагин Figma прямо со страницы сообщества Figma или найдите «Material Theme Builder» в сообществе Figma.
3. Цветовая гамма материала.
Сначала обзор того, как цвет используется в Материале и как работает новая цветовая система.
Цвет используется для выражения стиля и передачи значения, независимо от того, является ли это значение личным для пользователя, брендинговым или семантическим значением. Цветовая система обрабатывает изменчивость динамически изменяющихся цветовых схем, возникающих при изменении вводимых пользователем данных. Логика тональных отношений и сдвиги оттенков и цветности обеспечивают основу для гибкого применения цвета.
Цветовое пространство позволяет создавать доступные светлые и темные цветовые схемы, извлеченные из исходного цвета, путем создания 5 ключевых цветов, а затем тоновых палитр, в которых выбираются определенные тональные ступени.
Этот метод изменения цвета не только обеспечивает доступную цветовую схему, но и предоставляет методы для создания фирменных схем, которые доступны и связаны с цветовыми схемами, созданными пользователем.
Цветовые схемы генерируются из 5 ключевых цветов в тональные палитры для создания доступных схем.
Фирменная тема
M3 поддерживает систематическое применение пользовательских параметров, помогающих определять и поддерживать стили, передающие ваш бренд.
Пользовательская схема — это цветовая схема, созданная не на основе обоев устройства пользователя, а создателем приложения. Цветовая система M3 и пользовательские схемы являются основой для обеспечения динамического цвета в приложениях.
Пользовательская схема устранит разрыв между M2 и M3, упростит миграцию путем настройки необходимых токенов (цветных слотов) и создаст более фирменный опыт.
Добавление фирменных цветов в конструктор тем материалов
4. Цветовая гамма: акцентные цвета.
Основой цветовой гаммы является набор из пяти ключевых цветов, которые индивидуально относятся к отдельным тональным палитрам, состоящим из 13 тонов. Определенные тона из каждой тоновой палитры назначаются цветовым ролям в пользовательском интерфейсе. Давайте начнем с открытия плагина Material Theme Builder и настройки нашего первого акцентного цвета: Primary .
Если вы введете только основной цвет, он будет использоваться в качестве источника для создания всей цветовой схемы.
- В модальном окне плагина нажмите «Пользовательский». Это переключит тему на пользовательскую тему. Для этой лабораторной работы мы будем использовать уже созданную тему материала, но при желании можно создать и новую тему. Узнайте больше о визуализации динамического цвета .
- Далее мы установим цвет первичного ключа. Основным может быть основной цвет вашего бренда или основной акцентный цвет, который используется чаще всего. Остальные ключевые цвета будут заполнены на основе основного цвета. Это означает, что нет необходимости добавлять дополнительные цвета, если у вас нет в них необходимости.
5. Создайте остальную часть темы
Основной используется для создания темы, но у вас могут быть акцентные цвета для поддержки основного цвета бренда.
- В модальном окне плагина добавьте дополнительный цвет, щелкнув поле «Вторичный цвет». Второстепенные роли используются для менее заметных компонентов пользовательского интерфейса, одновременно расширяя возможности цветового выражения. Вторичный цвет будет обновлен в цветовой схеме и пользовательском интерфейсе приложения.
- Сделайте то же самое для третичного уровня. Третичные роли используются для контрастных акцентов, которые можно использовать, чтобы сбалансировать первичные и вторичные цвета или привлечь повышенное внимание к элементу. Роль третичного цвета оставлена на усмотрение производителей и предназначена для поддержки более широкого цветового выражения в продуктах.
- Теперь для поверхностей и фона используются нейтральные, нейтральные роли, а также выделенный текст и значки.
Обеспечьте вторичный, третичный и нейтральный цвет, чтобы полностью настроить цветовую схему.
Цвета вашего бренда теперь будут включены в основную цветовую схему, сдвинутую в соответствии с цветовым пространством M3, полностью доступными, а также возможностью экспорта и реализации в коде в виде темы.
6. Применение вашей темы
Роли и токены
Каждый акцентный цвет ( первичный , вторичный и третичный ) представлен в группе из четырех совместимых цветов разных тонов для сочетания, определения акцента и визуального выражения. Группа состоит из акцентного цвета, цвета, контейнера и контейнера.
Нейтральные роли используются для поверхностей и фона, а также выделенного текста и значков.
Токены дизайна представляют собой небольшие повторяющиеся дизайнерские решения, составляющие визуальный стиль системы дизайна. Токены заменяют статические значения, такие как шестнадцатеричные коды цвета, понятными именами. Токены дизайна осмысленно связывают выбор стиля, который в противном случае не имел бы четкой взаимосвязи.
Плагин Figma создает токены и вводит ваши собственные исходные цвета в виде стилей Figma для связи с существующими макетами, руководствами по фирменному стилю и даже системами дизайна.
Токены дизайна создают общий язык между цветовыми ролями и реализацией.
Иерархия цветов
Применяя цветовые роли к макетам, учитывайте порядок важности или иерархию ваших элементов. Эта концепция поможет назначить цвета бренда соответствующим ролям, а также отобразить их в пользовательском интерфейсе. Обычно более насыщенные или концентрированные цвета в первую очередь привлекают внимание пользователя, поэтому роль основного цвета отображает компоненты, которые больше ориентированы на призыв к действию. В то время как Material Theme Builder использует цветовую систему M3 для создания соответствующих цветов, предоставление вторичных или третичных цветов с более высокой насыщенностью приведет к созданию цветов, которые затмят их основные. Учитывайте порядок, в котором вы хотите, чтобы ваши пользователи взаимодействовали с пользовательским интерфейсом и содержимым, чтобы облегчить назначение цветовых ролей. Не все компоненты должны использовать основной.
Сплошной насыщенный цвет привлекает больше всего внимания.
7. Переключиться на тему
Чтобы применить созданную вами пользовательскую тему к вашим проектам, нам нужно установить в макете токены в существующей теме материала.
Компоненты материалов поставляются с предварительно сопоставленными ролями и автоматически работают с конструктором тем материалов.
Переключитесь на тему из модального окна Material Theme Builder.
- Давайте установим все токены (стили Figma) в макете справа, чтобы использовать эту тему, выбрав фрейм макета и нажав кнопку «Поменять». Вы увидите обновление префикса стиля в выделенных цветах.
- Не все обновлено? Пользовательские компоненты, такие как карточка с советами по уходу за растениями, сначала должны будут применить стиль Figma. Выберите контейнер для советов по уходу, выбрав контейнер, щелкните значок с четырьмя точками, чтобы назначить стиль, выберите третичный контейнер . Сделайте то же самое с содержимым карточки с советами по уходу, но назначьте контейнер для третичного уровня . Маленькие метки в списке также являются пользовательскими компонентами, но мы вернемся к ним позже!
- Компоненты Material Design используют сопоставления по умолчанию, но вы можете поэкспериментировать с назначением стилей, чтобы они лучше соответствовали пользовательскому интерфейсу. Найдите минутку, чтобы поиграть с различными цветовыми иерархиями и выражением бренда.
(В файл экспорта кода включена только тема. Если вы работаете с инженером, поделитесь макетами для передачи сопоставлений токенов, поскольку они не будут включены в экспорт)
При открытии плагина без темы появится экран настройки для начала работы. «Начало» создаст базовую тему «material-theme» по умолчанию в виде группы стилей Figma для подключения к вашим макетам или использования с комплектом Material Design.
8. Выход за рамки основной схемы
Теперь у вас есть фирменная цветовая тема, сопоставленная с компонентами и макетом дизайна, но, возможно, вам придется включить дополнительные цвета. Именно здесь на помощь приходит расширенная схема, позволяющая добавлять собственные цвета.
Это могут быть семантические цвета, цвета, специфичные для бренда или даже цвета, специфичные для продукта, которым необходимо назначить роли и изменить их с помощью цветового алгоритма или оставить введенными.
Расширенная цветовая схема также предоставляет возможность сочетания динамических (генерируемых пользователем) цветов с цветами вашего бренда. Позвольте основной схеме оказывать персонализированное влияние на пользователя, а цвета бренда задаются в расширенной схеме. Это означает, что элементы пользовательского интерфейса могут быть более личными для ваших пользователей, а цвета вашего бренда могут иметь более точное воздействие на приложение.
Базовую схему можно расширить, включив в нее пользовательские цвета. 
9. Расширение и настройка
Расширение схемы пользовательскими цветами позволяет добавлять такие цвета, как семантические или дополнительные цвета фирменного оформления.
Пользовательская схема с добавлением собственных цветов.
- В модальном окне плагина под ключевыми цветами нажмите « Добавить цвет» .
- Текущая тема обновится новой строкой Custom0. Обновите этот цвет, щелкнув по цвету и выберите новый цвет.
- Эти расширенные цвета можно найти как стиль в стилях, доступных только для чтения, как Custom0 . Их тональная палитра и схема присутствуют. Давайте сопоставим некоторые метки списка с новым цветом, выбрав фон метки и назначив одну из ролей добавленного цвета (контейнер on-custom0).
Установка пользовательского цвета в выбранных цветах.
- Конструктор тем материалов автоматически генерирует цвета как Custom#. Чтобы переименовать добавленный пользовательский цвет, разверните группу стилей темы на панели стилей (она будет отображаться, когда ничего не выбрано). Затем найдите Custom0 в исходной подгруппе. Переименование источника здесь приведет к переименованию цвета в модальном окне плагина.
Пользовательские цветовые стили можно найти на панели стилей.
- Удаление добавленного цвета можно выполнить аналогичным образом, щелкнув правой кнопкой мыши и удалив стиль. При следующем открытии плагина добавленный цвет будет удален. Переименование и удаление могут не отображаться на цветовой схеме.
10. Поздравления
Отличная работа по изучению того, как создавать собственную цветовую тему с помощью Material Theme Builder, применять ее для разработки макетов и добавлять в цветовую схему. Новая цветовая система Material 3 обеспечивает доступность, гибкость и связность цветов в дизайне, и нам не терпится увидеть, как вы их используете!
Если у вас есть вопросы, задавайте их нам в любое время, используя @MaterialDesign в Твиттере .
Оставайтесь с нами, чтобы увидеть больше материалов и руководств по дизайну на youtube.com/MaterialDesign.