Александр Овчаренко рассказал о красном цвете в ночном режиме интерфейса.

Приборные панели в автомобилях часто подсвечиваются красным или переключаются на красную подсветку ночью. Красными лампами освещаются судовые мосты на ночной вахте. У судовых радаров некоторых производителей — красный интерфейс.

За ночное зрение отвечают рецепторы-палочки. Химические процессы, повышающие чувствительность палочек, занимают от 10 до 20 минут. Рецепторам-колбочкам, которые отвечают за дневное зрение, для активации надо около 15 секунд.

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

Самые чувствительные дневные рецепторы — колбочки L-типа. Они воспринимают жёлто-красную часть спектра.

Умеренное воздействие красным цветом не перегружает рецепторы-палочки, сохраняя их чувствительность к слабому освещению и позволяя быстро переключаться между работой с красным цветом и во тьме.

Красные очки использовались для адаптации лаборантов, которым надо было выходить из тёмной лаборатории на свет и возвращаться в неё обратно.

#dark_theme

Никита Геннадьевич изучил исследования о тёмной теме и поделился выводами.

— По разным опросам не менее 2/3 разработчиков при работе используют тёмную тему;
— Хорошее освещение рабочего места, но не слишком яркое, увеличивает продуктивность и уменьшает количество ошибок;
— Более высокая общая яркость и меньший зрачок → более чёткое изображение на сетчатке → лучшее восприятие;
— Восприятие улучшается при использовании светлой темы, но здесь важнее хорошее освещение рабочего места. Обычно светлая тема используется на светлом рабочем месте;
— Исследования показывают, что глаза меньше устают с тёмной темой. Лучше использовать её, если пользователь долго работает с продуктом;
— Среди людей 55–84 лет катаракта (помутнение хрусталика) распространена у 72,8%;
— С ней люди видят сайты в светлой теме размытыми;
— Если включена тёмная тема, зрачок немного расширяется, и изображение воспринимается более чётко;
— Также тёмная тема облегчает жизнь людям с фотофобией.

#dark_theme #accessibility

Вова Красильников написал, как в Фигме организовать работу со светлой и тёмной темой с помощью переменных.

— С помощью панели Local variables (ничего не выбрано, вкладка Design) добавьте переменную типа Color;
— Присвойте переменной второе значение, добавив ещё одну колонку в появившейся таблице;
— Задайте компонентам и уникальным элементам макета цвета с помощью переменных (отображаются квадратиками в отличие от круглых стилей);
— Чтобы использовать одно из значений переменной, на панели Layer выбранного элемента нажмите на гаечки, выберите коллекцию переменных (по умолчанию будет Collection 1) и название нужного столбца (режим);
— По умолчанию используется режим родительского слоя;
— Можно создать секции светлой и тёмной темы, задать для них режимы. Тогда фреймы с переменными цветами, попадая в эти секции, будут автоматически применять цвета светлой или тёмной темы.

#figma #dark_theme

Александр Овчаренко написал о красной ночной палитре интерфейса.

— Она сохраняет человеку способность видеть в темноте, так как ночные фоторецепторы (палочки) не чувствительны к спектральному красному;
— Актуально для ночных вахт в море (разглядеть тусклые огни буёв, встречных судов, мутное пятно айсберга), астрономов и тех, кто любит что-то делать в темноте;
— Обычная тёмная тема не подходит, так как любой более-менее яркий не красный цвет возбуждает дневные рецепторы (колбочки);
— Если выкрутить на минимум яркость экрана с тёмной темой, будет банально плохо видно. Красная палитра может быть яркой и контрастной;
— Чтобы такая палитра работала, приложение должно быть открыто на весь экран, на самом устройстве не должно быть не красных индикаторов. Даже белый текст в Action bar и курсор будут мешать ночному зрению;
— Проблема, что мониторы светятся своим светом, и он совсем не красный. Плохие мониторы вместо чёрного показывают холодный серый (с синевой). В этом случае от палитры толку будет мало;
— Рисование интерфейса в красной ночной палитре ничем не отличается от создания монохромного UI;
— Для визуализации тревог подходят методы дизайна для людей с дальтонизмом. Тревога — мерцание с ярким красным фоном (RGB 255,0,0, когда остальной интерфейс в диапазоне 0–192,0,0) и иконкой тревоги, предупреждение — мигание рамкой, другая иконка;
— Можно попробовать добавить оттенки, близкие к красному, например, оранжевый. Но спектрально оранжевый и оранжевый RGB-дисплея (красный с примесью зелёного) — это физически разные истории.

#dark_theme

Таннер Колер и Эми Чжан написали, как пользователи воспринимают тёмную тему и о связанных с этим нюансах.

— Считается, что она снижает нагрузку на глаза и экономит заряд батареи (в телефонах с OLED-экранами). Но исследования показали, что для краткосрочных сессий эффект незначителен;
— Вкладываться в тёмную тему есть смысл, если пользователь долго смотрит в приложение в течение одной сессии (чтение электронных книг), часто к нему возвращается (мессенджер) или приложение в основном используется при низкой освещённости;
— Аргументами за могут быть: 1. Эстетическая привлекательность (у проектов вроде Нетфликса вообще нет светлой темы); 2. Повышение доступности для людей с заболеваниями прозрачных сред вроде катаракты;
— По умолчанию тема приложения должна соответствовать теме операционной системы;
— Люди спокойно реагируют, если отдельные веб-страницы (например, открываемые тёмным приложением через вебвью) не имеют тёмной темы. Но всё равно не забывайте о таких страницах, если можете контролировать их дизайн;
— Используйте картинки с прозрачным фоном, чтобы в тёмной теме они не превращались в белые прямоугольники;
— В светлой теме показать, что один объект находится ближе другого, можно тенью. Но тень не работает в тёмной теме, поэтому обычно более близкие объекты делают светлее;
— Тёмный фон легко поглощает слишком тонкие шрифты, а жирное начертание кажется жирнее, чем такое же на светлом фоне;
— Чтобы графика, которую нельзя заменить для тёмной темы (например, логотип партнёра), сохраняла контраст, можно добавить обводку, свечение, тень и градиент, незаметные в светлой теме;
— То же самое, если графика может стать частью имейла;
— Тёмный фон поглощает тонкие серые разделители. Если в светлой теме достаточно обводки, в тёмной теме может потребоваться изменение фона карточки;
— QR-коды лучше не инвертировать. Многие сканеры настроены обнаруживать тёмные элементы на светлом фоне.

In English. #dark_theme

Елена Сеченых написала о тёмной теме в письмах.

— Нет единых правил инвертирования в разных почтовых сервисах и даже разных приложениях одного и того же сервиса;
— 4 варианта поведения: ничего не делать (большинство десктопных клиентов, веб-версии Gmail и Яндекс Почты); инвертировать светлые письма и не трогать тёмные; инвертировать и туда и обратно (Gmail на iOS); позволять управлять отображением с помощью медиазапросов (Apple Mail на macOS и iOS, Mail Ru на мобильных и в веб-интерфейсе);
— Подбирайте палитру, чтобы автоматически выбираемые почтовиками инверсные версии цветов оставались контрастными. Лучше не использовать жёлтый — по факту остаётся светлым и становится чуть более грязным;
— Изображения автоматически не инвертируются. Можно использовать картинки с прозрачным фоном. В этом случае может понадобиться светлая обводка, которой не будет видно в светлой теме, но которая выделит графику в тёмной (например, чёрный логотип, если брендбук не запрещает);
— Не забудьте про фоновые изображения. Они не инвертируются и находящийся поверх них текст может потерять контраст;
— Если почтовик умеет обрабатывать медиазапросы, можно просто подготовить отдельное изображение;
— Обязательно проверьте отображение письма в андроид-приложениях Яндекса, Mail Ru, Gmail, а также в Gmail на iOS;
— Есть сервисы для тестирования писем: Email on Acid, Litmus, но они не работают с Яндексом. Фреймворк для вёрстки Ampier показывает и классическую инверсию, и вариацию Gmail на iOS.

#email #dark_theme

Женя Перов написал о создании тёмной темы в мессенджере. Отдельные моменты:

— Установили правило глубины: то, что находится в перспективе ближе, — светлее;
— Цвет элементов можно регулировать прозрачностью (чем она выше, тем лучше через элемент виден чёрный фон), но тогда потребуются и чистые аналоги этих оттенков. Например, для поповера, чтобы через него не просвечивал нижележащий контент;
— Отдельно тестировали цвета на android-устройствах, так как цветопередача отличается от iOS и надо было проверить экраны от IPS до OLED;
— Снизили контрастность форматирования текста (цвет выделения текста из светлой темы был слишком ярким) и ссылок и упоминаний в сообщениях (чтобы подчеркнуть их место в иерархии относительно ссылки на комментарии к сообщению);
— Затемнение контента под попапом: если в светлой теме достаточно 50% от чёрного цвета, то в тёмной надо больше, например, 80%;
— Для десктопа снизили яркость текста, так как экран больше и поток белого света тоже больше;
— Тестирование показало, что линии недостаточно для отделения бокового меню от чата на десктопе. Фон меню сделали светлее;
— Плохо воспринималось изменение фона кнопки при ховере, стали менять цвет иконки и текста на голубой.

#dark_theme