Привет! Я Женя, CPO в корпоративном мессенджере Compass.

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

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

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

Шаг 1. Подобрали цветовой профиль

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

Что мы сделали на первом этапе:

1. Установили правило глубины. Темные элементы в приложении должны располагаться дальше в перспективе, чем светлые.

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

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

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

5. Установили два оттенка цвета из белой палитры. В темной теме цвета регулируются снижением прозрачности. Чем она больше, тем более серым становится цвет элемента, потому что через него начинает просвечивать темный фон. Если оставить эту логику, то при верстке слои будут накладываться друг на друга.

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

Затем согласовали концепцию, цветовой профиль темной темы и стали собирать макеты мессенджера. На тот момент предстояло изменить больше 2,5 тысяч экрано-состояний для трех версий приложения: декстопной, Android и iOS.

Шаг 2. Разработали темную тему для мобильной версии приложения

Разделили приложение на несколько частей:

• системные и обычные чаты;

• боковое меню;

• карточка пользователя;

• экраны статистики;

• чат-боты;

• комментарии;

• треды;

• мелкие элементы вроде поп-апов, настроек, экранов ошибок, заглушек и т. д.

Затем, в соответствии с классификацией, составили график процесса разработки и взялись за работу. На видео ниже – небольшой фрагмент всех экрано-состояний в Figma.

Работу проводили итерациями:

1. Дизайнеры готовили локации в темных цветах — все элементы получили по нескольку вариантов цветовых схем.

2. Отдел дизайна проводил созвон и проверял прототипы в Figma. Ребята находили ошибки, вносили правки и вновь запускали тесты.

3. После отработки ошибок дизайнеры отправляли макеты инженерам на верстку, а сами брали новую партию локаций.

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

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

Тесты для Android-устройств проводили отдельно из-за цветопередачи — она отличалась от смартфонов на iOS. Нам было важно, чтобы темная тема была одинаково хороша на разных экранах: от IPS до OLED.

Вот как мы изменили цвета фона и текста на основании проведенных тестов:

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

2. Сделали ярче имена в чате. Только на этапе тестов и при сравнении одной версии экрана с другими мы поняли, что нужно повысить яркость имен до 100%. Так нам удалось сбалансировать акценты в темной теме.

3. Не стали менять яркость текста в боковом меню. К этому решению также пришли во время тестирования: оставили 70% непрозрачности для названий чатов и 30% для текстов сообщений.
   
   Причин такому решению несколько. Первая: боковое меню как слой ниже в иерархии, чем чат. Оно не должно отвлекать внимание, поэтому лучше сделать его менее ярким.

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

4. Установили для фонов бокового меню и чата общий черный цвет: 1C1C1C. Хотя в нем нет примесных цветов, кажется, что в фоне присутствует легкий оттенок коричневого. Этот оптический эффект делает интерфейс мягче и спокойнее.

5. Утвердили иерархию непрозрачности и насыщенности элементов. Мы установили следующие правила для мобильной версии темной темы:

   • яркость основного текста — от 70 до 100%;

   • яркость текста низкого приоритета, например сносок или подсказок, — от 30 до 50%;

   • яркость текста для неактивных состояний — от 15 до 20%.

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

Особенности свайпа

В светлой теме мы использовали разные цвета для чата и бокового меню. Когда вы делаете свайп, чат как слой находится выше, чем меню — то есть светлое накладывается на темное. Эта иерархия выглядит естественно.

В темной теме мессенджера для телефонов у бокового меню и чата общий цвет фона — при свайпе они сливались. Мы пробовали накладывать тени и добавлять цвета — оба решения смотрелись плохо.

Вот что придумали:

• Когда у пользователя открыто боковое меню, справа виден более светлый кусочек окна чата. Его собственная яркость — 3% от чистого белого. На него мы наложили еще один слой с непрозрачностью 2%. Такой незначительный элемент дает контраст, который визуально отделяет фон чата от бокового меню.

• Когда пользователь делает свайп из меню в чат, дополнительный слой исчезает и остается только основной, «нормальный» фон. Так нам удалось передать правильное ощущение глубины и иерархии слоев.

Ссылки, упоминания и бейджи

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

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

Затемнение от всплывающего окна

При вызове поп-ап в светлой теме он становился самым ярким на экране и привлекал внимание. Добиться этого эффекта помогало затемнение основной области.

В темной теме затемнение работает так же, но его нужно делать интенсивнее. Поэтому использовали для затемнения чистый черный цвет 000000 и подняли его уровень с 50% до 80%. Так добились гармоничного отображения темного на темном и смогли сохранить нужные акценты.

Так, маленькими итерациями, мы доработали цветовую схему темной темы для мобильных устройств. И через 30 дней закончили 1200+ экрано-состояний темной темы Compass.

Шаг 3. Разработали темную тему для десктопной версии приложения

В первую очередь подготовили сразу две цветовые схемы.

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

В результате сделали фон темной темы теплым, с добавлением коричневого — цвет #1С1С1С. Но затем мы подумали, что будет интересно посмотреть него в холодных тонах, и сделали альтернативу — добавили к основному цвету немного синего и получили цвет #1C1E20.

Изменение цвета текстов

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

1. Сделали текст в чате менее ярким относительно мобильной версии. Там его непрозрачность составляла 85%, здесь ее снизили до 70%. Так поступили, потому что экран компьютера больше, чем у телефона. Следовательно, поток белого света в глаза сильнее, и они больше напрягаются.

2. Для снижения нагрузки на глаза мы также понизили непрозрачность имен в чате со 100% до 80%.

3. Повысили яркость названий чатов в боковом меню с 70% до 80%. Цвет текста сообщений не трогали — он остался на уровне 30%. Благодаря таким изменениям нам удалось сбалансировать оттенки элементов. Чат получился ярче бокового меню: мы визуально разграничили их.

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

Когда закончили работать над меню и чатом в холодной версии темы мы разработали другие локации приложения. А потом проверяли их на разных экранах — от Retina-дисплеев макбуков до ЖК-панелей из офиса. Ниже на видео – кусочек процесса тестирования.

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

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

В итоге решили испытать теплый вариант темной темы. Но перед этим внесли изменения:

1. Сделали фон неоднородным. Для чата оставили цвет #1С1С1С, а боковое меню сделали светлее — перекрасили его в цвет #212121. Так удалось соблюсти нужные акценты: теперь пользователь фокусировался на более темном чате.

2. Повысили непрозрачность текста в чате с 70% до 75%.

3. Понизили яркость имен в чате с 80% до 75%.

Поп-апы и ховеры

Затемнение под всплывающими окнами мы сделали плотнее и насыщеннее. Благодаря этому удалось лучше подчеркнуть иерархию элементов. То же самое сделали в мобильной версии темной темы.

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

Шаг 4. Изменили экраны онбординга

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

Дизайнеры разработали пару макетов экрана в Figma. Из них мы выбрали тот, в котором более спокойные тона и яркая разметка.

Шаг 5. Внедрили переменные и разработали итоговую палитру

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

Дизайнеры предложили поместить их в переменные — задать общее обозначение двум цветам одного элемента, и переключать их в зависимости от установленной темы. Допустим, нам необходимо менять цвет фона чата с #FFFFFF на #1C1C1C. Мы можем прописать переменную для двух этих значений. Тогда при переключении темы переменной будет автоматически присваиваться нужный цвет.

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

Да, перейти на переменные трудно, но в будущем — сэкономит команде время и силы. 

Подобное решение, к слову, применяется в iOS и MacOS. Разработчики Apple тоже используют динамические цвета, которые привязаны к переменным. Выбирая их значения, пользователи изменяют цветовую схему операционной системы.

Чем вдохновлялись, когда делали темную тему

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

1. Темная тема в приложении Line. Она достаточно продуманная, и часть дизайнерских решений подсмотрел там. 

2. Статья в блоге SuperHuman. Там полезная информация, что стоит изучить, с кейсами и примерами. Поможет углубиться в тему перед тем, как начинать разработку. 

3. Сборник веб-интерфейсов в темной цветовой схеме. Поможет вдохновиться и найти подходящие решения. 

4. Гайдлайн от Apple. Там мало текста, поэтому придется провалиться в несколько ссылок, чтобы почитать подробнее. 

Заключение

Для создания темной темы недостаточно просто инвертировать светлую тему. Это кропотливое изучение пользовательского опыта: как клиенты взаимодействуют с приложением и при каких условиях. Затем — длительный процесс анализа, многоэтапного тестирования и постепенной настройки десятков элементов так, чтобы они сочетались друг с другом.

Многое решают референсы – они помогают найти лучшие практики, проанализировать их и переработать.

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