Темный UX/UI-дизайн (Dark mode в дизайне)

Темные темы встречаются во многих интерфейсах, но не для всех продуктов они подходят, поэтому важно понимать особенность их проектирования. Мы расскажем, когда можно использовать dark mode и как его грамотно создать.

Темный режим (dark mode) — это дизайн пользовательского интерфейса, основанный на отображении преимущественно темных поверхностей.

Экономия батареи

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

Уменьшение нагрузки на глаза

Темный режим уменьшает количество света, которое воспринимает сетчатка, поэтому dark mode может быть более приятным для глаз во время длительного использования.В плохо освещенной среде темная тема снижает напряжение глаз, но в хорошо освещенном пространстве различий между темным и светлым вариантом нет. Однако для людей с проблемами зрения контент удобнее воспринимать на темном фоне.

Эстетичность

Пользователи часто выбирают темную тему из-за ее визуальной привлекательности. Она ассоциируется с роскошью, статусом, серьезностью и технологичностью. Некоторые приложения отдают предпочтения dark mode на постоянной основе, т.к. темный режим пользовался большей популярностью, чем светлый. Например, интерфейсы для прослушивания музыки часто обращаются к темной теме, поскольку на темном фоне красочные обложки музыкальных композиций выглядят более выигрышно.

Доступность

Темная тема удобна для восприятия пользователям с проблемами зрения. Например, у людей с катарактой прозрачные среды глаза (хрусталик) не четко отражают свет, поэтому при большом количестве света глазу труднее сфокусироваться.Людям с плохим зрением или дальтонизмом необходимо высокое контрастное сочетание между текстом и фоном для удобного чтения. В темном режиме контраст обычно более ярко выражен, поскольку текст является более светлым на темном фоне.Темная тема не отражает блики от яркого света, что делает взаимодействие пользователей с интерфейсом намного удобнее. Людям, чувствительным к яркому свету, может быть неприятно и даже болезненно смотреть на яркий белый экран в темном пространстве или с недостаточным освещением. Dark mode снижает яркость, излучаемую экраном, что может сделать использование приложения или веб-сайта более удобным для подобной аудитории.

Темный режим подходит не для всех продуктов. Откажитесь от dark mode, если:

Не используйте чистый черный цвет

Темный режим — не значит черный. Не рекомендуется использовать чистый черный цвет (#000000) для фона и основной поверхности интерфейса. В гайдлайне Material Design от дизайнеров Google предложено использовать темно-серый (#121212), т.к. он позволяет демонстрировать глубину пространства и имеет более богатый диапазон оттенков. Иногда этот цвет комбинируют с синими оттенками.

Откажитесь от насыщенных цветов

Избегайте насыщенных цветов при проектировании темной темы. Требования по доступности веб-контента (WCAG) определяют минимальный коэффициент контрастности 4,5:1 для обычного текста и 3:1 для большого текста. Насыщенные цвета создают оптические вибрации на темном фоне, что может вызвать утомление глаз и негативно повлиять на пользовательский опыт.

Минимум акцентных цветов

Для темной темы в качестве акцентных цветов используются ненасыщенные, иногда пастельные оттенки. Как правило, в палитре присутствует один основной цвет для фона и два дополнительных, которыми выполнены разные элементы интерфейса: кнопки, иконки и графика. Дизайнеры Google сформулировали правило для подбора цветов: чем темнее фон, тем светлее должны быть цвета элементов интерфейса.

Продумайте два варианта палитры

При проектировании интерфейса подготовьте две цветовые палитры: одна для светлой темы, а другая — для темной. Они могут иметь идентичные акцентные цвета или цвета бренда, но с разной насыщенностью для удобства пользования.

Продемонстрируйте глубину

При создании светлой темы для передачи глубины используются тени, в темных интерфейсах ощущение глубины передается иначе. Фон — самая темная поверхность, а экраны и элементы, которые находятся выше, становятся светлее по тону. Таким образом, сайт передает естественное ощущение глубины. Однако будьте аккуратнее, создавайте не больше 4–5 уровней, чтобы не загромоздить пространство. Не стоит увлекаться обилием компонентом на экране: не перегружайте интерфейс. Множество разнородных визуальных элементов создает трудности взаимодействия.

Продумайте исполнение иконок

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

Подготовьте иллюстрации и графику в нужном формате

При переводе графики и иллюстраций в темный режим помните о насыщенности и контрастности: цвета должны быть менее насыщенными и отвечать коэффициенту контрастности WCAG (4,5:1). Визуальные элементы должны быть прозрачными, чтобы не выделяться на темном фоне, поэтому используйте форматы PNG, SWG, WEBP.

Помните о доступности и контрастности текста

Для разработки текста в темной теме существуют конкретные числовые значения контрастности. Material Design определяет минимальный уровень контрастности между текстом и фоном — 15,8:1. Рекомендация W3C AAA для текста обычного размера (менее 18pt, для шрифта обычной толщины) — коэффициент контрастности не менее 7:1. Подобное значение относится и к тексту на элементах интерфейса: меткам на кнопках и иконках.

Определите прозрачность шрифта

Как правило, в dark mode текст выполнен белым цветом, но можно использовать любой цвет, подходящий для вашего продукта. Главное — для удобства читаемости следует использовать разные уровни прозрачности:

• Жирный текст или заголовок — 87%.
• Полужирный текст, подзаголовок или текст подсказки — 60%.
• Текст в состоянии неиспользования или отключенный текст — 38%.

Используйте умеренный шрифт

Не выбирайте слишком тонкий или чересчур толстый шрифт. Тонкие варианты съедаются и поглощаются темным фоном, что снижает читабельность. Жирные и толстые начинают расползаться и растекаться при чтении, что также снижает удобство чтения.

Предложите пользователю выбрать

Предоставьте пользователям возможность самим выбирать режим: светлый или темный. Для этого добавьте смену темы в настройки интерфейса, чтобы каждый мог определить для себя наиболее удобный вариант.

Тестируйте

Проведите ряд исследований, чтобы убедиться в удобстве пользования и грамотности построения вашего продукта. Проверьте dark mode в слабоосвещенном пространстве, в ночное время и при дневном свете — насколько читаются элементы, достаточна ли контрастность? После устранения проблем, протестируйте продукт повторно.

Сервис с коллекцией рецептов Let’s cook предлагает текстовый и мультимедийный контент в темном режиме. В приложении представлены кухни разных стран. Также пользователи могут ознакомиться с рецептами известных шеф-поваров. К каждому рецепту прилагаются пошаговые инструкции с фотографиями, списком ингредиентов, описаниями и видео приготовления. Цвет фона — темно-серый, а в качестве акцента выбраны оттенки синего.

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

Brainbox — приложение для чтения книг и прослушивания аудиокниг, которое дает возможность загружать на устройство свои файлы и может взаимодействовать с другими сервисами. В качестве акцентного цвета дизайнер выбрал темный, приглушенный оранжевый, который не мешает восприятию текста и не отвлекает взгляд. Темный режим выгодно подчеркивает обложки книг, а эстетичный интерфейс позволяет создать собственную электронную библиотеку конкретно под пользователя. Если вам неудобно читать большие тексты в темном режиме, в настройках можно переключить на светлую тему.

Темный режим и акцент на продукте фокусируют внимание пользователя, подчеркивая значимость и исключительность товара. Минималистичный дизайн сайта поддерживает лаконичный дизайн самого продукта.

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

Сайт интернет-магазина очков Nylon Orchid выполнен в темном режиме и поддерживает единый дизайн сайта, где обработка фотографий отсылает к ночному мегаполису, неоновым вывескам и стилю. Стоит отметить, что каталог выполнен в светлой теме, но главный экран — презентация бренда — ориентирован на концепцию и представление идеи.

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

Использование темной темы для вашего продукта может расширить аудиторию и улучшить опыт пользования. Однако проектировать dark mode следует внимательно. Придерживаясь правил, описанных в этом лонгриде, вы сможете создать гармоничную визуальную концепцию и грамотный интерфейс в темном варианте.