Черный цвет в темных темах
C появлением у основных десктопных и мобильных операционных систем темных версий интерфейса следом посыпались статьи с рекомендациями дизайнерам о том, как составлять темные темы для своих сайтов и приложений. И почему-то почти в каждой такой статье призывают не использовать в темной теме чистый черный цвет.
Аргументы в пользу этого запрета разнятся, где-то даже ссылаются на технологию OLED-экранов и непривычность идеально-черного цвета и высокого контраста человеческому глазу, к чему я еще вернусь, но общий лейтмотив — это потребность в тенюшках и использовании «глубины» интерфейсной сцены.
Когда я прочитал про эту глубину в третьей статье подряд, всё пытаясь вспомнить сайты и приложения с тенюшками, я начал подозревать, что где-то тут в кустах спрятался гайдлайн гугловского material design, на который и косились авторы тех статей. Так что я решил начать с него.
В material design слоеность элементов интерфейса — это основа основ, и отбрасываемые элементами тени — ключевой способ демонстрации этой иерархии.
Тени в этой системе настолько важны, что гайдлайны рекомендуют не отказываться от них даже когда они еле заметны на темном фоне.
Поэтому нет ничего удивительного в том, что в разделе гайдлайнов material design про темную тему рекомендуют использовать темно-серый цвет вместо черного, ведь на черном не будут видны тени!
Хотя к ним в темной теме добавляется еще один способ отображения уровня залегания элемента интерфейса — яркость: чем выше слой, тем больше на него падает света и тем он ярче, до нижних же слоев свет еле доходит и они темные.
Окей, тенюшки так тенюшки, не мне рассказывать дизайнерам гугла, как им строить их дизайн-систему. Хотя даже если в их макете-примере понизить точку черного до #000, утопив в нем тени, кажется, ничего страшного со слоеным интерфейсом не произойдет:
А вот авторы тех статей будто не поняли, что списали. Так, в статье uxmisfit.com призывают не использовать тени в темной версии интерфейса, но при этом всё равно настаивают, что сделать фон приложение черным — «…Это популярная ошибка, которую все совершают. Вместо этого надо использовать для фона темные оттенки», и всё это под тем же соусом борьбы за больший диапазон глубин интерфейса.
Хотя тени, от которых они отказались — это же и есть основная причина, по которой черный фон запрещался, и не очень понятно, как без теней сокращение «дистанции» между самым светлым и самым темным элементами может способствовать увеличению диапазона глубины интерфейса.
Например, возьмем всё тот же макет и по заветам статьи уберем из него тени, оставив серый фон и влияние глубины залегания элемента на его яркость.
Теперь пропорционально затемним весь интерфейс настолько, чтобы фон стал черным.
Изменилось ли ощущение глубины интерфейса, потерялась ли иерархия элементов? Я ничего подобного не заметил.
Проблема с этими статьями как раз в том, что их авторы постеснялись написать просто «Если вы делаете приложение по гайдам material design, то вот ссылка на раздел про темные темы». Вместо этого они рекомендацию по адаптации к темной версии одной завязанной на тенюшках дизайн-системы (material design) превратили в общие наставления «Вот как делать темные темы», еще и растеряв по дороге смысл и добавив немного несвязной отсебятины, повторяя мантру про диапазон глубины интерфейса, уже не помня, что это означает.
Серый фон действительно может дать более широкий диапазон выразительности, потому что на таком фоне можно рисовать красками и темнее, и светлее фона. Это как ось со смещенным нулем, по которой можно двигаться в обе сторону — и в плюс, и в минус. Этот прием добавляет новые визуальные уровни. Просто взгляните:
Это работает и на сайтах:
В интерфейсе: на сером фоне можно расставлять акценты как светлым выделением, так и темным. Спутать эти два выделения сложнее, чем два выделения разного цвета, но одинаковой яркости.
В «Армейском дневнике» я использовал бледно-бежевый фон, благодаря чему получилось делать выделение белыми вставками, так как цвет выделения темнее фона уже был занят под другую функцию.
Но это всё не имеет отношения к тем советам из статей о составлении темных тем интерфейса, так как там темно-серый фон всё равно остается самым темным цветом (ну помимо малозаметных теней поверх этого фона), никакой двусторонней оси там нет.
Поэтому собранные по этим заветам приложения будто переэкспонированы, они как картинки, где забыли вытянуть контраст:
В общем-то, некоторые приложения сразу выходят с черным фоном, и каких-то проблем с иерархией элементов в них не то чтобы заметно: приёма с высветлением находящихся сверху элементов и эффектов вроде мутного стеклышка оказывается вполне достаточно. Так что как минимум за пределами material design черный цвет живет нормально.
И еще коснусь аргументов автора одной из статей (перевод)про то, что идеального черного и белого цвета в окружающем нас мире не существует, и поэтому глазу на них смотреть непривычно, а слишком агрессивный контраст утомляет глаза.
Человек не смотрит на чистые цвета #000000 и #ffffff — он смотрит на экран устройства в определенных условия освещения — ночью под одеялом или днем на ярком солнце — и с определенной настройкой яркости дисплея. Идеально-черный цвет на экране смартфона не выглядит более непривычно, чем просто выключенный экран смартфона. И как не стоит в темной теме интерфейса специально менять цвета на более теплые оттенки, чтобы эмулировать работу функций типа Night Shift (на устройствах эпла) или Night Light (в андроиде), так и не стоит в темной теме специально понижать контраст, чтобы эмулировать работу понижения яркости экрана у устройства, что означает и уменьшение контраста. Кажется, этот вопрос должен решаться на уровне системы, а не в каждом приложении индивидуально.
Дизайнер приложения/сайта выбором оттенков для элементов интерфейса устанавливает уровень максимального контраста внутри приложения, и пользователь уже не сможет поднять контраст выше этого порога системными средствами, только понизить. С учетом того, что уровень контраста между цветом текста и цвета фона — один из ключевых параметров, влияющий на читабельность текста, к искусственному уменьшению этого порога максимального контраста стоит подходить аккуратно.
В любом случае, я не настаиваю на обязательном использовании в темных версиях сайтов и приложений черного фона. Но если всё же решите использовать серый фон в темной версии своего интерфейса, то убедитесь, что у этого решения есть причины, даже если это «Потому что мне так больше нравится», но хотя бы не потому что в статьях написано «бла-бла-бла Диапазон глубины бла-бла-бла» и «Черный фон — популярная ошибка, которую все совершают». Скажем, у меня самого сайт с темно-серым фоном, потому что на нем часто встречаются картинки с черным фоном, а я хотел обойтись без обводок и рамок, которые бы очерчивали границу изображений.
Более мелкие заметки про дизайн выходят на канале: https://t.me/meow_design
