Я провела пятнадцать лет, изучая, как люди воспринимают визуальную информацию. Цвет в визуализации данных — одна из тех областей, где интуиция часто нас подводит.
Позвольте поделиться тем, что на самом деле показывают исследования.
Три задачи цвета в графиках
Прежде чем выбирать цвета, поймите, что вы просите цвет сделать:
1. Различать категории
Когда у вас есть разные серии данных (Продукт А, Продукт Б, Продукт В), цвет помогает зрителям отличать их друг от друга.
Результат исследований: Люди могут надежно различить примерно 5-8 цветов с первого взгляда. За пределами этого количества зрители начинают путать категории. Вот почему эксперты по визуализации данных ограничивают свои палитры.
2. Кодировать значения
В тепловых картах и хороплетах цвет представляет количество. Темнее = больше, светлее = меньше (или наоборот).
Результат исследований: Последовательные цветовые шкалы (от светлого к темному в одном оттенке) работают лучше, чем дивергентные шкалы, для большинства количественных данных. Мы интуитивно понимаем, что «более насыщенный = более интенсивный».
3. Привлекать внимание
Цвет выделяет важное. Красный столбик среди серых говорит: «посмотрите сюда».
Результат исследований: Один цвет для выделения на нейтральном фоне эффективнее, чем несколько «важных» цветов, конкурирующих за внимание.
Культурный багаж цвета
Цвета несут смысл, но этот смысл зависит от контекста и культуры.
Красный
Западный контекст: Опасность, убыток, стоп, негатив, срочность
Финансовый контекст: Убыток, падение, продажа
Дизайн-контекст: Ошибка, предупреждение, внимание
В Китае: Удача, процветание, праздник
На фондовых рынках: Часто обратное (красный = рост на некоторых азиатских рынках)
Безопасный подход: Используйте красный для «плохого» или «требует внимания» только тогда, когда ваша аудитория разделяет этот культурный контекст. Рассмотрите форму или позиционные подсказки как запасной вариант.
Зеленый
В целом: Рост, движение, позитив, природа, успех
Финансовый контекст: Прибыль, рост, покупка
Довольно универсально, но учтите, что в некоторых культурах зеленый имеет религиозное значение.
Безопасный подход: Сочетайте зеленый с концепциями «рост» или «хорошо», но используйте другой отличительный признак (например, направление стрелки) для критически важной информации.
Синий
В целом: Доверие, стабильность, спокойствие, профессионализм
Корпоративный контекст: Самый распространенный цвет для брендов неспроста
Низкий риск: Синий — самый безопасный выбор цвета в разных культурах и контекстах. Он также наиболее различим для людей с дефицитом цветового зрения.
Оранжевый/Желтый
В целом: Предупреждение, осторожность, энергия, внимание
Индикаторы статуса: Часто используется для «предупреждения» или «требует внимания»
Ловушка: Желтый на белом имеет плохой контраст. Оранжевый может восприниматься агрессивно.
Реальность доступности
Вот что многие специалисты по визуализации данных игнорируют: примерно у 8% мужчин и 0,5% женщин есть та или иная форма дефицита цветового зрения. Это около 300 миллионов человек по всему миру.
Что видят пользователи с дальтонизмом
Красно-зеленый дальтонизм (наиболее распространенный): Красный и зеленый выглядят как похожие грязно-коричневые тона.
Следствие: Никогда не полагайтесь только на различие красного и зеленого, чтобы различать категории. Это невидимо для значительной части вашей аудитории.
Работающие решения
- Используйте палитры, дружественные к дальтонизму: Сине-оранжевая, сине-желтая и фиолетово-оранжевая палитры хорошо различимы при большинстве типов дефицита цветового зрения.
- Добавьте вторичное кодирование: Узоры, формы или подписи, которые работают без цвета.
- Используйте достаточную контрастность по яркости: Даже без цвета более светлые и темные оттенки можно различить.
- Тестируйте свою работу: Инструменты вроде Coblis (Color Blindness Simulator) показывают, как ваш график выглядит для пользователей с дальтонизмом.
Исследования о цвете и восприятии
Исследование: Кливленд и МакГилл (1984)
Результат: Положение вдоль общей шкалы воспринимается точнее, чем насыщенность цвета.
Следствие: Не полагайтесь на интенсивность цвета для передачи точных значений. Используйте ее для общих паттернов; используйте положение (столбики, точки) для точного сравнения.
Исследование: Хили (1996)
Результат: Уникальный цвет «выскакивает» из фона менее чем за 200 мс, независимо от количества других элементов.
Следствие: Для выделения выбирайте цвет, который явно отличается от всего остального. Слабые различия не «выскакивают».
Исследование: Борланд и Тейлор (2007)
Результат: Радужные цветовые схемы (красный-желтый-зеленый-синий-фиолетовый) часто неправильно интерпретируются, поскольку у них нет естественного перцептивного порядка.
Следствие: Для последовательных данных используйте градиент одного оттенка. Для дивергентных данных используйте два цвета с нейтральной средней точкой.
Создание цветовой системы для данных
Шаг 1: Выберите основную палитру
Вам нужно:
- 1-2 фирменных цвета (для соответствия идентичности компании)
- 1 цвет для выделения (для акцента)
- 1 нейтральный цвет (серый, для второстепенного)
- 2-3 цвета для категорий (если они нужны)
И все. Большинству визуализаций нужно всего 4-6 цветов.
Шаг 2: Определите иерархию
Решите, что означает каждый цвет:
- Цвет выделения = самое важное, требуется действие
- Основной цвет = основная серия данных, ключевая область
- Вторичный цвет = данные для сравнения, контекст
- Нейтральный цвет = фон, менее важное
Используйте это последовательно во всех ваших визуализациях.
Шаг 3: Создайте последовательные шкалы
Для тепловых карт и данных об интенсивности:
- Выберите один оттенок
- Создайте 5-7 оттенков от светлого к темному
- Обеспечьте достаточный контраст между соседними оттенками
Инструменты, такие как ColorBrewer2, генерируют эти шкалы с учетом доступности.
Шаг 4: Протестируйте и задокументируйте
Протестируйте свою палитру с помощью:
- Инструментов симуляции дальтонизма
- Дисплеев с низкой контрастностью
- Печатных версий (если применимо)
Задокументируйте коды ваших цветов, чтобы все использовали их одинаково.
Практические рекомендации по цвету
Стоит:
- Использовать синий как цвет «по умолчанию»
- Ограничивать категориальные палитры 5-7 цветами
- Делать цвета выделения явно отличными
- Тестировать на доступность
- Быть последовательным во всех дашбордах
Не стоит:
- Использовать радужные палитры для последовательных данных
- Полагаться только на различие красного и зеленого
- Использовать несколько цветов для выделения
- Менять значение цветов в середине дашборда
- Использовать цвет как единственный способ различать категории
Цвет в разных типах графиков
Столбчатые диаграммы
Лучше: Сплошной один цвет с одним выделением
Допустимо: 2-3 цвета для сгруппированных столбцов
Избегать: Разный цвет для каждого столбца (если это не осмысленные категории)
Линейные графики
Лучше: 2-3 четко различимых цвета
Допустимо: Разные стили линий (сплошная, пунктирная) как запасной вариант
Избегать: Больше 4-5 линий разных цветов
Тепловые карты
Лучше: Последовательная шкала одного оттенка
Допустимо: Дивергентная шкала (два цвета) со смысловой средней точкой
Избегать: Радужные или высоконасыщенные схемы
Круговые диаграммы
Лучше: 2-3 цвета с четким смыслом
Допустимо: Выделение одного сегмента на фоне нейтральных
Избегать: 7+ разных цветов по кругу
Инструменты, которые помогают
Многие современные инструменты визуализации включают продуманно разработанные цветовые палитры. Инструменты на базе ИИ, такие как ChartGen, применяют исследования цвета автоматически — предлагая доступные палитры и поддерживая согласованность.
Для ручной работы я рекомендую:
- ColorBrewer2 (последовательные и дивергентные шкалы)
- Viz Palette (проверка доступности)
- Coolors (генерация палитр с оценкой доступности)
Заключительная мысль
Цвет мощный, потому что он обрабатывается до-аттентивно — до осознанного мышления. Это делает его одновременно эффективным и опасным.
Эффективность: Правильный цвет сразу «выскакивает» и направляет внимание.
Опасность: Неправильный цвет отвлекает, исключает пользователей или вводит в заблуждение.
Цель — не использовать больше всего цветов. Цель — использовать цвет настолько осознанно, чтобы зрители едва замечали его — они просто быстрее понимали данные.