Оформить тёмную тему с умом: заметки, инструкции и примеры для дизайнеров интерфейсов

От Microsoft, «Яндекса», «ВКонтакте» и других компаний.

Базовые знания дают гайдлайны платформ:

Читая аргументацию для тёмной темы, ощущаешь дежавю. Ровно те же слова и схожесть решения были в Windows Phone (экономия батареи в OLED-экранах, меньше устают глаза — девять лет назад, если что). Photoshop перекрасился в тёмный в 2012 году. Что же, главное, что хотя бы в таком виде это доехало до массового пользователя.

​Интерфейс в Windows Phone

Новую волну интереса породила прошлогодняя macOS Mojave с тёмной темой оформления. Тогда же пошли первые толковые статьи на тему:

Токены

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

Например, хорошая история получилась у «ВКонтакте». Здорово пригодились уже существовавшие токены для внедрения в «Почте Mail.ru».

Естественно, такое хочется и в инструментах дизайна. Плагин Color System для Sketch позволяет организовать переменные для цвета в токены и переключать светлую и тёмную темы. Пара слов от автора.

Письма рассылки

Одна из проблем — почтовые клиенты, где тело письма приходит в виде HTML и картинок (там может быть что угодно). Элис Ли собрала шикарную памятку для создателей писем, также про это писал Кевин Мандевиль.

Рассказ о нескольких подходах к автоматизированному перекрашиванию писем рассылки в «Яндекс.Почте».

Браузеры и сайты

В ближайшем будущем это коснётся и сайтов. Chrome 76 поддерживает тёмную тему на уровне браузера. Она включится автоматически, если предусмотрена на сайте. Firefox тоже в деле.

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

Кейсы

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

  1. Superhuman. Шикарная памятка, советы хорошо подкреплены примерами и теоретическими выкладками.
  2. Microsoft. Компания раскатала её на все мобильные продукты в офисной линейке. Ещё от неё — про большой Office.
  3. Discord. Тёмная тема давно стала самой популярной, но сервис хотел сделать добротной и привычную светлую.
0
4 комментария
Yan Petrov

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

Ответить
Развернуть ветку
Camington

Это не хайп а давно назревшая необходимость. Речь всего лишь о том чтобы уравнять «в правах» светлые и тёмные темы. Сейчас явный перекос в сторону первых на всех платформах

Ответить
Развернуть ветку
Георгий Беглорян

very well

Ответить
Развернуть ветку
Максим Доника

https://blog.superhuman.com/how-to-design-delightful-dark-themes-7b3da644ff1f?

Годная статья с примерами по теме. 

Upd: не заметил, что ее уже упомянули выше :(

Ответить
Развернуть ветку
1 комментарий
Раскрывать всегда