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

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

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

• Material Design (пара слов от их дизайнеров).
• iOS.
• Windows.

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

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

• Энди Кларк: поддержка тёмной темы на сайте через медийные запросы.
• Марцин Викари: изменение ключевых переменных в CSS.
  
• Один из самых дешёвых способов реализации через режимы наложения в CSS.
  

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

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

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

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

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

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

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

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

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

#интерфейсы #темнаятема