Material Design на русском. Часть 15 — Применение цвета в UI

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

Применение цвета

Цвет применяется к элементам и компонентам интерфейса последовательным и осмысленным образом.

Использование

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

Принципы

Консистентность

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

Различие

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

Сознательность

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

Верхняя и нижняя панель приложения

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

Идентификация панелей приложений

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

Правильно: Основной цвет (Purple 500) используется на этой верхней панели приложения, а его темный вариант (Purple 700) используется на системной панели.

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

Правильно: Основной цвет (Reply Blue 700) используется на нижней панели приложения, а вторичный цвет (Reply Orange 500) используется на плавающей кнопке (FAB).

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

Слияние панели приложения с фоном

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

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

Яркий, бесшовный макет этого приложения использует свой основной синий цвет (blue 700) для панелей приложений, нижней навигации и цвета фона, поэтому отдельные элементы выделяются меньше, а контент-больше. В состоянии активации используется вторичный желтый цвет. Он включает в себя тень на нижней навигации, чтобы показать разделение высот между поверхностями.

Backdrop (не знаю как перевести)

Итак бэкдроп (задник?) — это составной паттерн, который имеет передний и задний слой. Задний слой окрашивается в основной цвет, а передний слой в белый.

Это приложение использует свой основной цвет (Crane Purple 800) на заднем слое. Текстовые поля — это светлый вариант основного цвета (Crane Purple 700). Вторичный цвет (Crane Red 700) применяется в качестве акцента к тарифам на перелет.

Тут используется основной цвет (Shrine Pink 100) для заднего слоя фона и его темный вариант (Shrine Pink 900) для типографии и иконок. Дополнительно вторичный цвет (Shrine Pink 50) используется для кнопки корзины справа внизу на переднем слое.

Списки и поверхности

Базовый цвет для списков и прочих поверхностей, таких как нижний список действий (англ. bottom sheets), боковая навигационная панель (navigation drawer), различные меню, диалоговые окна и карточки — белый.

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

Этот продукт не использует белый цвет по умолчанию как основной. Тут дизайнер решил сменить его на фиолетовый.

Оновной цвет (Purple 500) в вместо базового белого.
Боковая навигационная панель использует тот же Purple 500 цвет вместо базового белого.

Модальные списки

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

Это приложение использует основной цвет синий (Reply Blue 700) в для нижней навигационной панели, а темный вариант основного цвета (Reply Blue 800) для переключения учетных записей и вторичный цвет (Reply Orange 500) для выделения.

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

В этом примере появляется список в правом нижнем углу, у которого основной цвет (Owl Pink 500). При нажатии список раскрывается.

Карточки

Базовый цвет для карточек — белый. Этот цвет может быть изменен для того чтобы выразить бренда компании илиесли ты посчитаешь что другой цвет повышает читаемость. Текст на карточках и иконки также могут использовать цветовую тему для улучшения читабельности.

Поверхность у этих карточек используют основной цвет (Purple 500). Цвет фона приложения — белый. Вторичный цвет (Teal 200) используется для визуализации данных.

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

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

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

Кнопки, чипсы (chips) и элементы выбора

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

Категории цвета

Базовый цвет для текста и кнопок — это основной цвет.
Базовый цвет для плавающих кнопок и — это вторичный цвет.
Базовый цвет для элементов выбора — это вторичный цвет.

Цветовая тема этого приложения состоит из основного цвета (Purple 500) и его темного варианта (Purple 600) и вторичного цвета (Teal 200).

На примере выше основной цвет (Purple 500) применяется для нижней панели приложения и вторичный цвет (Teal 200) в качестве акцента для плавающей кнопки и элементов выбора.
На примере выше вторичный цвет (teal 200) применяется в качестве акцента для выбранных элементов списка.

Кнопки, чипсы (chips) и элементы выбора

Кнопки, чипсы (chips) и элементы выбора можно красить и в основной цвет и во второстепенный.

Это приложение использует основной цвет (Shrine Pink 100) для раскрытого экрана, который появляется после нажатия на плавающую кнопку и chips. А также его темный вариант (Shrine Pink 900) для слайдера.

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

Не правильно: Не используй какой-то из фирменных цветов для предупреждений.

Плавающая кнопка действия (FAB — Floating action button)

Плавающая кнопка действия (FAB) должна быть одним из самых заметных элементов на вашем экране.

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

Тут вторичный цвет (Reply Orange 500) применяется к FAB, чтобы задать контраст между остальным интерфейсом.

Цветовая тема у этого приложения содержит первичный цвет — это белый, а вторичный — это черный цвет для всех кнопок, элементов управления и иконок. Эти компоненты выделяются, потому что они контрастируют с ярким контентом.

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

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

Иерархия в типографике

Цветом можно как увеличить видимость текста, так и его уровень важности.

Цветовая тема для этого приложения состоит из основного цвета (Purple 500) и вторичного цвета (Orange 600). Оранжевый цвет подчеркивает заголовки у карточек, а фиолетовый используется на вкладках и кнопках внутри карточек.

Заголовки и вкладки

Вкладки или заголовки можно красить как угодно конечно же, т.е в основном или вторичные цвета.

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

Это приложение использует основной цвет (Basil Green 800) для вкладок, а чтобы выделить выбранные элементы используется другое начертание у шрифтовой гарнитуры.

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

Приложение: Можно использовать основной или вторичный цвет для акцентирования ссылок.

Аккуратно: Избегай использования ярких цветов для основного текста.

Читабельность текста

Когда текст помещается на изображение, это часто приводит к проблемам с читаемостью. Ты можешь нарисовать под текстом какую-нибудь плашку, чтобы текст оставался разборчивым.

Чтобы текст был разборчивым под ним располагается плашка с едва заметным желтым цветом.

Иконки

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

На этом примере используется как основной цвет (Basil Green 800), так и вторичный цвет (Basil Orange 800) для иконок.

На этом примере иконки окрашены в темный вариант цвета Shrine Pink 900.

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

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