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

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

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

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

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

Первые шаги — создание цветового профиля

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

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

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

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

Наш дизайн-руководитель в естественной среде обитания
Наш дизайн-руководитель в естественной среде обитания

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

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

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

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

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

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

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

Снизили параметр L (Lightness) с 39 до 33
Снизили параметр L (Lightness) с 39 до 33

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

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

Стартовая цветовая палитра темной темы Compass
Стартовая цветовая палитра темной темы Compass

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

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

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

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

Сверху обозначен цвет с прозрачностью, снизу — чистый цвет
Сверху обозначен цвет с прозрачностью, снизу — чистый цвет
Роман
Руководитель отдела дизайна Compass

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

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

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

Разработка темной темы для мобильных приложений

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

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

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

Часть экрано-состояний Compass

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

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

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

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

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

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

Дизайнер интерфейсов Compass

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

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

Вероника

Дизайнер интерфейсов Compass

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

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

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

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

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

Шутки помогают пережить интенсивный рабочий процесс
Шутки помогают пережить интенсивный рабочий процесс

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

В светлой теме Compass кусочек светлого чата (справа) «наезжает» на темное боковое меню при свайпе
В светлой теме Compass кусочек светлого чата (справа) «наезжает» на темное боковое меню при свайпе

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

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

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

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

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

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

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

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

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

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

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

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

Затемнение под поп-апом в светлой теме
Затемнение под поп-апом в светлой теме

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

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

Затемнение под поп-апом в темной теме увеличили на 30%
Затемнение под поп-апом в темной теме увеличили на 30%

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

<p>Финальная цветовая палитра темной темы Compass для мобильных устройств</p>

Финальная цветовая палитра темной темы Compass для мобильных устройств

Спустя месяц наша команда сделала около 1200 экрано-состояний темной версии Compass для мобильных устройств.

Разработка десктопной версии темной темы

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

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

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

Сравнение теплого и холодного варианта темной темы Compass для десктопа
Алексей

Дизайнер интерфейсов Compass

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

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

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

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

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

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

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

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

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

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

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

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

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

Тесты проводились на десятках мониторов — от ретины дисплеев MacBook до офисных ЖК-панелей.

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

СЕО компании и члены команды тестируют темную тему Compass в одном из офисов

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

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

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

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

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

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

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

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

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

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

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

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

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

Экраны онбординга

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

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

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

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

Переход на переменные и создание финальной палитры

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

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

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

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

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

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

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

Например, красная кнопка имеет один цвет для светлой темы, а при изменении темы на темную появляется другой оттенок красного. Но в коде она всегда называется просто «красная кнопка».

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

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

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

Алексей

Дизайнер интерфейсов Compass

Это очень объемная работа — запрограммировать суммарно более двух тысяч экранов так, чтобы цвета автоматически переключались в зависимости от темы. При этом на десктопе и мобилке разные оттенки, и у каждого цвета по 2-3 варианта.

В iOS и MacOS разработчики тоже используют подход с динамическими цветами. Вместо жёстких цветов в коде там определен набор переменных. И меняя значения этих переменных в настройках темы, пользователь полностью меняет цветовую схему всей ОС.

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

Итоги

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

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

Сейчас темная тема Compass доступна на iOS и в десктопной версии приложения. Версия для Android выйдет в середине апреля.

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

Что почитать, чтобы творить как профи:

8383
59 комментариев

-Антох, на сколько сложно выбрать цвет?
-пизнес

😂 красавцы

9
Ответить
Ответить

любитель темной темы смотрит на светлую

7
Ответить

Ночью, на максимальной яркости 🙃

Ответить

Темная тема у вас просто сказка ☺️
Кайфую каждый день, моё почтение ❤️

6
Ответить

Рады, что темная тема понравилась 🤗

4
Ответить