1. Введение
Последнее обновление: 21.09.21
Приложения могут использовать самые разнообразные цвета: от базовых цветовых схем и динамических цветов, созданных пользователями, до фирменных цветов.
Приготовьтесь погрузиться в новые динамические цветовые возможности, представленные в Material You. В этом практическом занятии вы создадите динамические цветовые палитры, чтобы узнать, как работает система цветов, основные концепции создания доступных цветовых палитр и методы визуализации вашего приложения с использованием динамических цветов с помощью новейших инструментов дизайна.
Что вы узнаете
- Что нового в цветовом оформлении Material Design?
- Как применить созданный пользователем цвет к вашему приложению
- Инструменты для помощи
Предварительные требования
В этой лабораторной работе мы будем опираться на некоторые основополагающие концепции проектирования.
- Знание основных концепций дизайна: цветовые палитры.
- Знание современных цветовых схем и ролей Android.
- Знание Figma
Что вам понадобится
2. Начните
Настраивать
Для начала вам потребуется получить доступ к файлу Figma из Designlab. Все необходимое для работы находится в этом файле Figma. Вы можете либо скачать и импортировать файл, либо скопировать его из сообщества Figma.
Сначала войдите в Figma или создайте учетную запись .
Дубликат из сообщества Figma
Перейдите к файлу «Визуализация динамического цвета в вашем приложении с помощью Material Design» или найдите «Визуализация динамического цвета в вашем приложении с помощью Material Design» в сообществе Figma . Нажмите «Дублировать» в правом верхнем углу, чтобы скопировать файл в вашу папку файлов.
Структура файла
Осмотрите файл. Вы заметите, что он самодостаточен и начинается с введения. Каждый раздел разделён на ряд связанных между собой монтажных областей, содержащих основные концепции раздела, за которыми следуют упражнения. Разделы и упражнения взаимосвязаны, поэтому их следует выполнять последовательно.
Этот практический курс поможет вам более подробно разобраться в этих концепциях и выполнить упражнения. Я рекомендую читать материалы параллельно с практическим курсом, чтобы узнать больше о новых функциях Material You.
Начиная с монтажной области «Вступление» , есть кнопки, которые последовательно связывают монтажные области между собой; чтобы перейти к ссылке, нажмите на соответствующую кнопку.
Установите плагин Figma.
В этом практическом занятии активно используется новый плагин Figma для генерации динамических цветовых схем и токенов. Установите плагин Figma непосредственно со страницы сообщества Figma или найдите "Material Theme Builder" в сообществе Figma.
3. Цветовые концепции
Что такое динамический цвет?
Material You переосмысливает цвет как более индивидуальный опыт. Благодаря динамическому извлечению цвета, диапазон возможных цветовых решений значительно расширяется.
Динамическая цветокоррекция — ключевая функция Material You, в которой алгоритм подбирает пользовательские цвета на основе обоев пользователя для применения в его приложениях и системном интерфейсе.
Яркость
Динамическая цветопередача разработана для работы в непредсказуемых условиях. Для управления коэффициентами контрастности в различных условиях просмотра ключевым параметром являются уровни яркости, которые позволяют цветам успешно сочетаться даже без тестирования каждой конкретной цветовой комбинации командой разработчиков.
Элементы с одинаковой яркостью не будут иметь достаточного контраста для читаемости, в то время как элементы с разными значениями яркости будут более различимы.
Тональные палитры
Тональная палитра — это преобразование одного оттенка (динамически выделенного цвета) в спектр связанных тонов. Преобразование цвета в тринадцать тонов позволяет использовать группу тональных диапазонов, называемую тональной палитрой, в различных контекстах, от отдельных элементов внутри компонента до целых тем оформления приложений.
Цвет, преобразованный в тональный диапазон.
4. Извлечение цветов
От посева до реализации проекта
Давайте посмотрим, как работает динамическая цветокоррекция в Material Theme Builder.
- Откройте Material Theme Builder. Выбрав параметр «Динамический» , перетащите изображение или выберите его из файлового браузера. Обратите внимание, что цвет фона будет обновляться в зависимости от изображения.
- Цветовые значения извлекаются из обоев и им присваивается «тип», определяющий, как цвет будет соотноситься с другими цветами в цветовой схеме. Эти «ключевые цвета» (справа) были обновлены в соответствии с этими значениями.
- Затем они преобразуются в тональные палитры на основе яркости, генерируя пять цветовых диапазонов с оттенками от светлого до темного. Тональные палитры обозначаются соответствующим образом в выходных данных цвета.
- Из пяти тональных диапазонов определенные тона (на основе яркости) распределяются по предопределенным ролям, составляющим схему. Цвета сопоставляются со схемой с помощью дизайнерских токенов.
Третичные цветовые роли создаются на основе третичного тонального диапазона и сопоставляются с компонентами.
5. Темы и токены
Дизайнерские токены обеспечивают гибкость и согласованность в рамках продукта, позволяя дизайнерам, например, назначать цветовую роль элемента в пользовательском интерфейсе, а не фиксированное значение. Токены выступают в качестве связующего звена между назначенной ролью элемента и выбранным значением цвета для этой роли. С появлением динамического цвета проектирование с учетом роли цвета, а не конкретного цвета, становится более фундаментальным.
Темы оформления содержат токены Material Design для цвета и шрифта, что гарантирует наличие единого источника достоверной информации для дизайна и кода, представляющего базовый стиль, наряду с созданными пользователями палитрами и пользовательскими значениями.
В Figma плагин генерирует эти токены как стили, то есть при использовании сгенерированных стилей вы будете использовать токены MD.
Цвета в тональной палитре сопоставляются со светлой или темной цветовой гаммой с помощью дизайнерских меток.
Система сопоставления присваивает каждому элементу в компоненте свой тон.
Настройка токенов
Чтобы применить динамический цвет к вашим проектам, нам потребуется установить для макета токены из существующей темы Material Design.
- Чтобы использовать эту тему, давайте переместим все токены (стили Figma) в макете вправо, выделив рамку макета и нажав «Поменять местами» . Вы увидите, как префикс стиля обновится в цветах выделения.
Нажмите кнопку "Поменять местами", чтобы обновить связанную тему, используемую в выбранном дизайне.
- Теперь перетащите изображение или выберите его в файловом браузере. Значения макета примут динамический цвет, извлеченный из изображения.
- Нажмите кнопку «Перемешать», это позволит случайным образом выбрать исходный цвет для экстраполяции, а не извлекать его из изображения. Это еще один способ быстро увидеть, как динамический цвет может влиять на ваши макеты дизайна.
Нажатие кнопки «Перемешать» позволяет случайным образом выбрать цвет начального значения.
При открытии плагина без темы отобразится экран настройки для начала работы. Нажатие кнопки «Начать» сгенерирует базовую тему по умолчанию «material-theme» в виде группы стилей Figma, которую можно подключить к вашим макетам или использовать с набором Material Design.
6. Подача заявления в UI (Университет Иллинойса)
Представленные макеты были созданы с помощью Material Design Kit, который использует токены Material Design, но некоторые пользовательские элементы не сопоставлены.
- Выберите карточки статей. В поле заливки установите стиль (значок из четырех точек) на material-theme/surface . (Вы также можете выполнить поиск по слову surface).
- Аналогичным образом выберите тип на карточках, установите значение «на поверхности» , а флажки — «основной».
Стили Figma, использованные в дизайне карточек.
Далее мы создадим дополнительные макеты для итерации по остальным схемам.
Создавайте темы и дорабатывайте их.
Теперь мы полностью связали макет для визуализации динамического цвета, но мы также можем создать несколько тем и переключать их на отдельных макетах, чтобы одновременно визуализировать целый ряд динамических цветов.
- В модальном окне плагина щелкните раскрывающийся список и выберите «Добавить новую тему ».
- Создайте уникальное название темы и нажмите «Создать тему ». Это также сгенерирует новые цветовые схемы для каждой созданной темы.
Добавление новой темы через выпадающее меню.
- Добавьте изображение или перемешайте цвет семян.
- В модальном окне плагина выберите макет (компонент пользовательского интерфейса приложения) и нажмите «Поменять местами» . Это обновит значения стилей в соответствии с текущей темой, отображаемой в выпадающем списке.
- Скопируйте макет (CMD + D).
Нажмите кнопку "Поменять местами", чтобы обновить связанную тему, используемую в выбранном дизайне.
- Повторите шаги 1–5.
Теперь у вас есть несколько вариантов дизайна с различными динамическими цветовыми решениями!
7. Поздравляем!
Отличная работа по изучению и применению динамических цветов! Material Theme Builder поможет вам упростить работу с цветом в Material Design, визуализируя динамические цвета, создавая пользовательские темы и экспортируя их в код.
Если у вас возникнут вопросы, не стесняйтесь задавать их нам в любое время, используя @MaterialDesign в Твиттере .
Следите за обновлениями и новыми обучающими материалами по дизайну на youtube.com/MaterialDesign