Цветовая система Wear Material 3 Expressive использует три акцентных слоя (первичный, вторичный, третичный) для ключевых компонентов и два нейтральных поверхностных слоя. Каждая роль предлагает ряд значений с постоянным контрастом, что позволяет создавать выразительные, но доступные цветовые комбинации для единого опыта в любой теме.
Что такое цветовые роли?
Цветовые роли подобны «числам» на холсте с раскрашиванием по номерам. Они являются соединительной тканью между элементами пользовательского интерфейса и определяют, какой цвет куда следует наносить.
- Цветовые роли сопоставлены с компонентами Material: вы будете использовать эти цветовые роли, независимо от того, используете ли вы статическую базовую схему или динамический цвет. Если ваш продукт содержит пользовательские компоненты, их необходимо правильно сопоставить с этим набором цветовых ролей.
- Цветовые роли поддерживают доступность: Цветовая система построена на более доступных цветовых парах. Эти цветовые пары обеспечивают цветовой контраст минимум 3:1.
- Цветовые роли токенизированы: Роли реализуются в дизайне и коде через токены. Токен дизайна представляет собой небольшое, повторно используемое решение дизайна, которое является частью визуального стиля системы дизайна.
Основные термины
Вот ключевые термины, которые вы увидите в названиях цветовых ролей:
- Поверхность: роль, используемая для фона и больших, слабо акцентированных областей экрана.
- Первичный, вторичный, третичный: акцентные цветовые роли, используемые для подчеркивания или затемнения элементов переднего плана.
- Контейнер: Роли, используемые в качестве цвета заливки для элементов переднего плана, таких как кнопки. Их не следует использовать для текста или иконок.
- On: Роли, начинающиеся с этого термина, указывают цвет для текста или иконок поверх его парного родительского цвета. Например, on primary используется для текста и иконок против основного цвета заливки.
- Вариант: Роли, заканчивающиеся этим термином, предлагают менее акцентированную альтернативу своей невариантной паре. Например, вариант контура — это менее акцентированная версия цвета контура.
Основные роли
Основные роли используются для ключевых компонентов пользовательского интерфейса, таких как кнопки Edge Hugging, выступающие кнопки, активные состояния и значки в тональных стилях кнопок.
Начальный
- Начальный
- На-основном
Используйте роль Primary для самых важных действий в пользовательском интерфейсе, таких как основные кнопки или призывы к действию. Этот цвет должен выделяться и быть мгновенно узнаваемым, чтобы направлять пользователя к ключевым взаимодействиям.
Первичный-Dim
- Первичный-Dim
- На-основном
Роли Dim обычно используются для элементов, которые должны визуально отличаться от основного действия, но не требуют немедленного внимания или взаимодействия пользователя.
Первичный контейнер
- Первичный контейнер
- На первичном контейнере
Применяйте Primary Container для фоновых элементов, таких как карточки или модальные окна, чтобы выделить разделы или выбранные состояния. Это помогает привлечь внимание к важному контенту или текущим действиям в пользовательском интерфейсе.
Второстепенные роли
Вторичные роли используются для ключевых компонентов в пользовательском интерфейсе, которые не так важны, как основная роль, но все равно должны выделяться. Первичные и вторичные роли могут использоваться вместе в макетах для создания дифференциации и фокусировки.
Вторичный
- Вторичный
- На-Вторичном
Используйте роль Secondary для поддержки действий в областях с плотным пользовательским интерфейсом, таких как вторичные кнопки или дополнительные действия. Она поддерживает видимость, не затмевая основные элементы в сложных макетах.
Вторичный-Dim
- Вторичный-Dim
- Вторичный
Роль Secondary-Dim обеспечивает приглушенный контраст для пассивных элементов в плотных областях. Она дополняет вторичный цвет, добавляя тонкую глубину, сохраняя чистоту пользовательского интерфейса и помогая пользователям ориентироваться.
Вторичный контейнер
- Вторичный контейнер
- На вторичном контейнере
Применяйте Secondary-Container для организации вторичных элементов в плотных макетах. Он создает структуру и разделение, гарантируя, что вторичный контент будет различимым, но не доминирующим.
Третичные роли
Третичные роли используются для контрастных акцентов, чтобы сбалансировать основные и вторичные цвета или привлечь повышенное внимание к элементу, такому как поле ввода. Третичные роли также могут помочь указать, когда содержимое меняется или должно выделяться, например, когда цель достигнута.
Третичный
- Третичный
- На-третичный
Третичная роль используется для привлечения внимания к ключевым элементам. Третичные роли особенно эффективны для компонентов, которые должны выделяться, таких как значки, наклейки или элементы специального действия.
Третичный-Dim
- Третичный-Dim
- Третичный
Используйте роль «Третичная яркость» для кнопок или действий, которые связаны с третичными действиями, но не требуют немедленного фокуса.
Третичный контейнер
- Третичный контейнер
- На-третичном-контейнере
Применяйте Tertiary-Container для фонов, которые группируют контент, связанный с третичным, например, коллекции значков или наклеек. Он подчеркивает третичные элементы, сохраняя при этом баланс и структуру в пользовательском интерфейсе.
Семантические роли
Error-Red используется для обозначения критических проблем, таких как ошибка, удаление и все, что связано с чрезвычайной ситуацией. Он предназначен для немедленного привлечения внимания к проблемам или предупреждениям, гарантируя пользователям возможность быстро определить области, требующие корректирующих действий. Тон Error-Red должен сохранять достаточный контраст с фоном, чтобы соответствовать стандартам доступности, гарантируя, что он будет четко виден и отличим от других цветов статуса, таких как предупреждения или сообщения об успешном выполнении.
Ошибка
- Ошибка
- On-Error
Семантический, но слегка окрашенный в тему красный, который обозначает действия по удалению, удалению, закрытию или отклонению, такие как «Проведите для показа». Добавлен в качестве альтернативы контейнеру, которая немного менее тревожна и срочна, чем цвет с тусклым от ошибок цветом.
Ошибка-Dim
- Ошибка-Dim
- On-Error
Семантический, но слегка тематически окрашенный красный цвет, который указывает на высокоприоритетные ошибки или экстренные действия, такие как предупреждения о безопасности, сбойные диалоговые окна или кнопки остановки.
Ошибка-Контейнер
- Ошибка-Контейнер
- On-Error-Container
Менее заметный цвет контейнера для компонентов, использующих состояние ошибки. Может также указывать на активное состояние ошибки, которое кажется менее интерактивным, чем заполненное состояние, например, активная кнопка или карта экстренного обмена или на неисправном диалоговом окне наложения.
Наземные контейнеры и возвышения
Поверхностные контейнеры играют ключевую роль в определении глубины и высоты в пользовательском интерфейсе, обеспечивая структуру и иерархию посредством цвета, помогая различать компоненты на основе их важности и взаимодействия.
Поверхность-Контейнер-Низкий
- Поверхность-Контейнер-Низкий
- На поверхности
- Вариант на поверхности
Отлично подходит для расширенного контейнера, который должен располагаться ниже Surface-Container, например, расширенная карточка в Notification. Также может использоваться для неинтерактивных карточек, где содержимое все еще выигрывает от сдерживания.
Поверхность-Контейнер
- Поверхность-Контейнер
- На поверхности
- Вариант на поверхности
Цвет контейнера по умолчанию для большинства элементов. Он обеспечивает нейтральный, умеренный подъем, что делает его подходящим для общих компонентов пользовательского интерфейса.
Поверхность-Контейнер-Высокий
- Поверхность-Контейнер-Высокий
- На поверхности
- Вариант на поверхности
Идеально подходит для компонентов с высоким акцентом, которые должны располагаться поверх или в сочетании с Surface-Container. Этот цвет помогает сфокусироваться и создать иерархию в критических областях пользовательского интерфейса.