Глава 5. Информация и цвет

Как работает цвет в инфографике? Человеческий глаз очень восприимчив к малейшим изменениям оттенков, например, профессиональный колорист различает около миллиона цветов, ну по крайней мере, если будет их попарно сравнивать. Большинство же простых людей видят около 20 000 цветов, и вовсе не потому что различать оттенки так уж сложно, а потому, что зрительная память обычного человека больше не вмещает. Однако, при работе с абстрактной информацией больше 20-30 цветов использовать вредно.

Цвет в инфографике работает примерно также как в живописи. Поль Клее иронизировал: “Чтобы хорошо писать картины, достаточно просто красить нужным цветом в нужном месте”. Однако красить нужным цветом в нужном месте не так-то просто, и свидетельством тому редкие примеры цветной инфографики, которые хоть сколько-нибудь выигрывают перед инфографикой чёрно-белой. Более того, это настолько непросто, что при работе с цветом главной задачей становится хотя бы не навредить.


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

Обратите внимание на множество мелких деталей: объемный фон, изменение цвета контуров, игра света и тени на ледниках, цветная типографика. Низ картинки черно-белый, и этот контраст подчеркивает преимущества цветной части.

“Гора Маттерхорн, 1347″, Государственная служба топографии Швейцарии, Ваберн, 1983.

Швейцарские карты восхитительны: прекрасно продуманы и первоклассно реализованы. Идеи не только направляют работу, но и оберегают дизайн от вкусовщины (ведь дизайн должен работать на раскрытие идеи и, соответственно, выбор дизайнерских приёмов можно аргументировать). Тонкости швейцарской картографии подробно описаны в классическом труде Эдуарда Имхофа “Представление картографического рельефа”, в сущности это книга о том, как цвет может сделать информацию понятней. Цель первых двух правил — минимизировать вред от использования цвета:

Правило первое: несколько больших ярких плашек рядком — это чудовищно. Но если использовать яркие цвета фрагментарно или же комбинировать их с чем-то бледненьким, может получиться очень даже хорошо. “Шум это не музыка. Только пиано делает форте и крещендо возможным, также и яркие штрихи хороши только на бледном фоне”. Сама организация земного пространства подталкивает нас к использованию дизайнерских решений такого рода в картографии. Любые экстремумы, например, наивысшие горные точки или океанские глубины, минимум и максимум температур, как правило занимают очень небольшие области. Ограниченное использование ярких цветов — красота. Большие цветные плашки рядом все только испортят.

Правило второе: использование ярких цветов подряд как правило дает неприятные результаты, особенно, если цвета используются на больших пространствах.

Нарушьте эти рекомендации, и вы получите что-нибудь жуткое, типа этого:

“Основное горючее для домашнего отопления в США: 1950, 1960, 1970″

Все эти яркие цвета, особенно синий фон, провоцируют использование белой обводки, которая и выходит на первый план. Цвета перенасыщены, и явно наблюдается эффект 1+1=3, прямо целое визуальное побоище.

Наряду с критикой цветового шума первое правило Имхофа содержит важную конструктивную мысль: яркие цвета на светло-сером или приглушенном фоне выделяют информацию и помогают установить общую гармонию. Архитектурный рисунок Дэниэла Бернхема показывает важность небольших цветных пятен: понятно, ярко, фактурно, но не суетно, нужный цвет в нужном месте. План Чикаго 1909 года содержит ещё несколько подобных примеров мастерской работы с цветом.

Дэниэл Бернхэм “План летней столицы Филиппинских островов”, из сборника “План Чикаго”, Чикаго, 1909.

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

Ян Чихольд “Новая типографика”, Берлин 1928.


Очень достойная работа с цветом в переиздании первых шести книг “Начал” Евклида под редакцией Оливера Бирна в 1847 году. Истинный визуал, Бирн отказывается от традиционного в геометрии буквенного обозначения. Каждый элемент однозначно определяется по форме, цвету и положению на плоскости — вместо того, чтобы толковать об угле DEF, угол этот показан и для геометрии вполне убедительно (ведь мы ведем беседу в области геометрии, не так ли?). Ниже приведена традиционная страница с доказательством теоремы Пифагора, в рисунке использовано 63 обозначения — это же сколько надо потратить времени, чтобы все это прочесть и все нужные связи у себя в голове установить.

Дюрелл “Элементарная геометрия”, Лондон, 1936.

А вот визуальное представление той же теоремы. Руари Маклин назвал книгу Бирна “одной из самых странных и красивых книг 19-го столетия… бесспорное усложнение Евклида, но и издательский триумф Чарльза Витхэма”. Однако, при ближайшем рассмотрении становится понятно, что по меньшей мере для определенной группы читателей бирновское представление вносит ясность в неочевидные и запутанные изыскания Евклида.

Оливер Бирн “Первые шесть книг “Начал” Евклида с использованием цветных диаграмм и символов вместо букв для упрощения обучения”, Лондон, 1847.

Ниже инструкция как построить квадрат на основе круга с типичным эвклидовым доказательством того, что построенная фигура действительно окажется квадратом. Цвет тут выполняет информативную функцию. Бирн использует всего навсего четыре простых цвета, а ведь никакие иные четыре цвета так не отличаются друг от друга. Глубокий жёлтый контрастен белому фону, синий относительной светлый и не сливается с чёрным. Чёрный вообще используется мало, да и то только для приглушения ненужных контрастов, а на больших поверхностях — никогда. Большой интерлиньяж делает использование графических элементов в тексте органичным, легко читаемым, а также объединяет всю страницу, создавая похожие на геометрические формы линии текста (а не блоки, как при традиционном наборе).

Оливер Бирн был всего лишь придворным землемером Фолклендских островов и школьным учителем математики, а его дизайн Евклидовых “Начал” предвосхищает чистые простые цвета, ассиметрию, угловатость, лёгкость пустого пространства и беспредметность, характерные для неопластицизма и живописи художественной группы Стиль (De Stijl) 20-го века. И все-таки это Евклид. Только декоративные буквицы и ксилография Мэри Бифильд намекают на принадлежность к эпохе, хотя с другой стороны, можно сказать, что они выглядят тут настоящим пост-модерном.

Пит Мондриан “Композиция с красным, желытм и синим”, 1930.
Тео ван Дузбург “Одновременная контр-композиция”, 1929-1930.

В 1926 году Пит Мондриан объявил принципы нео-пластицизма:
1. Пластичная среда должна быть плоскостью или прямоугольной призмой одного из простых цветов (красного, синего или жёлтого) или же бесцветной (чёрной, белой или серой).
2. Пластические средства должны быть равноценны. Они могут быть разными по цвету и размеру, но не должны быть одинаковыми по весу. В целом баланс предполагает наличие больших бесцветных поверхностей или пустых пространств и небольших закрашенных участков.
4. Постоянного равновесия можно достигнуть на контрасте и его можно выразить прямой линией (предел пластических средств) в её основном противостоянии, например, в прямом угле…
6. Всякая симметрия должны быть исключена.

Мишель Сеуфор “Пит Мондриан: жизнь и работа”, Нью-Йорк, 1956.

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


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

Можно ли использовать многомерную природу цвета для представления многомерной информации? И сможет ли зритель понять или научиться понимать подобные представления? Можно это проверить: скажем, имеется массив точек, у каждой точки кроме координат X и Y (которые определяют её положение на плоскости), есть ещё 3 дополнительные координаты, которые мы и станем подсвечивать красным, синим и зелёным соответственно значениям, которые они принимают. На картинке матрица 5х5 показывает пары значенией Х и Y. Обратите внимание на цветовые кластеры, фактически это представление многомерной информации на плоскости.

Колин Вэйр и Джон Бетти “Использование цвета в качестве инструмента дискретного анализа данных”, Университет Ватерлоо.

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

Цвет также оживляет и наполняет дополнительным смыслом компьютерные интерфейсы (однако, важно не переусердствовать и не превратить интерфейс в пародию на видеоигру):

На рисунке ниже традиционный многооконный интерфейс со скроллерами и всякими штуками. Густая темная сетка визуально шумит по правилу 1+1=3, причем шум этот к границам окна возрастает. А шум нынче дорог, ведь компьютеры — это устройства с низкой разрешающей способностью, а работать им приходится с большой плотностью данных. Это и есть главная проблема мониторов: человек и компьютер способны перерабатывать огромное количество сложной информации, а взаимодействовать они вынуждены через узкополосный экран с низким разрешением, и стало быть о быстрой, четкой работе можно забыть.

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

Цвет вполне способен обогатить технически обусловленную информационную скудность компьютерного экрана. Во-первых, смягчается эффект, возникающий, если долго смотреть на лампы накаливания. Кроме этого, цвет оттеняет края и позволяет вовсе отказаться от сетки и контуров. Цвет активного окна должен быть довольно светлым (чтобы не возникало эффекта 1+1=3) и в то же время ярким и насыщенным, чтобы однозначно это активное окно выделить. Единственный цвет, подходящий по всем параметрам — жёлтый. Таким образом задача двумерного дисплея может быть решена двумя характеристиками одного цвета.


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

Гретхен Гарнер “Березовая роща”, фотография, 1988.

Проакцентировать важное можно отдельными яркими пятнами на приглушенном фоне. Эдуард Имхоф развивает эту тему своей характеристикой науки и искусства картографии:

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

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

Эдуард Имхоф “Картографическое представление рельефа”, Берлин,1982.

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

Цвет это, конечно, не просто визуальная маркировка объектов на плоскости, это ещё и очень чувствительный и точный инструмент разделения. С информацией как с искусством: “Множество цветовых комбинации предоставляет непаханное поле для вариации смыслов… от малейшего затемнения до сверкающей симфонии цвета. Какие перспективы для работы со смыслами”, — писал Поль Клее. Поль клее “О современном искусстве”, Берн, 1945. На самом деле, если учитывать как сложно сопоставить цвет с числом, а потом это аккуратно интерпретировать, всё не так радужно.

Общая батиметрическая карта океанов иллюстрирует большие океанские глубины и высоты материковой поверхности (гипсометрические отметки) в 21 шаг по принципу “чем глубше или выше, тем темнее”. На картинке ниже показаны океанические жёлобы на западе Тихого океана и в Японском море. Вокруг цветных плашек пронумерованные контуры, это упрощает чтение. Почти прозрачные серые линии вдали от глубоководных отметок — это изобаты (вне особо детализированных областей, таких как порты и прибрежные зоны). Каждая цветовая отметка на этой карте отвечает за четыре параметра: широта, долгота, море или материк и глубина или высота в метрах.


Общая батиметрическая карта океанов, Канада, 1984.

На карте океанов разные по значению области окрашены разными по насыщенности цветами — от светло- до тёмно-синего. Это простой и понятный прием, однако, он очень чувствителен к раздражающим побочным эффектам, как например, на картинке выше: не очёнь четкие переходы между прямоугольниками и недостаточный контраст мешают правильному, однозначному восприятию. Этот приём часто заменяется беспорядочной последовательностью цветов радуги, зритель на неё смотрит и пытается мысленно произнести название каждого цвета и соответствующее ему значение. Это полностью противоположно аксиоме Поля Валери: “Видеть — значит забыть имя вещи на которую смотришь”. Несмотря на то, что пишут в научных книжках по цветовому спектру, наше внутреннее зрение не готово так вот сразу упорядочить это “каждый охотник желает знать, где сидит фазан”. И поэтому в условиях этого радужного недоразумения сознанию приходится искать какие-то иные визуальные ориентиры (контуры, подписи), чтобы хоть как-то информацию переварить.

Стоит отметить, однако, что некоторые вариации тона могут существенно улучшить восприятие, ощущуение “натуральности”, естественности при этом не пропадет.


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

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

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

Можно ли использовать эти свойства взаимодествия цветов на пользу информационного дизайна? Не всегда, но, например, в этой карте дорог получилось. Небольшие дороги здесь обозначены тонкой красной линией. Большая же дорога — той же линией, но окруженной параллельными синими. Таким образом она фактически становится темно красной, а это новый цвет, новое обозначение, новый код.

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


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

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

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

А тут цвет контура не очень важен, важно именно его наличие. Лучше всего делать контуры цветом, близким к цветам заливок. Тут, например, здания покрашены в 7% серого, а фон — в 3%, на второй картинке — то же самое, но с контурами.

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

Вильям Генри Томс, на основе работы Томаса Бадеслейда “Картография Британии или набор карт всех графств Англии и Уэльса”, Лондон, 1742.

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

Томас Бадеслейд “Полный набор карт Англии и Уэльса, включая отдельные карты графств”, 1724.

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


“Всё движется одновременно”, — как сказал Уинстон Черчилль по поводу военной стратегии. Это справедливо и для работы с цветом — даже простые приёмы могут повлечь за собой многослойные сложности. На этом японском узоре по ткани белые точки как бы немного приподнимаются над поверхностью рисунка, в точности как в идее Альберса о вычитании цвета. Точки и лепестки окружены так называемыми когнитивными контурами. Эти контуры в свою очередь создают однородное поле, точно такое же, как и на карте океана и на серой карте города.