Как сделать тёмную тему в приложении: пошаговая инструкция с примерами

Например, для текста выделили три ступени: высокое выделение (для главных элементов с непрозрачностью 70-100%), низкий акцент (для сносок и подсказок с непрозрачностью 30-50%) и неактивное состояние (15-20%).

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

Шаг 2: разбейте приложение на локации и перенесите темную тему на макеты

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

Разбейте все экраны на локации и пропишите roadmap. Локация — группа экранов из одного раздела. Они должны были сохраниться в «Фигме» или на платформе, где версталась светлая тема.

Разделите общее количество экранов на такие группы и начните применять разные варианты цветового профиля к каждой. Не забудьте прописать roadmap работ со сроками готовности каждой локации для следующего этапа — тестирования.

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

Отдайте на верстку инженерам. Когда внесете конечные правки, можно отправлять на верстку. Но и это еще не конец. Мы разделили группы верстальщиков по четырем направлениям: iOS, Android, мобильная и десктопная версия.

Список элементов, на которые стоит обратить внимание при переносе цветового профиля в приложение

Фон:

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

Текст:

• основной текст;
• вторичный текст (подзаголовки, описания);
• текст ссылок и активных элементов;
• текст-плейсхолдеры;
• текст на кнопках.

Иконки:

• основной набор иконок;
• иконки на кнопках;
• иконки-индикаторы (статусы, уведомления).

Разделители и тени:

• линии и другие визуальные разделители контента;
• тени для карточек, окон и других элементов, чтобы создать ощущение глубины и иерархии.

Действия:

• поведение при скролле (например, затемнение);
• цвет фона и текста для выделенного текста;
• боковая панель;
• активные/неактивные элементы.

Формы:

• фон полей ввода;
• цвет текста, плейсхолдеров;
• цвет границ полей ввода;
• цвет текста ошибок валидации.

Кнопки:

• фон основных и второстепенных кнопок;
• цвет текста;
• состояния кнопок (нажатие, неактивность);
• модальные окна (modals & popups).

Прогресс бары и лоадеры:

• цвет фона и заполнения;
• анимация.

Это лишь малая часть макетов, которые наши дизайнеры тестировали в Figma

Шаг 3: живые тесты и доработка

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

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

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

Доработайте. Список идей для улучшения отправляйте обратно дизайнерам и разработчикам, а после возврата тестируйте снова.

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

Обратная связь от коллег на этапе тестирования тёмной темы

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

Шаг 4: пропишите цветовые переменные в коде приложения

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

Как это происходит:

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

Чтобы перестроиться на переменные, нужно время и ресурсы. Однако усилия сполна окупаются и экономят деньги компании в будущем.

Итоги: краткий чек лист для темной темы

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

Перенесите темную тему на реальные макеты. Для этого разбейте приложение на локации и основные элементы: фон, текст, иконки, разделители, тени, действия, формы, кнопки, прогресс бары и лоадеры. Команду верстальщиков разделите на iOS и Android-системы, а еще по мобильной и десктопной версиям.

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

Фото на обложке: Freepik