Вокруг тёмного режима ходит много слухов и противоречий. Действительно ли он снижает нагрузку на глаза? Увеличивает ли срок службы батареи? Хотя исследования ставят под сомнение положительное влияние тёмного режима, многие продукты его предлагают. Вы могли видеть его в таких продуктах, как Slack, Twitter, Youtube и Sketch.
Стоит ли вам рассмотреть возможность добавления тёмного режима в интерфейс? Существует несколько факторов, которые нужно учитывать. И если вы решите предложить эту функцию, следуйте лучшим практикам, чтобы пользователи могли получить от неё максимум пользы.
Тёмный режим улучшает доступность
Сначала давайте обратимся к исследованиям. Действительно ли тёмный режим повышает доступность и снижает нагрузку на глаза? Один институт в Дюссельдорфе изучал влияние тёмного режима на восприятие при чтении.
Участникам нужно было определить разрыв в символе Landolt C на визуальной таблице и найти ошибки в коротком отрывке текста. Результаты показали, что светлый режим работает немного лучше, но разница несущественна.
Другая исследовательская группа из Agelab при MIT изучала влияние тёмного режима на контрастную полярность. Участникам нужно было различать символы в светлом и тёмном режимах, при дневном и ночном освещении, и на разных размерах шрифта. Результат — влияние окружающего освещения на контрастную полярность. Днём оба режима показали схожие результаты, а ночью светлый режим оказался лучше.
Группа из Университета Миннесоты выяснила, что тёмный режим может быть лучше для людей с мутной оптической средой глаза. Гипотеза заключается в том, что дисплей излучает меньше света, и этот свет меньше рассеивается.
Как видно, выводы неоднозначны. Лучший вариант — дать пользователям возможность самостоятельно переключаться в тёмный режим, если они этого хотят. Некоторым нравится его стильный современный вид, а для людей с определёнными нарушениями зрения в нём действительно есть преимущества.
Тёмный режим экономит заряд батареи
Помимо стильного и элегантного внешнего вида, тёмный режим также может экономить заряд батареи на некоторых устройствах. А именно — на устройствах с OLED-экранами. Причина в том, что такие экраны создают свет для каждого пикселя отдельно, а чёрные пиксели не потребляют энергию вовсе.
В отличие от них, ЖК-экраны используют подсветку. Это означает, что панель за экраном постоянно излучает белый свет, когда экран включён. Даже если экран выглядит чёрным, уровень излучаемого света не меняется, и тёмный режим не оказывает никакого эффекта. Почти все ноутбуки оснащены ЖК-экранами, как и большинство недорогих мониторов для настольных компьютеров.
OLED-экраны, напротив, чаще всего встречаются в смартфонах. Они используются в продуктах Samsung, LG и Apple. Такие устройства доказывают свою энергоэффективность и часто имеют большую ёмкость аккумулятора. В будущем мы, скорее всего, увидим больше устройств с OLED-экранами, а значит, тёмный режим останется актуальным.
Тёмный режим создаёт эстетическую привлекательность
Хотя некоторые считают тёмный режим недавним трендом в дизайне, на самом деле он гораздо старше, чем кажется. Его первое применение восходит к эпохе старых ЭЛТ-мониторов, отображавших зелёный текст на чёрном фоне.
Сегодня тёмный режим — это скорее дизайнерский выбор, и трудно отрицать его эстетическую привлекательность. Пользователи предпочитают тёмный режим при работе в тёмное время суток или в слабоосвещённых помещениях. Он также идеально подходит для вечернего досуга. Например, при просмотре Netflix ночью тёмный режим создаёт атмосферу, похожую на кинотеатр.
В целом, тёмные палитры вызывают ощущение высокого статуса и эксклюзивности. Они также ассоциируются с роскошью, элегантностью и богатством. В то же время тёмные цвета могут иметь негативные ассоциации — смерть, скорбь, депрессию или даже зло. Поэтому важно внимательно подбирать цветовую палитру для тёмного режима.
Избегайте прямой инверсии светлого в тёмный
Чтобы правильно реализовать тёмный режим, дизайнеру придётся постараться. Как ни странно, просто инвертировать цвета — плохая идея. Такой подход нарушает согласованность макета, разрушает иерархию и серьёзно снижает читаемость.
Секрет в том, чтобы использовать модифицированные контрасты на основе существующего брендирования. Начните с базовых цветов — определите основные и второстепенные цвета, а также цвета для поверхностей, включая фон страницы и компонентов. Не забудьте убедиться, что они соответствуют коэффициенту контрастности 4.5:1 для обычного текста.
Используйте десатурированные цвета
Насыщенность описывает чистоту, интенсивность и яркость цвета. Насыщенные цвета плотные и яркие, не содержат серого оттенка. Проблема в том, что такие цвета с трудом проходят тест на контрастность по стандартам WCAG (Руководство по обеспечению доступности веб-контента). В свою очередь, десатурированные цвета с большей вероятностью соответствуют стандарту AA с минимальным коэффициентом контрастности 4.5:1 для текста. Кроме того, они комфортнее воспринимаются на тёмном фоне.
Сохраняйте идентичность бренда
В тёмном режиме доминируют тёмные цвета. Что делать, если ваши фирменные цвета — светлые? Менять их? Согласно Material Design, допустимо использовать насыщенные фирменные цвета — главное, не переборщить. Применяйте их только для наиболее заметных элементов, например логотипа или брендированной кнопки. Это поможет сохранить узнаваемость бренда и при этом не нарушить визуальную иерархию.
Избегайте чисто чёрного цвета
Чисто чёрный цвет — не лучший выбор. Парадоксально, но в тёмном режиме редко используется настоящий чёрный, потому что он может серьёзно ухудшить читаемость. Вместо него Material Design рекомендует использовать тёмно-серый цвет (#121212) в качестве основного фона. Кроме того, тени лучше видны на сером фоне и обеспечивают лучший эффект глубины.
Обеспечьте достаточный контраст текста
Особое внимание следует уделить контрасту текста. Согласно WCAG, коэффициент контрастности должен быть не менее 4.5:1 для обычного текста. Для крупного текста (примерно 24 пикселя или 18.5 пикселя, если жирный) допустим контраст от 3:1. Также учтите, что для белого текста нужно стремиться к коэффициенту 15.8:1.
Проверьте достаточность контраста с помощью инструментов WebAIM или Coolors.
Настройте контрастность цвета ошибок
Заметили ли вы, как хорошо видны дорожные знаки в дождь, снег и даже ночью? Эти знаки несут важную информацию, и один из способов обеспечить их заметность — использовать правильное соотношение контрастности.
Сообщения об ошибках в приложениях столь же важны. Поэтому они должны иметь высокий цветовой контраст и быть легко узнаваемыми. Material Design рекомендует использовать полупрозрачную заливку с непрозрачностью 40% поверх красного цвета светлого режима для обозначения ошибок. Исходный цвет ошибки — #B00020, который трансформируется в #CF6679 путём наложения белого цвета с прозрачностью 40%. В результате цвет соответствует стандартам контрастности уровня AA в тёмном режиме.
Настройте контраст состояний элементов согласно стандартам уровня AA
В светлом режиме состояния кнопок и полей ввода легко различимы. Наведённые, активные, в фокусе, перетаскиваемые и нажатые элементы выглядят по-разному.
В тёмном режиме состояния элементов также должны быть чётко различимы. Убедитесь, что они соответствуют стандарту контрастности уровня AA. Material Design рекомендует использовать либо белый цвет, либо основной цвет с наложением 12% прозрачности в зависимости от цвета содержимого.
Используйте уровни для передачи глубины
Глубина помогает создавать визуальную иерархию и подчёркивать приоритетные элементы. Например, вы можете захотеть привлечь внимание пользователя к кнопке призыва к действию или к уведомлению с предупреждением. Как создать иллюзию глубины в тёмном режиме? В светлом режиме дизайнеры обычно используют тени, но они плохо заметны на тёмном фоне.
Наилучшей практикой в тёмном режиме является создание уровней. Это можно реализовать с помощью системы слоёв, где более высокие уровни используют более светлые цвета, а нижние — более тёмные. Другой способ — применять наложения с различной прозрачностью для достижения того же эффекта. Используйте более высокую степень прозрачности для важных элементов, таких как кнопки, и меньшую — для фона.
Применяйте тени правильно
В светлом режиме дизайнеры активно используют тени как инструмент для выражения уровней. Однако в тёмном режиме тени не так надёжны. К тому же они выглядят неестественно, поскольку в тёмной среде отсутствует источник света.
Вместо этого используйте уровни. Чем выше уровень элемента, тем светлее должна быть его поверхность. Если вы всё же хотите использовать тени, выберите тёмно-серый фон. В отличие от чисто чёрного, тёмно-серый фон гораздо лучше передаёт контраст, глубину и уровни.
Разрешите пользователям включать и отключать тёмный режим
Учитывая неоднозначную природу тёмного режима, вы можете задуматься, нужен ли он вашему продукту вообще. Существует множество причин, по которым пользователи хотят переключаться на тёмный режим. Кто-то предпочитает работать или отдыхать в слабоосвещённой среде, другим просто нравятся тёмные интерфейсы. Также существуют преимущества для людей с определёнными нарушениями зрения. Преимущества наличия тёмного режима определённо перевешивают усилия, необходимые для его реализации.
Помните, пользователи любят иметь выбор и контролировать интерфейс. Поэтому предоставьте им возможность изменить настройки по умолчанию и самостоятельно включать или отключать тёмный режим.
