В 2019 году Apple представил темный режим на iOS. С тех пор у нас выросло число заказов на темную тему — клиенты хотят внедрять темный режим оформления в приложениях и влиять на метрики: снижать показатели отказов, увеличивать число прочитанных страниц, растить лояльность пользователей или просто быть в тренде.
Может казаться, что разработать темную тему — это простая задача для дизайнера: достаточно следовать гайдлайнам Apple и Google, создать библиотеку цветов и потом добавить каждому цвету дополнительный для темной темы. В реальности все сложнее — текст интерфейса становится нечитабельным, кнопки пропадают, а иллюстрации сливаются с фоном.
Наш арт-директор Катя Токмакова рассказала на Техобзоре, какие сложности возникают при разработке темной темы и как организовать рабочий процесс так, чтобы избежать основных ошибок на старте.
Можете посмотреть выступление целиком или прочитать этот конспект.
Как мы разрабатывали темную тему раньше и что пошло не так
Когда мы внедряли темную тему на первых проектах, то использовали популярный подход — просто выносили все цвета из интерфейса в UI-кит, группировали их по типам и добавляли цветовые стили. Затем мы подбирали для каждого оттенка пару, которая подменяла исходный оттенок в темной теме.
Покажем в деталях на примере Спортмастера — мы зарелизили это приложение в начале 2022 года. Уже после запуска Спортмастер задумался о разработке темного интерфейса. Мы попробовали свой стандартный подход и уперлись в проблему: уже готовый UI-кит приложения плохо адаптировался под темную тему.
Важный нюанс: в реальности у Спортмастера нет темной темы. Мы провели эксперимент и на примере приложения разобрали основные ошибки при создании темного интерфейса.
![UI-кит Спортмастера Группы цветов в UI-ките Спортмастера](https://handh.ru/wp-content/uploads/2023/03/Группы-цветов-в-UI-ките-Спортмастера-1024x646.png)
Если бы мы добавили каждому компоненту дополнительный цвет для темной темы, то при переключении кнопки бы стали слишком темными, текст — нечитабельным, а тапбар — слился с фоном.
![Какие проблемы возникли в темной теме Что пошло не так в темной теме](https://handh.ru/wp-content/uploads/2023/03/Что-пошло-не-так-в-темной-теме-1024x646.png)
На опыте Спортмастера мы поняли, что наш стандартный подход не работает. Тогда мы внедрили новый и разбили его по шагам.
Шаг №1. Сгруппировать элементы интерфейса
После утверждения дизайн-концепции нужно собрать UI-кит из используемых цветов и разбить их по группам, чтобы темный интерфейс работал как надо. Группы могут быть такие:
- Основные цвета и акценты
- Фоны
- Аллерты
- Кнопки
- Разделители и обводки
- Тексты
- Иконки
![Как должен выглядеть UI-кит Добавили в UI-кит цвета всех элементов интерфейса и сгруппировали их](https://handh.ru/wp-content/uploads/2023/03/Добавили-в-UI-кит-цвета-всех-элементов-интерфейса-и-сгруппировали-их-1024x646.png)
Тогда дизайнер сможет точечно поменять цвет компонента, не перекрашивая весь интерфейс. Например, дизайнеру надо поменять цвет кнопки в приложении. Он быстро находит нужный цвет в соответствующей группе и локально заменяет его. Этот подход помогает более гибко перевести интерфейс в темную тему.
Шаг №2. Создать стили для всех элементов фона
Это нужно для того, чтобы шторки и плашки не сливались при переключении в темную тему.
Мы выносим три стиля:
- Background — основной цвет фона.
- Surface — используется для того, чтобы выделить смысловые блоки.
- Elevation — нужен для шторок и компонентов основной навигации: навбара и тапбара.
![Как выделять стили фона Стили фона](https://handh.ru/wp-content/uploads/2023/03/Стили-фона-1024x646.png)
Пример. Если в Спортмастере не вынести стили фонов разного уровня в отдельную группу, то в темной теме всплывающее окно получится одного цвета с фоном.
![Как использовать стиль Elevation в темной теме Стиль Elevation в темной теме](https://handh.ru/wp-content/uploads/2023/03/Стиль-Elevation-в-темной-теме-1024x646.png)
Когда мы разделяем фоновые стили, то можем гибко назначить второй цвет.
![Корректное использование стилей фона разного уровня в темной теме Как правильно использовать стили фона разного уровня в темной теме](https://handh.ru/wp-content/uploads/2023/03/Как-правильно-использовать-стили-фона-разного-уровня-в-темной-теме-1024x646.png)
Шаг №3. Вынести стили для обводок и разделителей
Стили для обводок и разделителей помогают локально изменить цвет только у этих компонентов.
Пример. Дизайнер нарисовал интерфейс и передал в разработку. Но потом смотрит на разделитель и думает: «Темновато» или «Светловато». Тогда он начинает править, и в процессе меняет цвета не только у разделителей, но и других элементов тоже. Это происходит из-за того, что один и тот же цвет был назначен элементам, которые не должны были поменяться.
Если же вынести разделители в отдельную группу, то цвет поменяется только для разделителя, а не у всех остальных компонентов.
Шаг №4. Задать разные стили для текста и иконок
Такой подход экономит время. Например, если иконки получатся слишком темными, то их цвет можно быстро заменить. Мы выделяем три стиля для текстов и иконок:
- Body — для основного цвета
- Secondary — для текстов и иконок второго уровня
- Tertiary — для плейсхолдеров
![Как вынести стили для текста и иконок Стили для текста и иконок](https://handh.ru/wp-content/uploads/2023/03/Стили-для-текста-и-иконок-1024x646.png)
Пример. Мы разработали приложение для электронного гипермаркета Ситилинк. В приложении мы использовали светло-серый цвет для иконок, неактивных точек каунтера, подписей, неактивного тега и плейсхолдеров. После релиза пользователи стали жаловаться, что текст плейсхолдера слишком светлый и виден не на всех устройствах.
![Один стиль для всех текстов в приложении Ситилинк В приложении Ситилинк был один стиль для всех текстов](https://handh.ru/wp-content/uploads/2023/03/В-приложении-Ситилинк-был-один-стиль-для-всех-текстов-1024x646.png)
Тогда мы сделали потемнее. Местами получилось хорошо, но активные точки каунтера оказались практически того же цвета, что и неактивные, а плейсхолдеры стали выглядеть, как уже заполненный текст. Дизайнеру пришлось перепроверять весь интерфейс и искать, где именно что-то пошло не так.
![](https://handh.ru/wp-content/uploads/2023/03/После-замены-цвета-все-элементы-стали-выглядеть-одинаково-1024x646.png)
В интерфейсе есть элементы, которые не должны менять цвет и тон при смене темы. Чтобы при инверсии ничего не сломалось, создаем для таких элементов дополнительные стили: Primary Dark и Primary White.
Пример. Бонусная программа Спортмастера. Текст у экрана бонусов Спортмастера не должен меняться при переключении в темную тему. Если добавить дополнительные стили для текста, то он не перекрасится вместе с остальными компонентами.
![](https://handh.ru/wp-content/uploads/2023/03/Экран-бонусов-не-должен-меняться-в-темной-теме-1024x646.png)
Шаг №5. Вынести цвета для ошибок и предупреждений в группу «Алерты»
Это помогает не запутаться и не создавать ошибочные цвета в других группах. Цвета из группы «Алерты» потом можно использовать в уведомлениях, иконках, полях ввода и других семантически подходящих элементах и состояниях, как в светлой, так и в темной теме.
Пример. Вынесли основные цвета алертов в приложении Спортмастера. Используем красный цвет для ошибок, оранжевый — для предупреждений, а зеленый — для подтвержденных действий.
![Цвета для алертов в приложении Спортмастер Алерты в приложении Спортмастер](https://handh.ru/wp-content/uploads/2023/03/Аллерты-в-приложении-Спортмастер-1024x646.png)
Шаг №6. Создать отдельные мини-темы для каждого типа кнопок
Мы выносим мини-темы для каждого типа кнопки. Выделяем три типа кнопок: Primary, Secondary и Additional. Так мы можем локально поменять цвет кнопки или текста на ней, не нарушив цветовую схему приложения.
Пример. У приложения Спортмастера две Primary-кнопки и по одной кнопке Secondary и Additional. Для каждой из них есть своя тема. Если бы мы использовали один синий цвет для всех кнопок, то Primary-кнопка не изменится в темной теме, а в Secondary получится нечитаемый темно-синий текст на темно-сером фоне.
![Кнопки в темной теме в приложении Спортмастер Кнопки в приложении Спортмастер](https://handh.ru/wp-content/uploads/2023/03/Кнопки-в-приложении-Спортмастер-1024x646.png)
Если добавить к каждой из кнопок свою мини-тему, то при переключении в темную тему ничего не сломается.
![Кнопки в Спортмастере в темной теме Как должны выглядеть кнопки в темной теме](https://handh.ru/wp-content/uploads/2023/03/Как-должны-выглядеть-кнопки-в-темной-теме-1024x646.png)
Шаг №7. Объединить единичные элементы в группу «Акценты»
Обычно к середине каждого проекта появляется группа элементов и цветов, которые не ясно, куда поместить. При этом они встречаются в интерфейсе всего один раз: это могут быть звезды рейтинга, каунтеры или иконки избранного.
![Элементы, которые относятся к группе «акценты» К группе «акценты» относятся элементы, которые нечасто используются в интерфейсе](https://handh.ru/wp-content/uploads/2023/03/К-группе-акценты-относятся-элементы-которые-нечасто-используются-в-интерфейсе-1024x646.png)
Чтобы не искать эти элементы по всему интерфейсу, мы выносим их в отдельную группу и так и называем «акценты». Потом акцентные стили можно переиспользовать для других мелких элементов, например, для текстовых полей. И при конвертацию в темную тему они не поменяются.
Но есть нюанс. Объединять разрозненные элементы в одну группу имеет смысл, если проект маленький и таких компонентов в интерфейсе немного. Если дизайнер работает над большой дизайн-системой, то акцентные стили нужно прописывать более детально.
![Что нужно, чтобы разработать темную тему Чек-лист, как разработать темную тему](https://handh.ru/wp-content/uploads/2023/03/Чек-лист-как-разработать-темную-тему-1024x646.png)