Как создавать восхитительные тёмные темы

Перевод статьи от Терезы Мэн.

Тёмные темы — последний тренд в дизайне приложений. В macOS она появилась в прошлом году. Android запустил тёмную тему в прошлом месяце.

Когда-то они были редкими, сейчас тёмные темы везде.

Когда всё сделано хорошо, тёмные темы имеют много преимуществ. Они уменьшают напряжение глаз. Их легче читать при слабом освещении. И (в зависимости от экрана) они могут значительно снизить расход батареи.

Однако сложно создать восхитительную тёмную тему. Мы не можем просто повторно использовать цвета или инвертировать оттенки. Если мы это сделаем, добьёмся противоположного результата: увеличим напряжение глаз и усложним чтение при слабом освещении. Мы можем даже нарушить нашу информационную иерархию.

В этой статье расскажем, как создавать тёмные темы, которые будут читабельными, сбалансированными и восхитительными.

Большая часть дизайна пользовательского интерфейса в тёмных темах следует принципу: затемнение удалённых поверхностей. Это имитирует среду, в которой свет излучается сверху, и передаёт знакомую физическую форму.

При создании тёмной темы может быть заманчиво перевернуть нашу светлую тему. Однако удалённые поверхности станут светлыми, а ближние поверхности станут тёмными. Это нарушит физическую форму и станет неестественным.

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

В Superhuman наша тёмная тема состоит из пяти оттенков серого. Более близкие поверхности используют более светлые оттенки серого; более отдалённые поверхности используют более тёмные оттенки серого.

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

Например, в нашей светлой теме контактная информация чёрная с непрозрачностью 60%. Но в нашей тёмной теме мы установили контактную информацию на белый с непрозрачностью 65%. Хотя оба коэффициента контрастности превышают стандарт AA, дополнительные 5% предотвращают усталость, особенно в условиях низкой освещённости.

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

В светлых темах мы часто используем большие блоки яркого цвета. Это обычно хорошо: наши самые важные элементы, вероятно, будут ещё ярче. Но в тёмных темах это не работает: большие цветные блоки притягивают внимание к самым важным элементам.

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

В Superhuman мы не используем чистый чёрный или белый в наших тёмных темах. Вот четыре причины сделать то же самое.

Настоящий чёрный не существует в нашей повседневной среде. (самый тёмный объект в мире, материал, название которому ещё надо дать в MIT, всё ещё на 0,005% отклоняется от настоящего чёрного).

Поэтому наше зрение приспособилось воспринимать относительную темноту как настоящий чёрный. Вот почему #000000 может показаться таким резким, особенно при установке на более лёгкие элементы. Это не соответствует тому, что мы обычно видим.

Черное смазывание — это визуальное искажение, возникающее при перетаскивании или прокрутке более светлого содержимого на чисто чёрном фоне.

Этот эффект возникает на экранах OLED, которые всё чаще встречаются. На этих экранах чисто чёрные пиксели отключены. (Таким образом, тёмные темы могут потреблять меньше энергии, чем светлые.)

Однако для этих пикселей медленнее включаться и выключаться, чем для изменения цвета. Эта переменная реакция создаёт эффект размазывания.

Вы можете избежать размывания чёрного, используя тёмно-серый, так как тогда пиксели не будут выключаться. Это даже работает с серым, таким же тёмным, как #010101, — и всё ещё потребляет гораздо меньше энергии, чем светлая тема!

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

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

Если ваш фон не чисто чёрный, вы можете использовать тени с разной прозрачностью и размытием, чтобы передать глубину. Например, рассмотрим уведомление в Superhuman:

Чисто белый текст на чистом чёрном фоне создаёт максимально возможную контрастность: 21: 1. В количественном выражении доступности WCAG это мечта.

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

Людям с астигматизмом (примерно 50% населения) труднее читать белый текст на чёрном, чем чёрный текст на белом. Частично это связано с уровнями освещённости: при ярком дисплее (на белом фоне) радужная оболочка закрывается немного больше, уменьшая эффект «деформированной» линзы; с тёмным дисплеем (чёрный фон) радужная оболочка открывается, чтобы получить больше света, а деформация линзы создаёт гораздо более размытый фокус на глазу.

В Superhuman мы должны быть особенно осторожны с халязионом, так как наше приложение очень тяжёлое для текста. Мы устанавливаем для белого текста непрозрачность 90%, чтобы тёмный фон сливался. Это уравновешивает контраст и яркость, так что приложение легко читается в самых разных условиях освещения.

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

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

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

Мы нашли систематический способ создания тёмных тем, которые читабельны, сбалансированы и восхитительны. Просто следуйте этим шагам.

Ещё больше статей, интервью с дизайнерами и другой полезный контент вы можете найти в моём Telegram-канале: @dezzigners.