Material Design на русском. Часть 18 — Темная тема

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

Темная тема

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

Пример: Светлая и темная темы

Использование темной темы

Темная тема использует темные поверхности в интерфейсе. Она спроектирована как дополнительный режим к стандартной (светлой) теме.

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

Принципы

Темно-серый

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

Цвета с акцентами

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

Экономия заряда батареи

Экономь заряд батареи в продуктах, которые могут зависеть от яркости экрана (устройства с OLED-экранами) — для этого сокращай использование светлых цветов.

Лучшая доступность

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

Характеристики темной темы

Темные темы Material Design определяются следующими характеристиками:

• Контрастность: Темные поверхности и 100% белый наборный текст имеют уровень контрастности не менее 15.8:1.
• Глубина: Если компоненты находятся на большом уровне высоты, то они должны показывать глубину, за счет использования более светлых цветов поверхностей, для этого используется наложение белого цвета с прозрачностью на темную поверхность.
• Отсутсвие насыщенности: основной цвет в темных темах не имет насыщенности и именно поэтому он проходит по требованиям стандарта доступности веб-контента (WCAG) уровняяАА, что значит в конкретных значения — не менее 4.5:1 (при использовании наборного текста) на всех уровнях высоты.
• Ограниченное использование цвета: Большие поверхности используют темный цвет, с ограниченными количеством акцентов.

Анатомия

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

1. Фон — высота равна 0dp, т.е. background
2. Поверхность — высота равна 1dp, т.е. surface
3. Основной цвет, т.е. primary
4. Второстепенный цвет, т.е. secondary
5. Цвет типа «On» — на фоне, т.е. on background
6. Цвет типа «On» — на поверхности, т.е. on surface
7. Цвет типа «On» — поверх основного цвета, т.е. on primary
8. Цвет типа «On» — поверх второстепенного цвета, т.е. on secondary

Поведение

Темную тему можно включить (или выключить) с помощью какого-нибудь элемента управления:

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

Переключатель в виде иконки справа вверху на панели приложения.

Пример, на котором показано меню поверх интерфейса, с переключением тем.

Пример переключателя в темной теме на отдельном экране настроек.

Характеристики

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

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

Рекомендуемый темный цвет поверхности — #121212

Про высоту в темной теме

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

Когда поверхность поднимается, она становится светлее по цвету.

Поверхность у темной темы создается путем размещения полупрозрачного слоя поверх.

1 — Поверхность. 2 — Наложение белого цвета с прозрачностью над поверхностью.

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

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

Значения ниже предназначены для того, чтобы различать высоту.

Шкала прозрачности колеблется от 0% для самого низкого уровня высоты до 16% (максимальная высота).

Наложения показывают разницу по высоте между компонентами.

A. Карточка на высоте 1dp с наложением 5%. B. Плавающая кнопка на 6dp с использованием вторичного цвета без наложения. C. Нижняя панель приложения на высоте 8dp с наложением 12%.

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

В темной теме тени остаются черными, чтобы точно отображать тень.

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

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

Доступность и контраст

Поверхности в темной теме должны быть достаточно темными, чтобы разместить на них белый цвет. В общем контраст между текстом и фоном должен быть не менее 15.8:1. Это гарантирует, что наборный текст соответствует уровню AA в стандрте WCAG, где значение по контрасту должно иметь не менее 4.5:1.

Чтобы создать брендированые поверхности в темной теме, наложите цвет бренда с низким значением прозрачности на цвет по умолчанию в темной теме (#121212). Цвет #1F1B24 является результатом смешивания цвета по умолчанию в темной теме #121212 и 8% прозрачности цвета бренда.

Если цвет фона недостаточно темный, чтобы соответствовать уровню контраста между белым текстом и поверхностью (это 15.8:1), текст на любой высоте уже не будет соответствовать стандарту 4.5:1.

Осторожно: Убедись, что цвет фона достаточно темный, чтобы наборный текст соответствовал уровню контрастности не менее 4.5:1 (AA) на максимальной высоте (это 24dp).

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

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

UI и темная тема

Цвета в темной теме

Все цвета в темной теме должны быть с достаточным контрастом, чтобы соответствовать стандарту AA WCAG не менее 4.5:1 для основного текста на любой высоте.

Используй ненасыщенные цвета для соответствия стандарту доступности

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

Вместо этого в качестве более читабельной альтернативы можно использовать ненасыщенные цвета.

Менее насыщенные цвета из цветовой палитры улучшают читаемость и уменьшают визуальную нагрузку на глаза.

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

Основной цвет

Основной цвет — это цвет, который чаще всего отображается на экранах и компонентах приложения. Основной цвет из цветов в темной теме по умолчанию Material Design использует 200 вариант основного цвета (этот вариант проходит стандарт AA WCAG не менее 4.5:1 для обычного текста на всех поверхностях и любой высоте).

Пример палитры по умолчанию для основного цвета в темной теме:
1. Основной цвет. 2. Шкала с вариантами

Варианты основного цвета

Компоненты со светлыми поверхностями могут содержать разные варианты основного цвета.

Тут используется основной цвет (Purple 200) и его вариант (Purple 700) в snackbar.

Второстепенный цвет

Вторичный цвет можно использовать для акцентирования отдельных частей в интерфейсе. В темной теме вторичному цвету также как и основному можно уменьшить насыщенность, чтобы соответствовать уровню контрастности 4.5:1.

Пример палитры по умолчанию для вторичного цвета в темной теме:
1. Вторичный цвет. 2. Шкала с вариантами

В этом интерфейсе использованы основной и вторичные варианты цветов.

Акцентный цвет

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

В поисках акцентного цвета

Генератор цветовой палитры можно использовать для создания (или просто просмотра) цветовой темы. Он также генерирует палитры со шкалой светлых и темных вариантов оттенка цвета. Шкала генерируется автоматически после ввода значения цвета для основного или вторичного цвета темы. После ты можешь выбрать любой цвет для темной темы.

Рекомендуется использовать светлые варианты (значения на шкале от 200 до 50) в темной теме. Не используй тему по умолчанию, то есть значения от 900 до 500 не рекомендуется использовать в темно теме). 1 — Основной цвет в теме по умолчанию (светлой). 2 — Основной цвет для темной темы.

Правильно: Более светлые тона (цвета в диапазоне 200–50) имеют лучшую читабельность на темных поверхностях (на любой высоте).

Неправильно: Избегай использования насыщенных цветов в темных темах, так как они могут визуально напрягать глаза пользователей.

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

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

Цвета бренда

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

Ненасыщенные цвета все равно должны использоваться в остальной части интерфейса темной темы.

Обрати внимание как сочетается насыщенный цвет бренда примененный к плавающей кнопке (2), при том, что основной цвет темной темы ненасыщенный и применен к тексту (1). В области где показаны образцы цвета 1 — это основной цвет в темной теме, а 2 — это цвет бренда.

Цветовая тема по умолчанию для темной темы

Базовая тема Material Design включает в себя определенные цвета.

Цвета темной темы должны использоваться по всему интерфейсу:

• Цвет (основной, вторичный и варианты основного цвета)
• Поверхности (фон и компоненты)
• Состояния (например, состояния ошибок)
• Контент (типографика и иконки)

Тема Material Design по умолчанию темной темы.

1 — Тема Material Deisgn по умолчанию светлой темы. 2 — Тема Material Design по умолчанию темной темы.

Цвета ошибок и темная тема

Цвета ошибок используются для обозначения состояния ошибки. Цвет ошибки в темной теме по умолчанию — #CF6679.

Этот цвет для темной темы был создан путем совмещения цвета ошибки из светлой темы (#B00020) и наложения на его 40% белого цвета, чтобы пройти стандарты контрастности уровня АА.

Цвета для типографики и иконок

Цвета типа «On»

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

По умолчанию цвета темной темы типа «On» — белый и черный.

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

Светлый текст на темном фоне

Когда светлый текст размещается на темном фоне (ниже показано), он должен использовать следующие уровни непрозрачности:

• Текст с высоким акцентом имеет прозрачность 87%
• Текст со средним акцентом и текст подсказок имеют прозрачность 60%
• Заблокированный текст имеет прозрачность 38%

Текст с высоким акцентом, средним акцентом и заблокированным текстом

Кастомизация приложения

В некоторых ситуациях темная тема выигрышнее светлой.

Большие поверхности

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

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

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

Осторожно: Если не хочешь использовать цвет по умолчанию для поверхностей (это #121212), то просто убедись что выбранный тобой цвет будет иметь контраст 15.8:1.

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

Совмещение светлой и темной темы интерфейса

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

Например, в темной теме snackbar (снэкбар) может быть светлым, чтобы помочь компоненты выделиться.

Снэкбары (snackbar) используется светлая поверхность, чтобы показать что этот элемент выше, так как он должен выделяться и обращать на себя внимание пользователя. 1 — Цвет «on surface» над поверхность: #FFFFFF. 2 — Поверхность цветом #121212. 3 — Вариант основного цвета: #3700B3.

Состояния

Состояния визуально передают текущее состояние компонента или говорят о его интерактивности за счет наложения цвета. В темной теме, состояния должны иметь те же значения наложения цвета что и в стандартной (светлой) теме. Это конечно же настраивается, потому что надо соответствовать стандартам АА уровня для доступности.

Контейнеры поверхности

К контейнерам, которые используют цвет Поверхности (Surface color) следует применять наложение.

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

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

Поверхности окрашенные основным цветом

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

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

Недоступные и заблокированные состояния

Все заблокированные/недоступные компоненты имеют поверх обводки и заливки контейнера белый слой с 12% прозрачности, а у контент (иконки и подписи) заливаются 38% слоем белого цвета.

1–12% наложение белым цветом на обводку. 2–38% наложение белым цветом на подписи и иконки. 3–12% наложение белым цветом на контейнер поверхности.

Ресурсы

Figma

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

Sketch

То же самое доступно по другой ссылке для редактора Sketch.

Реализация

Поддержка темной темы доступна на данный момент только для Android. Все остальные платформы (iOS, Web и Flutter) находятся в стадии планирования.

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

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