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

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

В закладки
Аудио

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

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

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

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

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

1. Затемнить отдалённые поверхности

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

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

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

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

2. Пересмотреть контраст восприятия

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

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

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

3. Уменьшить количество больших блоков яркого цвета

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

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

4. Избегайте чистого чёрного или белого

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

4.1. Реализм

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

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

4.2. Чёрное смазывание

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

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

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

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

4.3. Глубина

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

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

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

4.4. Ареола

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

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

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

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

5. Делайте цвета глубже

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

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

Заключение

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

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

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

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

Написать
{ "author_name": "Знаешь Первый", "author_type": "self", "tags": ["010101","000000"], "comments": 20, "likes": 54, "favorites": 285, "is_advertisement": false, "subsite_label": "design", "id": 88380, "is_wide": false, "is_ugc": true, "date": "Wed, 16 Oct 2019 19:15:23 +0300", "is_special": false }
0
{ "id": 88380, "author_id": 372723, "diff_limit": 1000, "urls": {"diff":"\/comments\/88380\/get","add":"\/comments\/88380\/add","edit":"\/comments\/edit","remove":"\/admin\/comments\/remove","pin":"\/admin\/comments\/pin","get4edit":"\/comments\/get4edit","complain":"\/comments\/complain","load_more":"\/comments\/loading\/88380"}, "attach_limit": 2, "max_comment_text_length": 5000, "subsite_id": 199114, "last_count_and_date": null }
20 комментариев
Популярные
По порядку
Написать комментарий...
17

Краткое содержание:

1. Черный делаем светлее.
2. Белый делаем темнее.
3. Близкие элементы интерфейса ярче.
4. Убираем лишние цвета.
5. Соседние цвета приглушаем.

Ответить
5

Как это прочитал в статье понял что дальше можно просто комменты полистать)

Ответить
6

Чо Ширяев то сразу(

Ответить
0

с DTF сейчас народ сюда позову!

Ответить
1

Нормально же общались! 

Ответить
0

Кто, если не ты?

Ответить
11

Да че сложного. Берем стандартную темную тему из iOS и копируем цвета

Ответить
0

Неплохо написано.

Жду, тем временем, когда прилетит инстаграм с темной темой на Андроид 9)

Ответить
13

Вряд ли вы увидите что-то интересное: они просто поменяли белый на кошмарно-чёрный

Ответить
10

Темная тема в инсте противоречит всему тому, что написано в статье. И это, кстати, хороший пример(но плохой продукт), который доказывает правильность рассуждений автора.

Ответить
0

Да, на 10 андрд в инсте тупо белый #fff текст на черном #000 фоне

Ответить
0

У меня на MIUI после недавнего обновления и появления темной системной темы, Инстаграм уже темный (Андроид тоже до 9 обновился).

Ответить
0

понимаю, увожаю)

Ответить
0

В инсте так себе темная тема

Ответить
1

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

Ответить
0

Про эффект чёрного смазывания не знал, интересно!

Ответить
0

Покажите эту статью Ширяеву

Ответить
0

Очень познавательно)

Ответить
0

Это гугл перевод?

Ответить
{ "page_type": "article" }

Прямой эфир

[ { "id": 1, "label": "100%×150_Branding_desktop", "provider": "adfox", "adaptive": [ "desktop" ], "adfox_method": "createAdaptive", "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "ezfl" } } }, { "id": 2, "label": "1200х400", "provider": "adfox", "adaptive": [ "phone" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "ezfn" } } }, { "id": 3, "label": "240х200 _ТГБ_desktop", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fizc" } } }, { "id": 4, "label": "Article Branding", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "p1": "cfovx", "p2": "glug" } } }, { "id": 5, "label": "300x500_desktop", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "ezfk" } } }, { "id": 6, "label": "1180х250_Interpool_баннер над комментариями_Desktop", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "pp": "h", "ps": "bugf", "p2": "ffyh" } } }, { "id": 7, "label": "Article Footer 100%_desktop_mobile", "provider": "adfox", "adaptive": [ "desktop", "tablet", "phone" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fjxb" } } }, { "id": 8, "label": "Fullscreen Desktop", "provider": "adfox", "adaptive": [ "desktop", "tablet" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fjoh" } } }, { "id": 9, "label": "Fullscreen Mobile", "provider": "adfox", "adaptive": [ "phone" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fjog" } } }, { "id": 10, "disable": true, "label": "Native Partner Desktop", "provider": "adfox", "adaptive": [ "desktop", "tablet" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "clmf", "p2": "fmyb" } } }, { "id": 11, "disable": true, "label": "Native Partner Mobile", "provider": "adfox", "adaptive": [ "phone" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "clmf", "p2": "fmyc" } } }, { "id": 12, "label": "Кнопка в шапке", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "p1": "bscsh", "p2": "fdhx" } } }, { "id": 13, "label": "DM InPage Video PartnerCode", "provider": "adfox", "adaptive": [ "desktop", "tablet", "phone" ], "adfox_method": "createAdaptive", "adfox": { "ownerId": 228129, "params": { "pp": "h", "ps": "bugf", "p2": "flvn" } } }, { "id": 14, "label": "Yandex context video banner", "provider": "yandex", "yandex": { "block_id": "VI-223676-0", "render_to": "inpage_VI-223676-0-1104503429", "adfox_url": "//ads.adfox.ru/228129/getCode?pp=h&ps=bugf&p2=fpjw&puid1=&puid2=&puid3=&puid4=&puid8=&puid9=&puid10=&puid21=&puid22=&puid31=&puid32=&puid33=&fmt=1&dl={REFERER}&pr=" } }, { "id": 15, "label": "Баннер в ленте на главной", "provider": "adfox", "adaptive": [ "desktop", "tablet", "phone" ], "adfox": { "ownerId": 228129, "params": { "p1": "byudx", "p2": "ftjf" } } }, { "id": 16, "label": "Кнопка в шапке мобайл", "provider": "adfox", "adaptive": [ "tablet", "phone" ], "adfox": { "ownerId": 228129, "params": { "p1": "byzqf", "p2": "ftwx" } } }, { "id": 17, "label": "Stratum Desktop", "provider": "adfox", "adaptive": [ "desktop" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fzvb" } } }, { "id": 18, "label": "Stratum Mobile", "provider": "adfox", "adaptive": [ "tablet", "phone" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fzvc" } } }, { "id": 19, "disable": true, "label": "Тизер на главной", "provider": "adfox", "adaptive": [ "desktop", "tablet", "phone" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "p1": "cbltd", "p2": "gazs" } } }, { "id": 20, "label": "Кнопка в сайдбаре", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "p1": "cgxmr", "p2": "gnwc" } } } ] { "page_type": "default" }