Hi-Tech

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

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

Новая запись

Уведомлений пока нет

Пишите хорошие статьи, комментируйте,
и здесь станет не так пусто

Войти

Прямой эфир

["\u041f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435-\u043f\u043b\u0430\u0446\u0435\u0431\u043e \u0441\u043a\u0430\u0447\u0430\u043b\u0438
\u0431\u043e\u043b\u044c\u0448\u0435 \u043c\u0438\u043b\u043b\u0438\u043e\u043d\u0430 \u0440\u0430\u0437","\u041d\u0435\u0439\u0440\u043e\u043d\u043d\u0430\u044f \u0441\u0435\u0442\u044c \u043d\u0430\u0443\u0447\u0438\u043b\u0430\u0441\u044c \u0447\u0438\u0442\u0430\u0442\u044c \u0441\u0442\u0438\u0445\u0438
\u0433\u043e\u043b\u043e\u0441\u043e\u043c \u041f\u0430\u0441\u0442\u0435\u0440\u043d\u0430\u043a\u0430 \u0438 \u0441\u043c\u043e\u0442\u0440\u0435\u0442\u044c \u0432 \u043e\u043a\u043d\u043e \u043d\u0430 \u043e\u0441\u0435\u043d\u044c","\u0413\u043e\u043b\u043e\u0441\u043e\u0432\u043e\u0439 \u043f\u043e\u043c\u043e\u0449\u043d\u0438\u043a \u0432\u044b\u043a\u0443\u043f\u0438\u043b
\u043a\u043e\u043c\u043f\u0430\u043d\u0438\u044e-\u0441\u043e\u0437\u0434\u0430\u0442\u0435\u043b\u044f","\u041a\u043e\u043c\u0430\u043d\u0434\u0430 \u043a\u0430\u043b\u0438\u0444\u043e\u0440\u043d\u0438\u0439\u0441\u043a\u043e\u0433\u043e \u043f\u0440\u043e\u0435\u043a\u0442\u0430
\u043e\u043a\u0430\u0437\u0430\u043b\u0430\u0441\u044c \u043d\u0435\u0439\u0440\u043e\u043d\u043d\u043e\u0439 \u0441\u0435\u0442\u044c\u044e","\u0425\u0430\u043a\u0435\u0440\u044b \u0441\u043c\u043e\u0433\u043b\u0438 \u043e\u0431\u043e\u0439\u0442\u0438 \u0434\u0432\u0443\u0445\u0444\u0430\u043a\u0442\u043e\u0440\u043d\u0443\u044e
\u0430\u0432\u0442\u043e\u0440\u0438\u0437\u0430\u0446\u0438\u044e \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u0443\u0433\u043e\u0432\u043e\u0440\u043e\u0432","\u041a\u043e\u043c\u043f\u0430\u043d\u0438\u044f \u043e\u0442\u043a\u0430\u0437\u0430\u043b\u0430\u0441\u044c \u043e\u0442 email
\u0432 \u043f\u043e\u043b\u044c\u0437\u0443 \u043e\u0431\u0449\u0435\u043d\u0438\u044f \u043f\u0440\u0438 \u043f\u043e\u043c\u043e\u0449\u0438 \u043c\u0435\u043c\u043e\u0432"]

Приложение-плацебо скачали
больше миллиона раз

Подписаться на push-уведомления

От 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. Тёмная тема давно стала самой популярной, но сервис хотел сделать добротной и привычную светлую.

Материал опубликован пользователем.
Нажмите кнопку «Написать», чтобы поделиться мнением или рассказать о своём проекте.

Написать

(function (d, ver) { var s = d.createElement('script'); s.src = '/static/build/vc.ru/specials/TinkoffAirlines/js/main.js?' + ver; s.async = true; s.onload = function () { TinkoffAirlines.request('info').then((initialData) => { new TinkoffAirlines({ container: document.getElementById('ta-container'), data: initialData, location: 'article', // index, article }) }); }; d.body.appendChild(s); })(document, Math.random());

Блоги компаний

Показать еще

{ "page_type": "article" }

Прямой эфир

Показать больше

Похожие публикации

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

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

Кнопка «Наверх»