Для чего нужна темная тема
Dark mode теперь повсюду. Так ли он полезен? (в конце поста опрос)
Дизайнеры одежды известны тем, что любят носить чёрное, но они не одиноки в этом: в 2017 году чёрный был самым популярным цветом в женской одежде, по данным компании Edited, занимая 36% рынка. Популярность тёмных оттенков вышла за границы моды и добралась до дизайна UX и UI: многие популярные приложения и программы дополнились «тёмным режимом», инвертирующим главную цветовую схему веба.
Примеры руководств по созданию тёмных тем для Material Design.
Разумеется, в сочетании тёмного фона со светлым текстом нет ничего нового. Получившие в 1980-х развитие текстовые процессоры WYSIWYG (аббревиатура от «what you see is what you get», «что видишь, то и получаешь», произносится «wiziwig») впервые познакомили нас с интерфейсами пользователя, напоминавшими привычный чёрный текст на белой бумаге. До этого компьютеры имели монохромные ЭЛТ-мониторы, отображавшие пиксельный зелёный текст на чёрном фоне. В Adobe Creative Suite тёмный интерфейс использовался многие годы, а Spotify уже довольно давно имеет цветовую схему «светлое на тёмном» (хотя в 2015 году она была переделана).
Тёмные интерфейсы существуют уже очень долго, но у пользователей они стали невероятно популярны только за последние несколько лет. Лишь за прошлый год опции включения тёмного режима появились в MacOS, Apple iOS и Android, а также во многих других приложениях и платформах. Тёмный режим Instagram появился в начале октября; в приложении Gmail тёмный режим появился на этой неделе.
Чем стимулируется эта новая одержимость веба тёмными цветами? Когда я спросила у друзей, почему они переключились на тёмный режим, многие ответили, что он «удобнее для глаз», например, по ночам тёмный фон менее резок, чем ярко-белый экран. Хотя более тёмный интерфейс может казаться лучше для глаз (к тому же, он на самом деле экономит заряд батареи), читаемость он не улучшает.
Руководства Human Interface Design компании Apple по Dark Mode iOS.
Я попросила Ралуку Будиу, директора по исследованиям Nielsen Norman Group, занимающейся консультациями по UX и UI, прокомментировать мнение о том, что тёмный режим меньше напрягает глаза. «При исследовании юзабилити у нас есть правило „не слушай пользователя“. Оно значит, что нужно наблюдать за тем, как люди выполняют действия (и делать замеры), а не верить тому, что они утверждают».
Будиу сообщила, что её компания не проводила собственных исследований по юзабилити тёмного режима, но в общем случае она не рекомендует использовать такую цветовую схему «людям с нормальным зрением». По её словам, положительная полярность контрастности, то есть старый добрый «чёрный текст на белом фоне», лучше читается и более различима.
Похоже, что опубликованные исследования по эргономике подтверждают её мнение. Исследование 2017 года из журнала Applied Ergonomics выявило, что тёмные символы на светлом фоне повышают читаемость и настоятельно рекомендуются вне зависимости от возраста пользователя. Журнал Human Factors: The Journal of the Human Factors and Ergonomics Society выяснил в 2013 году, что «обычно повышенная яркость положительной полярности приводит к улучшению восприятия деталей».
В случае людей с нарушениями зрения ситуация не такая однозначная. По словам Будиу, некоторые исследования показали, что люди с «определёнными видами нарушений» (например, катарактой) лучше справляются в тёмном режиме и часть пользователей с нарушениями предпочитают его. Но даже в таких исследованиях, говорит Будиу, «полного консенсуса нет».
Поэтому, если вам нужно много читать, Будиу всё равно рекомендует проверенную схему «чёрное на белом». Но если вы очень не хотите отказываться от тёмного режима, то вот несколько советов, позволяющих справиться со снижением читаемости. Apple рекомендует тестировать контент, включив в тёмном режиме опцию «Increase Contrast and Reduce Transparency» в параметрах iPhone, как вместе, так и по отдельности.
Также в некоторых контекстах тёмный режим может быть полезным. Согласно руководству Apple по human interface, тёмный режим позволяет выделять контент, при этом окружающий его UI отходит на второй план. Поэтому логично, что Adobe Creative Cloud использует тёмный интерфейс пользователя: это ПО предназначено для редактирования изображений, и тёмный UI повышает приоритет графики, минимизируя его для менее важных текстовых элементов.
По той же причине тёмный режим хорошо подходит, если вы хотите мотивировать пользователя быстро считать показатели и сосредоточиться на основных пунктах, например, при изучении диаграмм или графиков. Исследование Salesforce даёт понять, что в случае подобных данных могут присутствовать функциональные преимущества. Попросив участников опроса сравнить графики, созданные в светлой и тёмной темах, и ранжировать данные по ценности, как если бы им пришлось платить за них, команда Salesforce обнаружила, что участники принимают решения быстрее и с той же точностью при использовании тёмного интерфейса. Любопытно, что это противоречило личному впечатлению участников: светлые интерфейсы им больше понравились с первого взгляда и с ними ассоциировалось большая ценность.
Подведём итог: выбор решения о том, использовать ли тёмный режим, должен основываться на ваших эстетических предпочтениях, потому что с точки зрения читаемости и удобства он на самом деле не лучше. Скорее, он служит сигналом «тренда на усиление минимализма» или повышения персонализации интерфейсов пользователя в целом. Так что превращать ли интерфейс вашего телефона в подобие Уэнсдэй Аддамс — вопрос красоты, и не более.
Ссылка на опрос от 22 апреля
Весной редакция Хабра проводила опрос о тёмных темах в сообществе ВК. Там Dark Mode победил с большим отрывом. Интересно, что о тёмных темах в вебе и приложениях думает аудитория сайта.
Проливаем свет: так ли полезна темная тема для глаз?
Как работает и всем ли подходит
Темная тема, или темный режим (Dark Mode), держится в трендах последние несколько лет. Разработчики сайтов, приложений и операционных систем добавляют переключение на темный интерфейс и заявляют, что он помогает сосредоточиться на работе, экономит заряд батареи и снижает нагрузку на глаза. Разбираемся, действительно ли темная тема полезна.
До темного экрана додумались только сейчас?
Вовсе нет. Когда домашние компьютеры только начинали появляться, популярный сегодня темный режим был единственным и безальтернативным.
Внутреннюю часть экрана монохромных мониторов с электронно-лучевой трубкой (ЭЛТ) обрабатывали специальным покрытием — люминофором. Именно благодаря ему картинка на таких мониторах была «матричной». Так что называть темный режим чем-то новым не совсем правильно.
Неудивительно, что при такой статистике любое новое решение проблемы синдрома компьютерного зрения сразу воспринимается как чудодейственное средство. Что и произошло с темной темой. У нее появилась армия фанатов, журнал Popular Science называл темный режим «отличной и удобной альтернативой ослепляющему белому цвету», многие издания открыто писали, что темная тема избавит пользователей от проблем с глазами. Однако мнение экспертов отличается.
А кто против?
Но не может же этот режим совсем не работать, раз у него даже армия фанатов есть!
Восприятие информации глазами может отличаться в зависимости от внешних факторов. В тусклом помещении нагрузка на глаза будет выше из-за яркой подсветки, при ярком освещении нагрузку увеличит экран с включенным темным режимом. В некоторых случаях именно «классический» вариант с темным текстом на белом фоне будет более полезным для здоровья глаз.
Мне-то что делать?
Если вас действительно беспокоит сухость или усталость глаз, возможно, стоит купить капли искусственная слеза или специальный матовый экран для устройства. Иногда могут помочь регулировка яркости и контрастности экрана, настройка источников света и расположение экрана.
Так нужно использовать темный режим или нет?
Нельзя утверждать, что темная тема лучше для глаз, — доказательств этому не существует. В некоторых случаях она может помочь, в других, наоборот, усилит дискомфорт.
Но точно можно сказать, что чем больше вариантов отображения существует, тем лучше. Выбор темы — вопрос личных предпочтений. А вот что действительно поможет глазам, так это не смотреть в экран сутки напролет.
Переходим на темную сторону: что такое темная тема и зачем она нужна в приложении
Преимущества использования темного режима
Темная тема — не просто модное увлечение. Она дает три положительных эффекта, о которых сейчас расскажем.
Забота о здоровье
Когда мы резко заходим из светлого помещения в темное, то «слепнем» на несколько минут. Это некомфортно, но адаптация проходит быстро. А вот если наоборот, из светлого помещения переходим в темное, то привыкание займет долгое время (20-30 минут).
Точно так же обстоят дела и со смартфонами. Когда мы смотрим на яркий дисплей в темном пространстве, наше зрение долго адаптируется к темноте. И сопровождается дискомфортом для глаз.
Есть также исследования Гарвардского университета, что пользование электронными устройствами с ярким дисплеем перед сном подавляет секрецию мелатонина. А недостаток этого гормона вызывает диабет, депрессию и, возможно, ожирение.
Экономия заряда батареи
Компания Google протестировала влияние темной темы на аккумуляторы телефонов и получила следующие результаты:
При яркости в 50 % темная тема в приложении «Youtube» экономит заряд на 15 %. При яркости в 100 % экономия заряда батареи составляет аж 60 %!
Без темного режима все белое пространство на дисплее вашего телефона требует больше энергии, что, в свою очередь, разряжает батарею.
Сделаем важную оговорку: темная тема экономит заряд на экранах OLED/amoled, которые используют устройства под управлением Android. Но Apple делает смартфоны на LCD (жидкокристаллический экран). Однако в прошлом году компания анонсировала, что поменяет дисплеи в 2020 году. И действительно, вышел флагманский смартфон iPhone 11 Pro с OLED-экраном.
Красивый дизайн
Темный режим кажется интересным за счет новизны и дает возможность представления графических элементов (рисунки, информационные графики) в необычном свете.
Некоторые оттенки выглядят лучше на темном фоне, чем на светлом. Например, ваши брендовые цвета могут быть блеклыми и на светлом фоне просто теряться.
Плюс, согласно исследованиям, темный фон позволяет дольше удерживать пользователей в приложении.
Примеры темных тем
Android 10
Google долгое время тестировал темную тему в приложении GMail и наконец-то в августе 2019 года включил ее в Android 10. Плюс компания дала сторонним разработчикам инструменты для интеграции их приложений с темной темой. 
iOS 13
Apple также выкатили темный режим в своих продуктах, работающих на iOS 13. В Dark Mode система использует более темную цветовую палитру, чтобы контент выделялся на таком фоне. 
Мессенджер еще тестирует темную тему. Для смены варианта отображения, нужно сначала включить новый интерфейс в настройках, а потом передвинуть ползунок «Темный режим». 
VKontakte
Также добавили темную тему в приложение. Как утверждают разработчики VK, они переработали более 2 000 файлов, чтобы подобрать цветовые гаммы. Активировать опцию можно в разделе «Настройки». 
Кому нужна темная тема
Темная тема — это дополнение к основной светлой теме, соответственно разработка новой опции несет дополнительные и необязательные затраты. Поэтому ее делают далеко не все, а те, кто может позволить себе выделить бюджет для большего удобства клиентов.
Необходимо провести анализ, как часто и в какое время пользователи включают ваше приложение. Возможно, у вас много контента, который нужно долго просматривать.
Например, наш Заказчик компания «ТрансТехСервис» занимается продажей новых и подержанных автомобилей. В этой нише до совершения покупки люди тратят много времени на изучение ассортимента. Клиенты могут по несколько часов просматривать товары в приложении, в том числе и ночью. Для ТТС разработка темной темы в приложении будет вложением в бизнес, а не затратой. 
В этом случае, даже если ваши клиенты пользуются устройствами на базе Android 10 или iOS 13, которые могут сами переключить светлый режим на темный, все равно нужно помнить о собственном решении. Так как реализованная штатными инструментами смартфонов темная тема не всегда выглядит хорошо, а иногда даже очень плохо, что определенно будет мешать пользователям вашего приложения.
Тёмная тема: приёмы, которые помогут сделать качественный интерфейс
Рассказываем про кейсы Google, Apple, Microsoft и «ВКонтакте» — главное, что нужно знать про разработку тёмной темы.
Тёмная тема стала популярной в 2018 году после её релиза на macOS Mojave. Её полюбили за удобство для глаз и возможность по-новому посмотреть на привычные интерфейсы.
Создание тёмной темы — сложная дизайнерская задача: под тёмный фон нужно подобрать новые цвета, сохранить общую узнаваемость интерфейса и читаемость текста. Рассмотрим, какие принципы и приёмы помогут вам сделать тёмную тему для собственного интерфейса на примере Google, Apple, Microsoft и «ВКонтакте».
Зачем нужна тёмная тема
Экономия батарей аккумуляторов с OLED-дисплеями
В отличие от обычных экранов, OLED-дисплеи полностью выключают пиксели на месте чёрного цвета. Например, если на странице чёрный фон и белый текст, OLED-дисплей активирует пиксели только для текста и тратит меньше энергии батареи. Благодаря этому пользователь видит глубокий чёрный цвет, а батарея устройства разряжается медленнее.
Наглядный эксперимент провело издание PhoneBuff. Оказалось, что в среднем тёмная тема экономит 30% заряда:
Комфорт для глаз
Исследования показали, что для людей с нормальным зрением нет принципиальной разницы, как читать текст: в тёмном или светлом окружении. Но людям с катарактой или другими проблемами со зрением удобнее воспринимать текст на тёмном фоне.
Фокусировка на задачах
Светлый контент в тёмном окружении привлекает к себе внимание — это помогает пользователю сфокусироваться на задачах, которые он хочет решить в приложении. Посмотрите, как выделяется письмо в приложении Mail в macOS — оторвать от него глаз невозможно:
Пользователи выбирают тёмную тему по разным причинам: кому-то она кажется более строгой, кому-то так удобнее воспринимать текст, кто-то хочет просто поменять цвета в привычном приложении. Хотя тёмная тема не обязательна, желательно дать пользователям возможность её использовать.
Редактор. Пишет про дизайн, редактирует книги, шутит шутки, смотрит аниме.
Опыт крупных компаний
Тёмная тема появилась во всех сервисах Google, Apple и Microsoft. Поэтому изобретать велосипед остальным дизайнерам уже не нужно — все принципы и приёмы давно проверены крупными корпорациями.
Фон и тени
Google применяет систему Material Design. В светлой теме плашки отделяются друг от друга по принципу «наслаивания»: каждый элемент интерфейса — это отдельный слой, который отбрасывает тень на предыдущий:
В тёмной теме это правило не работает, так как на чёрной поверхности тень того же оттенка увидеть невозможно. Чтобы разрешить это противоречие, дизайнеры Google выделяют слои высветлением: чем ближе объект к пользователю, тем он светлее. Тени не такие заметные, но они есть:
Теми же соображениями руководствовались дизайнеры мобильной версии Office 365 и «ВКонтакте»:
Apple хитро поступила с тенями в macOS. Их сделали насыщеннее и дополнительно усилили контраст с помощью чёрной обводки и внутренних бликов окна:
В стандартных приложениях macOS интересно реализован фон. Для окон добавили серый цвет, который смешивается со средним цветом обоев рабочего стола. Это позволяет приложениям в тёмной теме выглядеть гармонично на любых обоях: хоть на тёмных, хоть на светлых:
Цвет элементов интерфейса
Если инвертировать весь интерфейс, цвета на нём будут кислотными. Смотреть на такое приложение неприятно из-за высокого контраста:
На тёмном фоне насыщенные цвета выделяются гораздо сильнее. Например, яркий синий цвет хорошо выглядит в светлой теме, но в тёмной он кажется гораздо ярче:
Дизайнеры Google сформулировали правило для подбора цветов: чем темнее фон, тем светлее должны быть цвета элементов интерфейса. Каждый цвет разбили на яркостную градацию от 900 до 50 и подобрали наиболее контрастные и приятные глазу оттенки:
Цветовое правило работает не только с элементами интерфейса, но и с векторными иллюстрациями:
В том же направлении поработали и дизайнеры macOS. Каждому системному цвету подобрали тусклую пару для тёмной, чтобы цвета не «выжигали» глаза пользователей:
В тёмной теме macOS решили не только уменьшать непрозрачность текста белого цвета, но и подобрали оттенок серого, чтобы текст лучше читался на любом фоне:
Результат этой работы хорошо виден на боковой панели Finder:
Также важен контраст текста и фона. Приложением или сайтом с тёмной темой может пользоваться кто угодно, а значит, нужно подобрать удобные для всех цвета. Google, Apple и другие компании ориентируются на стандарт 1.4.6 WCAG: «Визуальное отображение текста и текст на изображениях должны иметь коэффициент контрастности не менее 7:1».
Совет. Чтобы проверить контраст своих цветов, зайдите на сайт Web Aim, введите код цвета текста в графу Foreground Color, а цвета фона — в Background Color. За образец контрастности можно брать значения Google и Apple — 15,8:1.
Иконки
Обычно иконки для интерфейсов рисуют контурами — делают только обводку, оставляя пространство внутри «пустым». Если сделать то же самое в тёмной теме, иконки станут слишком контрастными и будут выглядеть довольно странно:
В Apple решили, что раз стандартный подход делает иконки плоскими и портит формы, нужно не только инвертировать цвет, но и изменить подход к рисованию. Поэтому в тёмной теме все пиктограммы macOS залиты белым цветом:
Так же поступили и дизайнеры мобильной версии Office 365 — перерисовали иконки с использованием заливки:
При таком подходе иконки не теряют форму, остаются читаемыми и контрастными.
В Photoshop и Figma уровень прозрачности регулируется свойством Opacity — непрозрачность.
О чём нужно помнить при создании тёмной темы
Чтобы ничего не забыть при создании тёмной темы, придерживайтесь правил:
Почему разработчики так любят тёмную тему
– Скажи мне, почему разработчики так любят тёмную тему?
– А ты попробуй ночью под одеялом влупить светлую!
Иногда мне хочется бросить всё, сказать, что я птичка, и мне всё это сложно. Потом я вспоминаю, что айтишники – это лучшие люди из всех, кого я только встречала, и, превозмогая боль и слёзы, я продолжаю их исследовать. В этой статье я пытаюсь понять истоки влечения к тёмной теме, а также качнуть лодку и дать шанс светлой.
После того разговора про боль в глазах от светлой темы под одеялом, у меня остались некоторые вопросы:
В ответ я хотела получить развёрнутые мысли с детальной аналитикой, ссылками на исследования в проверенных источниках, сравнительные аналогии, но вместо всего этого чаще получала: «Она мне просто больше нравится».
В итоге у меня сложилось впечатление, что для многих разработчиков тёмная тема – это аксиома. Выбор, не требующий доказательств. Но! Пользуюсь случаем, своим незнанием и желанием докопаться до истины, я решила углубиться в этот вопрос по-настоящему.
Аргументы за использование светлой темы
Как известно, весь мир делится на практиков и теоретиков. В то время, как разработчики просто берут и меняют предустановленные светлые темы на тёмные, учёные ведут неравный бой за обеление светлой темы и доказательство её преимуществ.
Аргументы за использование тёмной темы
А что если учёные, которые топят за «чёрным по белому» ошибаются? Здесь я собрала причины, по которым тёмные темы так любы-дороги разработчикам:
Спорные территории где-то между тёмным и светлым
Следующие три пункта я хочу оставить для дискуссии в комментариях. Пишите своё мнение, опыт, кидайте ссылки на исследования.
И тут я поверила
Пока я писала эту статью, у меня случилась беседа с нашим дизайнером, который рассказывал мне, как переделал внутренний интерфейс одного из наших сервисов. Каково же было моё удивление, когда к концу рассказа оказалось, что светлая темы интерфейса сменилась на тёмную. Тут я не выдержала и, воздев руки к небу, спросила: «Да почему. Почему тёмная тема и здесь?»
На что дизайнер ответил: «Да посмотри же! Разве ты не видишь, что так лучше видно? Это же простые законы контрастности! А если выделить на тёмной теме текст жирным, то он будет восприниматься как более читаемый!»
В тот момент я была не готова уверовать в эту точку зрения, потому что мысленно всё ещё пребывала на светлой стороне силы. Так я и жила ещё пару дней, пока как-то раз не вышла из вагона метро ровно посередине перрона. Посмотрела налево и увидела чёрным по белому написано… Точнее, не увидела.
А через пару минут села в автобус, а там мне рыжим по чёрному пишут! И тут я уверовала.
Истина где-то рядом
Истина где-то рядом, и если отходить от вопросов коллективного бессознательного, вкусовщины и прочего объективно-субъективного, можно прийти к следующим выводам: