Собрал вместе все материалы о тёмной теме оформления, которые выходили в дайджесте.
Гайдлайны платформ
Material Design
Статьи и выступления дизайнеров Google:
Подробнейший разбор особенностей создания от Chethan KVS. Он проходится по всем основным аспектам подготовки цветов, состояний элементов, иллюстраций и т.п. Читайте также мощный обзор всех приложений Google на Android с тёмной темой оформления.
iOS и macOS
Статьи и выступления дизайнеров Apple:
Windows
Читая аргументацию для тёмной темы ощущаешь дежавю. Ровно те же слова и схожесть решения была в Windows Phone (экономия батарейки в OLED-экранах, меньше устают глаза — 9 лет назад, если чо). Фотошоп перекрасился в тёмный в 2012 году. Штош — главное, что хотя бы в таком виде это доехало до массового пользователя.
Исследования о восприятии тёмной и светлой темы проводила UX-лаборатория Mail.ru Group и Nielsen/Norman Group. В большинстве случаев светлая тема облегчает чтение либо разницы нет.
Новую волну интереса породила прошлогодняя macOS Mojave с тёмной темой оформления. Там же пошли первые толковые статьи на тему:
Недавний тест Engadget показал, что для iPhone с OLED-экранами тёмная тема держит батарейку гораздо лучше.
Токены
Тёмная тема — один из главных драйверов внедрения токенов. Чтобы покрасить одни и те же элементы интерфейса разными цветами в разных ситуациях, компании внедряют переменные для цветов и находят способ их раздачи в продукт. Например, хорошая история получилась у ВК. Здорово пригодились уже существовавшие токены для внедрения в Почте Mail.ru.
Самый простой способ сделать это — стилизованные компоненты на React. Можно прикрутить и к генераторам статических сайтов.
Естественно, такое хочется и в инструментах дизайна. Например, плагин Color System для Sketch позволяет организовать переменные для цвета в токены и переключать светлую и тёмную тему. Пара слов от автора.
Письма рассылки
Одна из проблем — это почтовые клиенты, где тело письма приходит в виде HTML и картинок (там может быть что угодно). Alice Li собрала шикарную памятку для создателей писем, также писал про это Kevin Mandeville.
Рассказ о нескольких подходах к автоматизированному перекрашиванию писем рассылки в Яндекс Почте.
Браузеры и сайты
В ближайшем будущем это коснётся и сайтов. Chrome 76 поддерживает тёмную тему на уровне браузера. Если сайт имеет её, она включится автоматом. Firefox тоже в деле. А Chrome 78 и мобильная Opera делают это насильно, даже если сам сайт не умеет. Правда, для Progressive Web Apps пока работает не всё (но есть обходные способы — например, для экрана загрузки).
Adhuhan собрал объёмную памятку. Koos Looijesteijn описывает способ определения тёмной или светлой темы, которую нужно включить пользователю исходя из его настроек и времени дня. Он также делает плавный переход при переключении. Max Böck и Kilian Valkhof дают советы по релизации переключателя. Ну а Jecelyn Yeen показывает, как сделать всё это на личном сайте.
Другие аспекты
Dalton Maag сделали вариативный шрифт, оптимизированный для светлой и тёмной темы оформления.
Кейсы
Вот что рассказывают компании, которые прикрутили её к продуктам:
- Superhuman. Шикарная памятка, советы хорошо подкреплены примерами и теоретическими выкладками.
- Stack Overflow. Много о манипуляциях с цветом, чтобы добиться гармоничной палитры.
- Microsoft. Они раскатили её на все мобильные продукты в офисной линейке. Ещё от них про большой Office.
- Discord. Тёмная давно стала самой популярной, но они хотели сделать добротной и привычную светлую тему.
- Slack. Они сделали это через токены.
- Instagram. Внедрение в iOS-приложении.
- Wego. Советы на основе своего опыта.
- Clubhose. Они сделали забавный инструмент для сокращения количества цветов, обязательный этап перехода на дизайн-систему.
- GitLab. Для редакторов кода это стандарт, но сам веб-интерфейс нужно было проработать.
В общем, если вы ещё не начали делать тёмную тему — эта подборка (и сайт-коллекция от Presh Onyee) срежет кое-какие углы для вас.
4 comments