Как сделать темную тему: от дизайна до разработки. Кейс мессенджера Compass

В Hi-Tech Mail.ru провели опрос о том, какую тему в оформлении сайтов и сервисов предпочитают пользователи. Оказалось, что больше 34% людей выбирают темную тему.

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

У корпоративного мессенджера Compass темная тема появилась в 2024 году. В статье делимся опытом, как наша команда разрабатывала новое оформление.

{{cta_banner}}

1 этап: создали цветовой профиль

В создании темной темы участвовала большая команда:

• глава компании;
• руководитель отдела дизайна;
• project manager и product manager;
• UI и UX-дизайнеры;
• инженеры десктопной и мобильной версий;
• отдел тестирования продукта.

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

Проще всего инвертировать весь интерфейс из темного в светлый. Так почти ничего делать не нужно. Или взять за основу гайдлайны Apple или Google. Но у каждого из этих вариантов существуют свои недостатки.
Если включить инверсию, цвета могут стать очень контрастными. Гайдлайны же в основном можно использовать как пример, но слепо следовать им не стоит. Для создания темной темы нужно опираться на особенности продукта. Важны не правила и настройки, установленные кем-то, а хороший результат.

Роман Морозов, руководитель отдела дизайна Compass

{{pc}}

{{/pc}}

{{mobile}}

{{/mobile}}

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

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

Благодаря методу JTBD Роман разработал первые варианты интерфейса. Затем команда определила 5 ключевых моментов, которые влияют на конечный результат:

1. Установили правила глубины

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

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

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

2. Уменьшили контрастность между черным и белым цветами

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

{{pc}}

{{/pc}}

{{mobile}}

{{/mobile}}

3. Уменьшили яркость некоторых элементов

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

Поэтому для некоторых элементов использовали более спокойные оттенки. Для этого в параметре HSL меняли настройки: яркость L (Lightness). Например, для одной из кнопок сделали ее на 6 значений ниже. Вот, что получилось:

{{pc}}

{{/pc}}

{{mobile}}

{{/mobile}}

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

4. Выбрали базовые цвета

Чтобы создать темную тему с «чистым» интерфейсом, нужно понять, как сочетаются друг с другом оттенки всех элементов. К примеру, у заглушек есть только один цвет, а у разделительных полос — 3. Нужно понять, как эти элементы выглядят в разных сочетаниях.

{{pc}}

{{/pc}}

{{mobile}}

{{/mobile}}

5. Назначили два оттенка без прозрачного цвета

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

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

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

{{pc}}

{{/pc}}

{{mobile}}

{{/mobile}}

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

{{pc}}

{{/pc}}

{{mobile}}

{{/mobile}}

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

Роман Морозов, руководитель отдела дизайна Compass

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

{{cta_op_banner}}

2 этап: продумали темную тему для смартфонов

В корпоративном мессенджере много экранов:

• чаты и треды;
• галерея и иллюстрации;
• настройки;
• раздел со статистикой отдельных сотрудников;
• звонки;
• заметки и многое другое.

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

{{pc}}

{{/pc}}

{{mobile}}

{{/mobile}}

Команда работала итерациями:

1. Дизайнеры разрабатывали несколько макетов темной темы.
2. Затем команда созванивалась и в режиме онлайн на сайте Figma изучала макеты, вносила корректировки.
3. Когда все было готово, прототипы отдавали разработчикам на верстку. Дизайнеры начинали создавать новые макеты.
4. Когда разработчики заканчивали верстку, команда переходила к тестам.
5. По их итогам снова меняли интерфейс и настройки. Старались выбрать темную тему и все элементы интерфейса, которые станут максимально комфортными для пользователей.

Тесты в реальных условиях

Команда дизайнеров начинала разработку темной темы с основных экранов корпоративного мессенджера: чата и бокового меню.

Разработчики приложений для iOS подготовили несколько экранов с темной темой, добавили их для бета-тестирования на сайт TestFlight. После этого вся команда начала тестировать темный интерфейс в реальных условиях.

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

Важно понять, как выбранное решение воспринимается со стороны. Нужно попробовать поставить себя на место современных пользователей.

{{pc}}

{{/pc}}

{{mobile}}

{{/mobile}}

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

Вероника, дизайнер интерфейсов Compass

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

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

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

Вероника, дизайнер интерфейсов Compass

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

{{pc}}

{{/pc}}

{{mobile}}

{{/mobile}}

Такое же тестирование делали для Android. У телефонов на Android отличается цветопередача, поэтому важно было поменять интерфейс, а не сделать копию iOS-версии.

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

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

Благодаря тестированиям удалось подобрать идеальные параметры отображения фона и контента:

1. Чтобы не делать текст сообщений слишком контрастным, сначала дизайнеры устанавливали 70% непрозрачности белого цвета. Но после тестов поняли, что так текст не очень хорошо видно. Поэтому показатель увеличили до 85%.

2. Изначально собирались делать имена пользователей менее яркими. Но после тестов поняли, что нужна 100% яркость. И такое значение все еще не будет давать глазам уставать.

3. Для текста в боковом меню оставили такие параметры, которые выбрали изначально. Названия чатов или функций — 70%, второстепенный текст — 30%. Так воспринимать интерфейс будет легче.

{{pc}}

{{/pc}}

{{mobile}}

{{/mobile}}

{{mobile}}

{{/mobile}}

Яркость текста выбирали исходя из иерархии слоев. Чат важнее, чем боковое меню. Поэтому и яркость текста в чате выше.

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

4. Для фона выбрали глубокий черный цвет — 1C1C1C. Решили сделать его одинаковым для бокового меню и чатов.

Хотя это черный цвет, в интерфейсе оттенок немного искажается. Кажется, что в фоне есть доля коричневого цвета. Это уменьшает контрастность.

5. Для мобильной версии установили такие правила:

• Для выделения главных акцентов текста выбрали непрозрачность в диапазоне 70–100%.
• Для элементов с низкими акцентами (подсказки) использовали непрозрачность в диапазоне 30–50%.
• Для неактивных состояний выбрали минимальные значения непрозрачности в диапазоне 15–20%.

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

Поэтому для нее подобрали цвета отдельно. У этого решения есть свои достоинства. Темная тема с приглушенными цветами выглядит более гармоничной для человеческого глаза.

{{pc}}

{{/pc}}

{{mobile}}

{{/mobile}}

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

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

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

{{pc}}

{{/pc}}

{{mobile}}

{{/mobile}}

Но в темной теме у этих экранов одинаковый фон. Поэтому нужно было придумать новую механику перехода из одного экрана в другой.

Вот, как работает свайп в темной теме:

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

{{pc}}

{{/pc}}

{{mobile}}

{{/mobile}}

Цвета основных элементов

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

Поэтому для каждого инструмента подобрали разные оттенки цвета:

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

{{pc}}

{{/pc}}

{{mobile}}

{{/mobile}}

Единственный тип элементов темной темы, который не пришлось менять — это бейджи. Почти все цвета из светлой темы сохранили для темной. Изменили лишь 2 бейджа, которые в темной теме выглядели недостаточно ярко.

{{pc}}

{{/pc}}

{{mobile}}

{{/mobile}}

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

Когда в светлой версии приложения появляется всплывающее окно, оставшаяся часть интерфейса затемняется на 50%. Это позволяет сконцентрировать пользователя на поп-апе.

{{pc}}

{{/pc}}

{{mobile}}

{{/mobile}}

В темной теме цвет текста более яркий, поэтому затемнения интерфейса на 50% оказалось недостаточно. Если использовать такой же подход, что и в светлой теме, пользователь будет отвлекаться на другую часть интерфейса.

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

{{pc}}

{{/pc}}

{{mobile}}

{{/mobile}}

{{mobile}}

{{/mobile}}

Таким образом команда поэтапно меняла параметры всех элементов интерфейса.

{{pc}}

{{/pc}}

{{mobile}}

{{/mobile}}

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

3 этап: продумали темную тему для десктопа

Для десктопа команда разработала даже 2 версии темной темы: в холодных и теплых оттенках.

Сначала работали по такой же схеме, как и при создании dark theme для мобильного:

1. Разработали экраны чата и бокового меню.
2. Протестировали темную тему через различные устройства, в разнообразных помещениях и с разным освещением. В процессе экспериментов проверяли различные мониторы.

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

{{pc}}

{{/pc}}

{{mobile}}

{{/mobile}}

Мобильное приложение и десктопная версия, конечно, сильно отличаются. Мы знали, что не получится просто повторить те же идеи, что использовали для iOS или Android. Поэтому тестировали различные варианты оформления.

Алексей, дизайнер интерфейсов Compass

Для темной версии десктоп-приложения изменили многие параметры: фон, цвета элементов и текста.

Выбор текста и оттенков

Из двух вариантов выбрали темную тему в холодных тонах. Затем начали работать с оформлением текста:

1. Уменьшили интенсивность текста в чате. Для iOS и Android ранее выбрали непрозрачность 85%, но для десктопа этот вариант не подходит. Поскольку площадь экрана намного больше, такой яркий белый цвет оказался слишком контрастным. Поэтому установили значение непрозрачности чуть ниже — 70%.

2. По такому же принципу изменили яркость имен. Установили непрозрачность белого цвета на 80% — имена пользователей стали читаться лучше.

{{pc}}

{{/pc}}

{{mobile}}

{{/mobile}}

3. Решили изменить и названия чатов. Здесь увеличили непрозрачность до 80%. Яркость остального текста оставили без изменений на значении 30%.

{{pc}}

{{/pc}}

{{mobile}}

{{/mobile}}

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

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

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

Поэтому в итоге команда приняла решение все же разрабатывать темную тему в теплых оттенках, но с некоторыми нюансами:

1. Фон бокового меню все же сделали светлее фона чата. Это позволило разграничить рабочие зоны. Так пользователи фокусируются на чате.
2. Увеличили непрозрачность текста в чате до 75%. С новым фоном рабочее окно стало выглядеть лучше.
3. Уменьшили непрозрачность для имен до 75%. Теперь текст и имена одинаково яркие, но при этом они не сливаются.

{{pc}}

{{/pc}}

{{mobile}}

{{/mobile}}

Всплывающие окна и ховеры

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

{{pc}}

{{/pc}}

{{mobile}}

{{/mobile}}

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

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

{{pc}}

{{/pc}}

{{mobile}}

{{/mobile}}

Для активации темной темы мессенджера в десктопном приложении нужно нажать на свой профиль. В окне профиля внизу есть поле «Тема оформления». Здесь можно выбрать один из вариантов: светлая тема, темная или системная.

4 этап: изменили экраны онбординга

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

{{pc}}

{{/pc}}

{{mobile}}

{{/mobile}}

{{mobile}}

{{/mobile}}

5 этап: добавили финальные палитры

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

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

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

• для светлой темы — 677380
• для темной — #FFFFFF

Теперь цветовая палитра выглядит так:

{{pc}}

{{/pc}}

{{mobile}}

{{/mobile}}

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

К примеру, у нас для красной кнопки выбраны разные оттенки для каждой темы. При этом в коде названия одинаковые — «красная кнопка».

Роман, руководитель отдела дизайна Compass

{{pc}}

{{/pc}}

{{mobile}}

{{/mobile}}

Использование переменных упрощает обслуживание сервиса. Не нужно постоянно менять цвета во всех темах, достаточно изменить один параметр.

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

Алексей, дизайнер интерфейсов Compass

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

{{pc}}

{{/pc}}

{{mobile}}

{{/mobile}}

Итог

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

А еще при реализации проекта нужно учесть много деталей:

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

Одно из преимуществ темной темы: экономия заряда устройства. Этот ночной режим меньше садит батарею. Поэтому некоторые пользователи предпочитают именно такой стиль сайта, браузера Яндекс, почты или игры на компьютере. Темная тема может выглядеть привлекательнее чисто визуально.

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

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

Это не все приятные новости для пользователей мессенджера на сегодня. Compass можно развернуть на собственном сервере, а для команд до 10 человек его использование всегда бесплатно. Для больших команд есть бесплатный тестовый период — 30 дней.