Юрий Ветров об интерфейсах
  • Главная
  • Статьи
  • Дайджест
  • Конференции
  • Дизайн-менеджмент
  • Дизайн-системы
  • Заметки
  • О блоге
Юрий Ветров об интерфейсах
Юрий Ветров об интерфейсах
  • Главная
  • Статьи
  • Дайджест
  • Конференции
  • Дизайн-менеджмент
  • Дизайн-системы
  • Заметки
  • О блоге

Тёмная тема оформления

  • 17 мая 2020

Собрал вместе все материалы о тёмной теме оформления, которые выходили в дайджесте.

Гайдлайны платформ

Material Design

Статьи и выступления дизайнеров Google:

  • Пара слов от их дизайнеров
  • How to Design a Dark Theme Using Material
  • Dark Theme & Gesture Navigation
  • Design a dark theme with Material and Figma

Подробнейший разбор особенностей создания от Chethan KVS. Он проходится по всем основным аспектам подготовки цветов, состояний элементов, иллюстраций и т.п. Читайте также мощный обзор всех приложений Google на Android с тёмной темой оформления.

iOS и macOS

Статьи и выступления дизайнеров Apple:

  • Introducing Dark Mode
  • Implementing Dark Mode on iOS
  • Supporting Dark Mode in Your Web Content
  • Advanced Dark Mode

Windows

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

Исследования о восприятии тёмной и светлой темы проводила UX-лаборатория Mail.ru Group и Nielsen/Norman Group. В большинстве случаев светлая тема облегчает чтение либо разницы нет.

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

  1. Andy Clarke: поддержка на сайте через media queries.
  2. Marcin Wichary: изменение ключевых переменных в CSS.
  3. Один из самых дешёвых способов реализации через режимы наложения в CSS.

    Недавний тест 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 сделали вариативный шрифт, оптимизированный для светлой и тёмной темы оформления.

    Кейсы

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

    1. Superhuman. Шикарная памятка, советы хорошо подкреплены примерами и теоретическими выкладками.
    2. Stack Overflow. Много о манипуляциях с цветом, чтобы добиться гармоничной палитры.
    3. Microsoft. Они раскатили её на все мобильные продукты в офисной линейке. Ещё от них про большой Office.
    4. Discord. Тёмная давно стала самой популярной, но они хотели сделать добротной и привычную светлую тему.
    5. Slack. Они сделали это через токены.
    6. Instagram. Внедрение в iOS-приложении.
    7. Wego. Советы на основе своего опыта.
    8. Clubhose. Они сделали забавный инструмент для сокращения количества цветов, обязательный этап перехода на дизайн-систему.
    9. GitLab. Для редакторов кода это стандарт, но сам веб-интерфейс нужно было проработать.

    В общем, если вы ещё не начали делать тёмную тему — эта подборка (и сайт-коллекция от Presh Onyee) срежет кое-какие углы для вас.

    Юрий Ветров

    Директор по бренду и дизайну Muse Group, ранее — Райффайзен Банка и Mail.ru Group. Я руковожу несколькими командами, которые отвечают за дизайн бренда и интерфейсов. Веду блог и курс о дизайн-менеджменте, делаю дайджесты, со-организовывал Fintech Design Conf, Mail Design Conf и московский Dribbble Meetup, Russian Design Cup, читаю лекции в Британке, курирую курс Future London Academy в Лондоне, публикуюсь на Smashing Magazine, UXmatters и UX Collective. Подробнее обо мне.

    Другие статьи по теме
    View Post
    • Дизайн-системы
    • Рецензии

    Книги о дизайн-системах

    • Юрий Ветров
    • 26 апреля 2018
    View Post
    • Дизайн-менеджмент
    • Дизайн-системы
    • Статьи

    UX-стратегия на практике. Часть 3 — Платформенное мышление

    • Юрий Ветров
    • 11 августа 2015
    View Post
    • Дизайн-менеджмент
    • Дизайн-системы
    • Кейсы
    • Статьи

    Унификация через «бургерный дизайн»: Фреймворк Mail.Ru Group для контент-проектов

    • Юрий Ветров
    • 21 июля 2015
    View Post
    • Дизайн-менеджмент
    • Дизайн-системы
    • Кейсы
    • Статьи

    Унификация дизайна: Фреймворк Mail.Ru Group для мобильного веба

    • Юрий Ветров
    • 17 февраля 2015
    4 comments
    1. Уведомление: Дайджест продуктового дизайна, май 2020 (№100) - Юрий Ветров об интерфейсах
    2. Уведомление: Дайджест продуктового дизайна, май 2020 (№100) / Блог компании Райффайзенбанк / Хабр
    3. Уведомление: Дайджест продуктового дизайн, июнь 2020 - Юрий Ветров об интерфейсах
    4. Уведомление: Дайджест продуктового дизайна, июнь 2020 / Блог компании Райффайзенбанк / Хабр

    Добавить комментарий Отменить ответ

    Ваш адрес email не будет опубликован. Обязательные поля помечены *

    Юрий Ветров об интерфейсах
    Дизайн-менеджмент цифровых продуктов, © 2007-2018

    Input your search keywords and press Enter.