1. Введение
Последнее обновление: 05.11.22
Система цветов Material 3 создает доступные цветовые схемы с помощью динамического алгоритма цветопередачи, но что означает доступность для цвета? Как новая система цветов Material Design создает доступную цветовую схему и какие инструменты в этом помогают?
Что вы узнаете
- Как цвет связан с принципами доступности и контрастности.
- Как инструменты могут помочь создать доступную цветовую схему, внести изменения и проверить контраст.
Предварительные требования
В этой лабораторной работе мы будем опираться на некоторые основополагающие концепции проектирования.
- Знание современных цветовых схем и ролей Android.
- Знание Figma.
Что вам понадобится
- Аккаунт Figma
- Файл Figma Designlab
- Плагин Figma Material Theme Builder
2. Начните
Настраивать
Для начала вам потребуется доступ к файлу Figma из Designlab. Все необходимое для работы находится в этом файле Figma. Вы можете либо скачать и импортировать файл, либо скопировать его из сообщества Figma.
Сначала войдите в Figma или создайте учетную запись .
Дубликат из сообщества Figma.
Перейдите к файлу «Designing with accessible colors» или найдите «Designing with accessible colors» в сообществе Figma . Нажмите «Дублировать» в правом верхнем углу, чтобы скопировать файл в свою папку.
Структура файла
Просматривая файл, обратите внимание, что он самодостаточен и начинается с введения. Каждый раздел разделён на ряд связанных между собой монтажных областей, содержащих основные концепции раздела, за которыми следуют упражнения. Разделы и упражнения дополняют друг друга и должны выполняться последовательно.
Этот практический курс поможет вам более подробно разобраться в этих концепциях и выполнить упражнения. Читайте вместе с курсом, чтобы узнать больше о новых функциях Material You!
Начиная с монтажной области «Вступление» , расположены кнопки, которые последовательно связывают монтажные области между собой. Чтобы получить доступ к ссылке, нажмите на кнопку.
Установите плагин Figma.
В этом практическом занятии активно используется новый плагин Figma для генерации динамических цветовых схем и токенов. Установите плагин Figma непосредственно со страницы сообщества Figma или найдите "Material Theme Builder" в сообществе Figma.
3. Цвет и доступность
Доступность — единственный способ создавать продукты для всех, гарантируя, что ваша продукция будет доступна максимально широкой аудитории.
«Вижу ли я цвет на экране?» — это лишь первый вопрос, который следует учитывать при проектировании с использованием цвета. Люди воспринимают цвет по-разному в зависимости от остроты своего зрения.
При дальтонизме необходимо проверять сочетания цветов, чтобы элементы пользовательского интерфейса не сливались воедино.
Хотя прозрачность и плотность цвета могут не соответствовать его буквальному оттенку, они оказывают сильное визуальное воздействие на восприятие цвета.
Использование низкой прозрачности создает более светлый цвет, что может сделать текст нечитаемым. Например, человеку с близорукостью будет трудно читать текст с прозрачностью 30% на разумном расстоянии.
Используйте параметр прозрачности с осторожностью и никогда не выходите за рамки рекомендованных значений.
Толщина шрифта может оказывать аналогичный эффект, например, при использовании более тонких шрифтов на темном фоне. В печатных изданиях использование очень тонкого шрифта приводит к тому, что чернила «просачиваются» в него, создавая ощущение замкнутого пространства. Наши глаза также создают подобный эффект на экранах, пытаясь заполнить пространство.
Тонкий шрифт на темном фоне создает эффект клаустрофобии.
Разборчивость против читабельности. В ходе этой лабораторной работы мы будем говорить о разборчивости текста. Разборчивость измеряет, насколько легко текст увидеть, а читабельность — насколько легко его понять.
4. Цветовой контраст
Рекомендации по обеспечению доступности существуют для того, чтобы предоставить дизайнерам и разработчикам единый, разработанный экспертами контрольный список, гарантирующий соблюдение передовых методов создания инклюзивных продуктов. Стандарт WCAG является общепринятым и используется в качестве ориентира в данной лаборатории.
Цветовой контраст — это разница между яркостью элементов переднего и заднего плана, представленная в виде соотношения. Этому критерию присваиваются оценки. Измерение контраста, например, между текстом на кнопке и его контейнером, может помочь определить, будет ли текст читаемым.
Пример с нарушением цветового контраста.
Рекомендации по цветовому контрасту разделены на текстовые и нетекстовые, для каждой категории предусмотрен свой набор оценок.
Текст
АА | АААА | |
Крупный текст | 3:1 | 4.5:1 |
Обычный текст (основной текст) | 4.5:1 | 7:1 |
Нетекст
АА | |
Нетекстовые (графические) элементы | 3:1 |
Давайте попробуем проверить контрастность и посмотрим, как её исправить вручную.
- В Figma найдите цвета элементов пользовательского интерфейса. Начиная с крупного текста (#C0BEC5), он расположен на фоне цвета (#F5F5FF). Использование онлайн-инструмента для проверки контрастности , ввод этих цветов в поля «передний план» и «фон», показывает, что они не проходят все проверки.
- Текст слишком яркий для цвета фона. Продолжая проверку контрастности в онлайн-сервисе, отрегулируйте цвет переднего плана с помощью палитры цветов, сделав его темнее, пока он не пройдет проверку на соответствие стандарту AAA .
- Вернитесь в Figma и примените новый цвет к крупному тексту .
- Для основного текста и кнопок выполните те же действия, обязательно проверив цвет текста и цвет фона для каждого элемента.
- Используйте результат в разделе «Графические объекты» и «Компоненты пользовательского интерфейса» , чтобы применить тот же процесс к значкам.
- Добавьте новый цвет в Figma для каждого элемента. Теперь все элементы должны соответствовать требованиям к контрастности!
Пример с использованием цветового контраста.
Вероятно, этот процесс показался долгим, и в результате цветовая палитра могла оказаться менее гармоничной. Вот тут-то и могут помочь инструменты!
5. Создано с учетом яркости
Новая динамическая цветовая система для Material Design построена на основе яркости, а не оттенка. Это означает, что если убрать оттенок и насыщенность, мы сможем увидеть контраст между оттенками.
При извлечении цвета получается 5 смещенных ключевых цветов, из которых генерируются тональные палитры. Тональная палитра состоит из тринадцати тонов, включая белый и черный. Значение тона 100 эквивалентно идее света в его максимальной яркости и соответствует белому цвету. Каждое значение тона от 0 до 100 выражает количество света, присутствующего в цвете.
Система тональных палитр имеет центральное значение для обеспечения доступности любой цветовой схемы по умолчанию.
Сочетание цветов на основе тональности, а не шестнадцатеричного значения или оттенка, является одной из ключевых систем, обеспечивающих доступность любого цветового вывода. Продукты, использующие динамический цвет, будут соответствовать требованиям, поскольку алгоритмические комбинации, с которыми может столкнуться пользователь, разработаны с учетом стандартов доступности.
Элементы с одинаковой яркостью не обладают достаточным контрастом для читаемости, в то время как элементы с разными значениями яркости различимы лучше.
Динамическая цветовая модель Material You разработана для работы в непредсказуемых условиях. Для управления коэффициентами контрастности в различных условиях просмотра ключевым параметром являются уровни яркости, позволяющие цветам успешно сочетаться даже без тестирования каждой конкретной цветовой комбинации командой разработчиков.
6. Создайте доступную тему оформления.
Конструктор тем генерирует токены Material Design в виде стилей Figma, позволяя визуализировать динамическое изменение цвета и создавать собственную тему. Это делается с учетом цветовой системы Material 3, чтобы гарантировать генерацию доступных цветов в цветовой схеме.
- В модальном окне плагина нажмите «Пользовательская» . Это переключит тему на пользовательскую. Тема material-theme уже сгенерирована, но при желании вы можете создать новую тему. Подробнее см. в разделе «Визуализация динамического цвета» .
- Далее задайте основной ключевой цвет. В качестве основного цвета может использоваться ваш фирменный цвет или наиболее часто используемый акцентный цвет. Щелкните по цвету с пометкой «Основной» , чтобы открыть палитру цветов и выбрать цвет. Основной цвет используется в качестве исходного цвета, аналогично исходному цвету в динамических настройках.
Добавьте цвета в горный велосипед.
- Остальные ключевые цвета заполняются на основе основного цвета. Это означает, что нет необходимости добавлять дополнительные цвета, если они вам не нужны. При желании можно добавить вторичный и третичный цвет.
- На цветовой схеме показаны ключевые цвета, полученные из входных цветов, сгенерированные тональные палитры и результирующие цветовые схемы с указанием ролей цветов. Доступны как светлые, так и темные схемы!
- В лаборатории предоставлен пример пользовательского интерфейса, чтобы показать примененную цветовую схему. Выбрав компонент «Пользовательский интерфейс приложения», нажмите кнопку «Поменять местами» внутри плагина.
Цветовая схема с подключенным макетом.
Для этих упражнений Material Theme Builder уже сгенерировал необходимые токены в файле Figma.
7. Проверьте контрастность с помощью Material Theme Builder.
Замечательно, но мы понимаем, что вам захочется вручную изменить некоторые из этих стилей, используя другие цвета. В Material Theme Builder встроена проверка контрастности основных цветов схемы, которая поможет вам принять такие решения.
- Поскольку токены создаются как стили, мы также можем задать значение генерируемого цвета. В стилях Figma прокрутите вниз до основного цвета текущей темы и выберите значок «Редактировать стиль» справа.
- Обновите основной цвет в свойствах. Это отразится на выводе цвета и пользовательском интерфейсе приложения. Алгоритм выбора цвета не генерировал этот цвет, поэтому мы не можем гарантировать доступность.
- В меню плагина нажмите «Проверить контрастность», а затем снова откройте модальное окно «Редактировать стиль для основного». Это проверит контрастность и отобразит её значение.
Контраст в диалоговом окне стиля Figma.
8. Поздравляем!
Замечательно! Доступность должна быть важнейшей частью вашего рабочего процесса, а с Material Design и Material Theme Builder это становится еще проще.
Если у вас возникнут вопросы, не стесняйтесь задавать их нам в любое время, используя @MaterialDesign в Твиттере .
Следите за обновлениями и новыми обучающими материалами по дизайну на youtube.com/MaterialDesign