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