Большое руководство по проектированию темной темы для Android-приложений

Статья 2019 года но все еще актуальна!

В этой статье я объясню пошаговый процесс создания темной темы (Dark Theme / Dark Mode) для вашего приложения на основе Руководства Material Design от Google

Приятного чтения!

Когда в 2019 году на конференции Google I/O, компания Google объявила о повальной эпидемии темных тем, я был очень взволнован. Те из вас, кто следит за мной в социальных сетях, должны знать, что я фанат темной темы. Я просто обожаю ее!

С выходом Android Q в 3-м квартале 2019 года я понял, что важно добавить тёмную тему в свои приложения.

Компания Google выпустила руководство Material Guidelines для применения темной темы в своих приложениях. Это отличное руководство в отличие от Human Interface Guidelines от Apple (Apple, почему? Почему?). Вы безусловно можете потратить время на его прочтение, но я планирую сделать вашу жизнь намного проще, описав в этой статье пошаговый процесс создания темной темы.

Я также опубликовал в Instagram 5 видео, которые помогут быстро освоить основы темной темы.

Еще один момент. Я буду освещать только аспект проектирования, но не аспект разработки. Вы можете посмотреть это видео от Google, которое объясняет разработку темной темы.

А еще можете посмотреть мое полноценное видео-руководство на YouTube !

Хорошо, если у вас есть готовая дизайн-система с цветами, шрифтами, компонентами и т.д., давайте начнем!

Расположение в пространстве

Каждое приложение состоит из множества компонентов. Nav drawer, панель приложений, кнопки и т.д. Каждый компонент имеет определенное значение размера тени, поскольку это является одной из основ Material Design.

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

Руководство Google обеспечивает 12 уровней возвышения для компонентов

В качестве основы всегда используется темно-серый цвет со значением #121212. Apple вечно любит отличаться, поэтому они предлагают использовать чистый черный цвет #000000.

Все значения тени и возвышения были предоставлены Google в их UI Kit (Sticker Sheet).

Компоненты становятся светлее по мере увеличения возвышения

Проектирование приложения

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

Эта концепция зависит от того, какой инструмент проектирования вы используете. Это быстрее сделать в Figma и Sketch, а в Adobe XD требуется дополнительный шаг. Ну, а пока я покажу вам проектирование приложения в Figma.

Давайте в качестве примера возьмем навбар.

Как видите, панель приложения состоит из 2 слоев. Базовый всегда имеет цвет #121212. Поверх базового слоя нанесен белый полупрозрачный оверлей. Непрозрачность этого оверлея была установлена ​​на уровне 9%. Это значение варьируется в зависимости от возвышения. В этом случае панель приложения имеет возвышение 4dp. Чем больше возвышение, тем больше непрозрачность оверлея. Значения возвышения и оверлея доступны в UI Kit, предоставленном Google.

Если вы используете такой инструмент, как Adobe XD, процесс будет немного отличаться. Вам нужно будет дублировать базовый слой (#121212), а затем изменить цвет на белый. Потом установите непрозрачность продублированного слоя на 9%. В Adobe XD вы не можете добавить 2 цветных слоя к одному элементу.

Передача разработчикам

Есть 2 способа передать проект разработчику.

1. Вы не передаете проект разработчику 😂. Попросите разработчика использовать компоненты кода, предоставленные Google. Эти компоненты кода будут автоматически применять возвышение и цвет.
2. Если вы используете кастомный компонент, укажите истинное значение цвета. В нашем случае это #272727, который представляет собой смесь цветов #121212 и #FFFFFF (9%).

Фон и поверхности с фирменным цветом

Некоторые бренды любят везде использовать свой фирменный цвет (цвет бренда). Поэтому есть еще один способ добавить немного стиля вашей темной теме.

В этом примере мы выберем синий цвет в качестве основного (#4BB2F9).

Создание кастомного цвета фона на основе цвета бренда.

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

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

Маленькие компоненты, такие как FAB, не будут иметь темного фона

Я расскажу об этом подробнее в следующем разделе.

Цветовая палитра

Далее идет красочная часть. Первое, что вам нужно сделать, это взять основной и дополнительный цвета и создать цветовую палитру. Для создания цветовой палитры вы можете перейти в раздел, посвященный цветам, на сайте Material.io и ввести свои цвета. Затем он сгенерирует для вас цветовую палитру. Обязательно прокрутите вниз до раздела «Tools for picking colors section».

Цветовая палитра, сгенерированная для оранжевого цвета

Давайте разберемся с компонентами цветовой палитры.

1. Тональные значения: каждому оттенку цветовой палитры присваивается номер в диапазоне от 50 до 900. Это число является тональным значением. Они используются только для определения определенного оттенка цветовой палитры.
2. Основной цвет: когда вы вводите значение основного цвета, генератор цветовой палитры назначит тональное значение вашему основному цвету. Оно основано на насыщенности основного цвета. В приведенном выше примере тональное значение основного цвета составляет 600. Однако это основной цвет для светлой темы. Но для темной темы основной цвет смещается в ненасыщенный цветовой оттенок. (Пояснение ниже). Google рекомендует использовать цвет с тональным значением 200 в качестве основного цвета для темной темы.
3. Основной вариант: любой оттенок основного цвета называется основным вариантом (Primary Variant). Таким образом, в нашем случае, любой цветовой оттенок, кроме тонального значения 600, может рассматриваться в качестве основного варианта для светлой темы. А любой цветовой оттенок, кроме тонального значения 200, может рассматриваться, как основной вариант для темной темы.

Зачем нам нужна полноцветная палитра?

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

Тональное значение 900 — наиболее насыщенное. Тональное значение 50 — наименее насыщенное

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

Еще одна вещь, прежде чем мы завершим раздел о цвете. Речь идет о цвете для таких компонентов, как FAB и кнопок, которые я показал вам в предыдущем разделе.

На изображении выше, FAB на верхнем экране имеет основной цвет темной темы, который имеет тональное значение 200. Но рекомендации позволяют нам использовать для таких компонентов более насыщенный цвет. В нашем случае это будет основной цвет для светлой темы с тональным значением 500.

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

С этого момента, где бы я ни использовал словосочетание «основной цвет», я имею в виду «основной цвет темной темы» (тональное значение 200).

Цвета «On»

Гайдлайны предоставляют набор правил для таких элементов, как текст и иконки, которые должны соблюдаться для темной темы. Он называется «Палитра основы темной темы» (Dark Theme Baseline Palette), которая выглядит примерно так.

Палитра основы темной темы

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

На изображении выше у нас есть расширенный FAB, имеющий основной цвет. Цвет текста черный. Не белый. Это соответствует «Палитре основы темной темы».

Это в значительной степени все, что вам нужно знать о цвете.

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

Теперь начинается интересная часть. На каждой поверхности есть 3 типа элементов — иконки, текст и обводки. Они могут иметь либо белый цвет, либо оттенок фирменного цвета.

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

Различные уровни непрозрачности для различного выделения текста

На изображении выше, есть 3 различных уровня непрозрачности для текста белого цвета. Согласно руководства Material Design:

1. Высокое выделение текста должно иметь непрозрачность 87%.
2. Текст с низким акцентом должен иметь непрозрачность 60%.
3. Отключенный текст, должен иметь непрозрачность 38%.

Безусловно, эти значения можно изменить по своему вкусу. Поэтому в нашем случае непрозрачность заголовка вкладки (Activity) составляет 100%, а непрозрачность другого заголовка — 87%, а непрозрачность подзаголовков — 60%.

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

Оттенок оранжевого цвета используется вместо чистого белого цвета

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

Так, какую роль в этом играют доступность и контраст? На самом деле все очень просто.

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

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

1. Color Contrast Checker — WebAIM
2. Sip App
3. Contrast

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

4 возможных результата

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

4.5:1

1. Поверхность с основным цветом (темная тема). (Результаты 3 и 4)
2. Текст с белым или не белым цветом. (Все 4 результата)

15.8:1

1. Поверхность с основным цветом (темная тема) или черным цветом по умолчанию. (Все 4 результата)
2. 100% белый цвет текста. (Результат 1 и 3)

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

Шаг 1

Решите, собираетесь ли вы использовать фон с цветом по умолчанию или основным цветом.

Шаг 2

При тестировании ваших цветов убедитесь, что вы тестируете их на самом высоком уровне возвышения 24dp. Согласно руководству Google, модальное диалоговое окно имеет возвышение 24dp. Но на изображении выше я взял в качестве примера панель навигации, имеющую возвышение 16dp. Разница в цвете незначительна между возвышением 16dp и 24dp.

Шаг 3

Если вы выберете фон с темным цветом по умолчанию, вам нужно только проверить контрастность 4,5: 1. И, если для цвета текста выбран чистый белый цвет, в этом случае вам не нужно применять какой-либо коэффициент контрастности.

Но, если текст имеет цвет вашего бренда, тогда проверьте коэффициент контрастности 4,5: 1. Давайте посмотрим, как это работает.

Соответствие коэффициенту контрастности 4.5:1

Как вы можете видеть здесь, цвета соответствуют коэффициенту контрастности 4,5: 1, что нам и нужно.

Шаг 4

Если вы решите использовать фон с основным цветом, вам нужно проверить только соответствие коэффициенту контрастности 15,8: 1. В этом случае вам нужно проверить соотношение независимо от цвета текста.

Следует отметить, что, если цвет текста белый, то проверьте коэффициент контрастности 15,8: 1. Если для текста выбран фирменный цвет, проверьте коэффициент контрастности 4,5: 1.

Давайте посмотрим, как это работает.

Соответствие коэффициенту контрастности 15,8: 1

На изображении выше мы тестируем коэффициент 15,8: 1, так как цвет текста белый. При непрозрачности 11% цвет фона становится достаточно темным, чтобы соответствовать коэффициенту контрастности 15,8: 1.

Соответствие коэффициенту контрастности 4,5: 1

На изображении выше мы не собираемся тестировать коэффициент контрастности 15,8: 1, поскольку цвет текста не белый. Вместо этого проверьте коэффициент 4,5: 1. Коэффициент контрастности 15,8: 1 необходимо проверять только тогда, когда цвет текста белый.

Еще одна вещь, на которую следует обратить внимание при тестировании коэффициентов контрастности, это проверить их на фоне состояний ошибок.

Соответствие коэффициенту контрастности 4,5: 1

Рекомендации определяют точный цвет, который будет использоваться для состояний ошибки. В нашем случае это ярко-красный с полупрозрачным оверлеем с непрозрачностью 40%. В результате мы получаем цвет #CF6679. Непрозрачность 40% обеспечивает соответствие коэффициенту контрастности. Красный цвет (#B00020) — это цвет ошибки по умолчанию для светлой темы.

Текст здесь черный, а не белый. Это из-за «Палитры основ темной темы», которую мы рассмотрели ранее.

Но, если вы решите использовать другой цвет для состояний ошибки, просто убедитесь, что он соответствует коэффициенту контрастности 4,5: 1.

Состояния

Проектирование темной темы для разных состояний компонента просто и понятно. Все настройки тени, наложения и обводки доступны в UI Kit. Я собираюсь показать вам пример с состоянием перетаскивания компонента.

Есть 2 типа компонентов. Тот, который использует темный цвет по умолчанию (#121212) и тот, который использует основной цвет. На изображении ниже я покажу вам схему дизайна, когда компонент имеет темный цвет по умолчанию.

Полупрозрачный белый оверлей для разных состояний

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

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

Когда текст использует основной цвет, цвет оверлея совпадает с цветом текста. В этом случае цвет текста будет #F796AE, поэтому оверлей использует тот же цвет.

В большинстве случаев такие компоненты, как кнопки и FAB, всегда используют фирменные цвета. Поэтому всегда используйте белый оверлей для разных состояний. Для состояния перетаскивания непрозрачность составляет 8%, как мы видели в предыдущих примерах.

Для отключенных состояний есть только 2 варианта.

2 варианта для кнопок.

Изображение выше показывает только 2 варианта для отключенных состояний. Это может быть либо обводка, либо заливка. В обоих случаях текст белый с непрозрачностью 38%.

Иллюстрации

Погодите… что? Типа иллюстрации графического дизайна?

Ха-ха-ха. Да 😂

Иллюстрации также должны быть адаптированы под темную тему. К сожалению, в руководствах ничего не сказано об иллюстрациях. Единственное доступное руководство — выступление на конференции Google I / O.

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

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

1. Элемент фона необходимо сделать серым. Но при этом вы должны следовать простому правилу. Самый светлый оттенок в светлой теме становится самым темным оттенком в темной теме и наоборот. Иногда вам может понадобиться поиграть с черным и белым цветами, чтобы они выглядели идеально. Вы не должны всегда следовать этому правилу.
2. Для предметов необходимо использовать ненасыщенные цвета. Таким образом, ваш диапазон — оттенки с тональным значением 400–50.

Ненасыщенные цвета для иллюстраций темной темы

В светлой теме на иллюстрации использовался насыщенный зеленый цвет с тональным значением 800. Но для темной темы используйте менее насыщенный цвет из той же цветовой палитры. В нашем случае я использовал тональное значение 200. Но вы можете использовать тональные значения 400 или 300.

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

Вот и все!

Итак, это почти все, что вам нужно знать о проектировании темной темы для вашего Android-приложения. Не стесняйтесь обращаться ко мне в любое время, если вам нужны разъяснения или, если вы где-нибудь застряли. Вы можете отправить мне сообщение на любой социальной платформе. Я буду рад вам помочь 😁.

Ресурсы

1. Выступление на Google I/O, затрагивающее аспект проектирования темной темы.
2. Выступление на Google I/O, затрагивающее аспект разработки темной темы
3. Dark Theme UI Kit/Sticker Sheet от Google.
4. Design Lab для Figma от Google.
5. Material Design UI Kit/Sticker Sheet для Figma.
6. Material Design UI Kit/Sticker Sheet для Adobe XD.

---

Перевод статьи prototypr.io