Про тёмные и светлые темы

Про тёмные и светлые темы

Автор: Саша ОкуневСаша Окунев

Мнение 1: Против пустой траты денег

Годами жили с белым фоном и с тёмным шрифтом, горя не знали. Но вдруг пошла идиотская мода на тёмные темы и теперь у каждого калькулятора она непременно должна быть. Apple не фичерит приложение, если у него нет поддержки тёмной темы. Но с другой стороны в админках она вроде как и не нужна, потому что невозможно померить в рублях воздействие темы на глаза. Ни один пользователь внутри не пожаловался, что ему белый выжигает глаза, потому что их проблемы вообще в другой плоскости лежат: с основными задачами бы разобраться. Внедрять тёмные темы дорого и сложно. Пока мы не поймём конкретное влияние тёмной темы на доход, внедрять их не будем.

Мнение 2: За выбор темы

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

Тёмные темы раньше не поддерживались, поскольку индустрия интерфейсов и ОС до них не дозрели. Но теперь время пришло и внедрять их стало сильно проще, поскольку смена темы на лету поддерживается уже на уровне ОС. Эту настройку не нужно хранить ни на фронте, ни на бэке, она глобальна на самом высоком уровне и может затронуть все приложения и открытые сайты разом. Человек сам определяет тему и управляет ей глобально. Каждому сайту или приложению больше не нужно хранить эту настройку, они могут узнавать это автоматом и перекрашиваться в соответствии с ней.

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

Риски

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

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

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

Синхронизироваться по именам переменных в цветах — обязательная практика в хорошей дизайн-системе. Однако, переписать существующий продукт, чтобы он стал поддерживать тёмную тему в случае если разрабы не использовали семантику сразу — огромная и неизбежная боль. Им придётся в каждом компоненте менять переменные с обычных абстрактных цветов вроде BluePale на семантические вроде Primary или PrimaryHover.

Это решение гораздо легче принимать в самом начале работы над дизайн-системой и стоит учитывать, по зубам ли нам эти игры.

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

Как я прозрел

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

Не видел ценности во внедрении семантических палитр и тёмной темы во внутренних продуктах: админках и приложениях для сотрудников. Гораздо дружелюбнее для дизайнера выглядит простая компактная палитра без большого количества внешне похожих кружков. Теперь считаю, что семантика в крупных дизайн-системах вроде нашей неизбежна. Меня подтолкнуло к этому выводу то, что дизайн-системы внутри Озона объединяются. Я всегда выступал за унификацию. А если у нас есть единый стандарт, по которому мы проектируем, нет причин не использовать выгоду от присутствия тёмной темы.

📎
Хорошая статья по поводу внедрения тёмных тем на мобилах была у Red Mad Robot на Хабре.

Обратил внимание, что в Ноушне пользуюсь тёмной темой гораздо чаще, чем белой. slashdesigner.ru всегда был белым и это давно меня раздражало. Решил провести эксперимент и в качестве основной темы временно оставил тёмную, чтобы собрать фидбэк с читателей. Пока super.so, на базе которого работает сайт, не поддерживает автоматическую смену темы, но уверен, что они доработают эту возможность и тогда сайт сможет перекрашиваться автоматом.