Material Design на русском. Часть 14 — Цвет в Material

Привет. Меня зовут Руслан. Я UX/UI дизайнер в Siemens. У меня есть ютуб-канал, на котором записано несколько плейлистов по основам UX/UI дизайна. В этой серии постов однако я просто делюсь вольным переводом Material Design на русский язык. Оригинальный источник: здесь.

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

Использование цвета и палитры

Руководство по цвету Материал позволяет применять цвет для интерфейса осмысленно. Изначально надо выбрать основной и второстепенный цвета, которые отображают ваш бренд. Затем темные и светлые оттенки каждого цвета можно применять к интерфейсу так, как тебе угодно.

Цвета и темизация

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

Для упрощения процесса подбора цвета можно использовать этот инструмент.

Простая палитра из основного и второстепенного цвета: 1) Основной цвет. 2) Второстепенный цвет. 3) Шкала светлых и темныъ оттенков

Принципы

Иерархия

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

Разборчивость

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

Выразительность

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

Создание цветовой темы

Цветовая тема Material по умолчанию

Material Design уже имеет тему по умолчанию, которую можно использовать как есть, прямо из коробки.

Эта тема содержит следующее:

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

Цветовая тема Material по умолчанию.

Основной цвет (Primary color)

Основной цвет — это цвет, который чаще всего ты видишь на экране и у компонентов приложения.

Темный и светлый варианты основного цвета

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

Распознавание UI элементов

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

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

А этот интерфейс использует основной цвет и два его варианта.

Второстепенный цвет (Secondary color)

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

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

Второстепенные же цвета больше подходят для:

• Плавающей кнопки (FAB)
• Элементы выбора — слайдеры, переключатели
• Выделение текста
• Полоса загрузки (progress bar)
• Ссылки и заголовки

Темный и светлый варианты основного цвета

У второстепенного цвета, как и у основного, тоже могут быть темные и светлые варианты.

Темные и светлые варианты как основного, так и второстепенного цветов.

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

Цвета поверхности, фона и ошибок

Цвета для поверхностей, фона, ошибок, как правило, не отражают бренд, но нужны для следующего:

• Цвета для поверхностей влияют на компоненты, такие как карточки, списки и меню.
• Цвет фона виден за прокручиваемым контентом. Базовый цвет фона и поверхности — #FFFFFF (это белый цвет).
• Цвет ошибки указывает на ошибки в компонентах, например недопустимый текст в текстовом поле. Базовый цвет ошибки — #B00020.

Тут показано: 1 — базовый цвет фона (#FFFFFF). 2 — базовый цвет поверхности (#FFFFFF). 3 — базовый цвет ошибки (#B00020)

Типографика и иконки

«On colors» категория цвета

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

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

Вернемся к примеру с карточкой, которая окрашена в основной цвет (фиолетовый), так вот цвет текста или иконки, которая будет на этой карточки будет называться «on primary color» — над основным цветом. Данное название является переменной в андройд палитре и то же самое происходит со второстепенным (secondary)цветом — «on secondary color» и т.д. Проще говоря добавляется префикс «On».

В основном эта категория применяется к тексту, обводкам или иконкам, но можно использовать и для поверхностей. По умолчанию значения у таких «on» цветов — #FFFFFF и #000000.

1. Цвет по умолчанию для on primary (над основным) — #FFFFFF
2. Цвет по умолчанию для on secondary (над вторичным) — #FFFFFF
3. Цвет по умолчанию для on background (над фоном) — #B00020.
4. Цвет по умолчанию для on surface (над поверхностью)— #B00020
5. Цвет по умолчанию для on error (над ошибкой) — #B00020

Доступность

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

Образцы цветов

Образец — это цвет, который выбран из ряда похожих цветов на шкале ниже.

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

• Белая галочка указывает, когда белый текст разборчив на фоне
• Черная галочка указывает, когда черный текст разборчив на фоне

Если ты используешь обильно белый цвет для текста, то нужно иметь фон, который соответствует стандартам доступности. Белая галочка указывает на то, когда белый текст будет различим на выбранном цвете. На этом примере используется образец цвета под номером 400 для фона.

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

Альтернативные цвета

В Material можно использовать альтернативные цвета, которые используются в качестве альтернативы основным и вторичным цветам бренда (они являются дополнительными цветами к теме). Альтернативные цвета ты можешь использовать чтобы визуально отделить разделы приложения.

Альтернативные цвета лучше всего подходят для:

• Приложений со светлыми и темными темами
• Приложений с разными темами оформления для разных разделов
• Приложения, входящие в какой-то набор продуктов (как пример — набор приложений от adobe creative suite или atlassian)
• Альтернативные цвета следует использовать осторожно, потому что они могут быть сложными для реализации в связке с существующими цветовыми темами.

Светлая и темная темы

Некоторые приложения имеют как светлые, так и темные темы. Чтобы сохранить видимость элементов и разборчивость текста, вы можете адаптировать свои цветовые схемы для темных и светлых тем.

Новостное приложение в светлой теме.

То же самое приложение, но для поддержания разборчивости при темной теме используются другие цвета.

Альтернативные цвета для тем

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

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

Тема 1

Здесь желтый цвет использован как основной цвет для онбординга с выбором интересных пользователю тем.

Тема 2

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

Тема 3

Розовый используется как основной цвет для курсов.

Дополнительные цвета для визуализации данных

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

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

1. Используется зеленый, чтобы визуализировать данные со счёта.
2. Используется желтый и оранжевый, чтобы визуализировать данные платежей.
3. Используется синий и фиолетовый, чтобы визуализировать бюджет.

Инструменты для подбора цвета

Про генератор Material палитры

Генератор можно использовать для создания палитры для любого введенного цвета. Все остальное настраивается алгоритмом для создания эстетически приятных цветовых схем.

Про генерацию

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

Кроме того, инструмент может генерировать палитру на основе первичного и вторичного цвета.

Цветовые вариации для доступности

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

Material Design

Так выглядит инструмент по ссылке выше. Обрати внимание на ссылку справа внизу: View in color tool — там ты получишь все возможности

Цветовая палитра Material Design 2014 года

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

Как следить за обновлениями гайдлайна и переводом?

• Структуированный документ в Notion
• Официальные обновления Google на странице what’s new