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

Всем привет! На связи команда корпоративного мессенджера Compass. Сегодня расскажем, как создавали темную тему в нашем приложении.

Задача темной темы — не просто сделать «современно». Хорошо продуманная темная тема помогает снять напряжение с глаз в условиях низкой освещенности и делает работу в вечернее время более комфортной.

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

Над проектом трудилась отдельная команда темной темы Compass: CEO компании, руководитель отдела дизайна, 2 проджект менеджера, 2 менеджера продукта, 2 UX/UI-дизайнера, инженеры iOS, Android, Desktop и отдел QA.

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

Роман сделал первые наброски интерфейса темной темы и определил, какие оттенки в каких ситуациях применяются.

Вот несколько ключевых моментов, которые мы определили на старте:

1. Зафиксировали правила глубины. Глубина в темной теме регулируется цветом — чем темнее элемент, тем «дальше» в перспективе он ощущается. Это естественная природа света: если свет падает на стопку книг, то лучше всего будет освещена верхняя книга. Точно такой же принцип должен быть в приложении — это делает интерфейс объемным и гармоничным.

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

3. Приглушили некоторые цвета — например, цвета кнопок. В темной теме цвета из светлой темы выглядели слишком контрастными, поэтому мы сделали их более приглушенными. Из параметра HSL взяли яркость L (Lightness) и сделали ее на 6 пунктов меньше.

Важный момент: меняя яркость и контрастность одних элементов, нужно проверить, не испортило ли это восприятие других элементов — кнопок, плашек и т.д.

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

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

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

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

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

Сперва команда Compass разбила приложение по разделам.

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

В соответствии с локациями, весь процесс разработки был расписан по дням.

Работа шла итерационно:

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

Верстка, живые тесты и доработка

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

Когда iOS-разработчики сверстали первые локации темной темы и залили их в TestFlight, к тестированию подключили уже всю команду темной темы. Чтобы понять работоспособность идеи, нужно какое-то время с ней «пожить» — использовать несколько дней в разных условиях и при разном освещении.

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

Например, тусклые кнопки в экране участников стали ярче — было FFFFFF 2%, стало 10%.

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

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

Изменения для фона и текста, к которым мы пришли в результате тестирований:

1. Увеличили яркость текста сообщений в чате — подняли непрозрачность до 85%. Изначально мы взяли 70% от чистого белого для текста в чате, но потом заметили, что текст теряется в интерфейсе.

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

3. Оставили яркость текста в боковом меню, как была — 70% для названий и 30% для сокращенного текста последнего сообщения.

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

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

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

3. Оставили один и тот же цвет 1C1C1C для фона бокового меню и чата. Этот оттенок черного дал легкий коричневатый отлив — на самом деле, в нем нет никаких примесей, но такой оптический эффект сделал фон более мягким и спокойным.

4. Зафиксировали общую иерархию непрозрачности элементов и их насыщенности. Такие правила мы вывели для мобильных устройств:

• Высокое выделение текста — это самый яркий, важный и заметный оттенок на экране, его непрозрачность должна быть от 70 до 100%.
• Текст с низким акцентом — это текст, который передает информацию с самым небольшим приоритетом относительно прочих (сноска, подсказка и т.д.), его непрозрачность должна быть от 30 до 50%.
  
• Текст для неактивных состояний — его непрозрачность должна быть от 15 до 20%.
  

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

Нюансы свайпа

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

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

Чтобы сохранить визуальную логику при переходе от бокового меню к чату, мы придумали такой алгоритм:

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

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

Таким образом, мы сохранили и нужные цвета фона, и эффект «наезжания» чата на боковое меню.

Цвета ссылок, упоминаний и бейджей

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

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

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

Затемнение под поп-апом

Еще один нюанс — это отображение поп-апов. Когда поп-ап открывается в светлой теме, он становится главным визуальным акцентом. Светлый цвет, высокая яркость — все это отлично притягивает внимание. Затемнение под поп-апом работает как вспомогательный элемент — мозг фокусируется на ярком белом поп-апе.

В темной теме контрастность работает немного иначе. В чате используется белый текст и насыщенные относительно темного фона голубые цвета ссылок. Даже с умеренной плотностью они перетягивают на себя много внимания. Легкое затемнение не работает — нужно накладывать дополнительную подложку под поп-ап. Мы подняли уровень затемнения (черный цвет 000000) с 50% до 80%.

Так темное на темном смотрится гармонично, а ощущение акцентов не теряется.

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

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

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

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

В новой версии поменяли всю цветовую схему десктопа — от фона до оттенков других элементов.

Настройка текста и цветов в десктопе

Холодная тема показалась нам лучшим решением, и мы приступили к изменению текста:

1. Сильнее приглушили яркость текста в чате — до 70%.

Цвет текста с той же прозрачностью, как в мобильной версии (85%), выглядел в десктопе более резким из-за большой площади экрана. На большом экране глаз поглощает больше света, глядя на белый цвет. Высокая концентрация белого цвета мешала сконцентрироваться на тексте и вызывала визуальное «дрожание», поэтому нужно было снизить контраст фона и текста.

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

3. Яркость названий чатов в боковом меню сделали 80%, тогда как в мобильной версии было 70%. А вот текст последнего сообщения в меню оставили таким же — 30%.

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

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

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

В этом участвовала вся команда темной темы: дизайнеры, PO, PM, QA и CEO компании. По результатам тестов мы вносили изменения в дизайн, меняли оттенки и контрастность.

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

Тогда мы решили вернуться к теплому варианту темной темы с некоторыми изменениями:

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

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

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

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

Затемнение под поп-апами на десктопе мы сделали более плотными, чтобы сохранить иерархию — так же, как в мобильной версии темной темы.

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

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

Дизайнеры создали несколько альтернативных макетов в Figma — в итоге выбрали вариант с приглушенными тонами и более контрастной разметкой. Так получилось гармонично интегрировать онбординг в общий стиль темной темы.

Потому что разработчики скажут вам «спасибо», а вся команда сможет автоматизировать смену тем.

Раньше в Compass была только светлая тема — каждый цвет просто прописывался в коде, и у каждого цвета было свое название. С появлением темной темы появилась потребность в быстром способе смены цветов.

Отдел дизайна предложил перейти на переменные — вместо конкретных цветовых значений в коде использовать общие обозначения цвета. Например, переменная background содержит в себе два цвета — он будет отображаться либо как #FFFFFF для светлой темы, либо как #1C1C1C для темной темы.

С переходом на переменные наша цветовая палитра стала выглядеть так:

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

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

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

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

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

Если вам нужно улучшить коммуникацию в команде и настроить процессы, попробуйте бизнес-мессенджер Compass. Для команды до 10 человек приложение бесплатное. Если пользователей больше 10, у нас есть бесплатный пробный период на 30 дней. И самое приятное — теперь мессенджер доступен на своем сервере.

• Как сделать дизайн доступным для всех и построить компанию стоимостью 40+ миллиардов долларов
• 6 сигм: как повысить качество работы и процессов в компании
• Цикл Деминга: 4 шага на пути к улучшению качества продукта
• User Story — как писать и зачем использовать
• Перфекционизм: почему может плохо влиять на жизнь и работу, и что с этим делать