Чёрный цвет — табу, миф или необходимость?

в 7:51, , рубрики: веб-дизайн, дизайн, интерфейсы, цвет, цветопередача, метки: , ,

Прочитав этот топик и запись в блоге, на которой он основан, я подумал в очередной раз о том, как же любят «специалисты по веб-дизайну» (это камень в сторону автора записи в блоге, но не только — всем известны и другие любители этого) выдавать давно известные тезисы за откровение и яро их пропагандировать. Не слишком заботясь о логике того, как эти тезисы переносятся на веб-дизайн и дизайн вообще, и что они изначально значат.

Давайте разберемся, в чем тут реальная проблема.

Что такое «чёрный цвет»?

Этот вопрос явно не очевиден для тех, кто берется рассуждать о вреде или пользе чёрного цвета.
Просто потому, что они постоянно путают условные числа вроде #000 в палитре, способность поверхности отражать и поглощать свет (истинный цвет поверхности), условия освещения (наличие так называемых «теней») в рассматриваемой сцене, а также человеческое восприятие пары «цвет-яркость», которое складывается даже не в глазах, а в мозге.

Если чёрного не бывает, можем ли мы его вообще получить?

Условная цифра #000 всего-навсего присваивает пикселю экрана минимальную яркость и нейтральную плотность (то есть равные величины в каналах R,G,B). А дальше:
— жидкокристаллический монитор превращает этот цвет в свой «лучший чёрный», который уже не является чёрным (выключите свет в комнате, залейте экран сплошным черным, и увидите, что он все равно светится, при том в случае TN-матрицы — чуть не всеми цветами радуги, если присмотреться);
— плазменный или OLED монитор делает то же самое, только слабым местом оказывается не отсечение подсветки, а отражение внешнего света от поверхности экрана;
— проектор, как и жидкокристаллический монитор, имеет ту же проблему оптической плотности пикселей, через которые все равно пробивается свет лампы.

Так что когда кто-то говорит, что «чёрного в природе не бывает, поэтому нельзя использовать его в оформлении интерфейсов» — он сам себе противоречит — ведь экраны подчиняются тем же законам природы, а потому мифического «абсолютно чёрного» на них быть не может.

«Хотим чёрного!»

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

Другим странным людям нужен максимально глубокий чёрный на печати, а потому они печатают чёрное не просто краской цвета K, а добавляют к ней остальные C,M,Y, в равных пропорциях, чтобы увеличить оптическую плотность, ведь бумага — низкоконтрастный носитель. А некоторые еще ко всяким ухищрениям прибегают, вроде глянцевой бумаги или покрытия чёрных областей лаком, чтобы свет отражался от поверхности только в одном направлении, а не рассеивался, от чего эффект глубины чёрного усиливается.

Зачем они всё это делают? Всё просто: человек в солнечный день способен различить в сцене контраст более 1:10M (в том числе — благодаря мозгу, а не только глазам), так что чем этот контраст сильнее, тем реалистичнее выглядит изображение. А увеличить контраст можно всего двумя путями — увеличение яркости светлого и уменьшением яркости темного.

Чёрный или тёмно-синий?

Частью «кампании по борьбе с чёрным» обычно является утверждение, что нужно использовать не чёрный, а тёмные оттенки разных цветов. В качестве примеров приводятся картины и фотографии. Фотографии мы выкинем сразу, особенно — те, что с Instagram, но и остальные — тоже, потому что какой баланс белого выставил автор, такого цвета там тени и будут: синие, коричневые, красные. А с картинами (выполненными в реалистической манере, ведь за адекватность восприятия сюрреалистов или импрессионистов ручаться очень сложно) разберемся дальше.

Атмосфера — штука сложная, смесь газов с водяным паром и пылью пропускает и отражает свет очень по-разному, делая освещение пасмурным зимним утром синим, а во время летнего заката со слабой облачностью — красно-оранжевым. Так что легко понять, как на картине «Закат при ясном небе в приморском городке» могут быть синие тени и домики, освещенные оранжевым светом: туда, куда не добивают прямые солнечные лучи, ставшие оранжевыми при проходе через толстый слой атмосферы, попадает отраженный голубой свет, придающий ясному небу знакомый всем оттенок. Аналогичная ситуация возникает во множестве реальных сцен, где есть основной сильный источник света и вторичные, чьи цветовые характеристики различаются.

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

Прекрасно, мы разобрались с тенями в живописи. Но какое же отношение это имеет к дизайну интерфейсов? Абсолютно никакого. «Тени» и «освещенные участки» плоского интерфейса на самом деле не освещены никакими источниками света, они просто нарисованы. Да, при создании объемных элементов можно сделать блики чуть более тёплого оттенка, а тени — чуть более холодного. Но не будет ли это выглядеть «грязно»? Это уже во многом вопрос привычки пользователя. Большинство людей привыкли к строгости и чистоте цветов на экранах, так что такое решение в духе «заката при ясном небе...» может оказаться очень спорным.

Я уже не говорю о том, к какому безобразию такое вот «подкрашивание» может привести на печати, если речь о распечатке скриншотов интерфейса приложения или сайта, у которого не предусмотрен отдельный печатный стиль. Недорогой принтер с низким разрешением с радостью наляпает редких цветных точек по темно-серому полю. А вспомним еще матрицы мониторов с 18-битным цветом, которые существенно искажают как раз цвета со слабой насыщенностью…

Стремление к строгости цветов — субъективно?

А ограничивается ли одной только привычкой стремление видеть четкие цвета и высокий контраст? Определенно, нет. Можно поставить простой эксперимент. В любой программе смените нейтральный (белый или чёрный) фон на близкий по яркости, но с легким сдвигом в какой-то цвет. Например, на очень светлый желтый (как старая бумага) или очень темный синий (как ясное небо ночью). Поработав несколько десятков минут в таких условиях, мозг начнет вычитать эту новую «постоянную составляющую» и фон будет казаться белым или чёрным.

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

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

А может все же есть смысл?

Кое-где — да. Например, существует рекомендация не использовать сплошные фоны нейтрального цвета (серый, белый) для приложений под Android, потому что при отображении таких фонов OLED-экранами становятся хорошо видны малейшие неравномерности в цветопередаче, которой они иногда страдают.

Плюс, если сделать фон очень темным (не важно, какого оттенка), а поверх поместить надпись белыми буквами с черной тенью, это сделает текст еще более контрастным, чем просто белый на чёрном. Только стоит убедиться, что аудитория будет рассматривать этот текст со сглаживанием, а то получится впечатление «рваных» букв.

Выводы

Главный вывод — цвет, свет, их отображение и восприятие — единый комплекс явлений, ведущий себя очень по-разному. И стоит понимать, как именно, прежде чем что-либо предпринимать для вмешательства в этот процесс.

Второстепенный вывод — стоит поменьше верить откровениям разного рода «гуру», которые, как это раньше говорили, «слышали звон ...».

Автор: Moskus


* - обязательные к заполнению поля


https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js