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

Большинство продуктовых дашбордов это шум. Двенадцать графиков, шесть цветовых палитр, никакой внятной иерархии, а пользователь вынужден изучать каждый график, чтобы понять, что он вообще измеряет. Команда назвала это data-driven и выкатила. Пользователь называет это запутанным и игнорирует.

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

Что такое dataviz на самом деле

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

Плохой график это график, где кодирование борется с данными. Круговая диаграмма с одиннадцатью секторами не кодирует ничего, что глаз может сравнить. 3D-столбцы кодируют данные, а потом искажают кодирование ради эффектности. Линейный график с двумя осями рассказывает две истории так, будто это одна. Каждый случай это провал дизайна, а не провал математики.

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

Почему дизайн dataviz важен в продукте

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

Dataviz и ломается иначе, чем остальной дизайн. Кнопка не того цвета уродлива. График не того типа вводит в заблуждение. Пользователь принимает решение на основе того, что, как ему кажется, показывает график, а график показал другое. Цена вводящего в заблуждение графика это неверное решение, а не просто плохая эстетика.

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

---

Выбирайте график под вопрос

Выбор графика это 80% работы с dataviz. Выберете не тот график, и никакая полировка не спасёт. Выберете правильный, и дизайн почти доделывается сам.

Пять семейств графиков, которые покрывают большую часть продуктовой работы

Большая часть продуктового dataviz живёт в пяти семействах графиков. Освойте их, и более 90% работы с дашбордами станет рутиной.

Если график на экране не подходит ни под одно из этих описаний, пользователь, скорее всего, не знает, на какой вопрос он отвечает. Либо меняйте график под вопрос, либо меняйте сам вопрос.

Когда нужно одно число

Самый недооценённый график в продуктовом дизайне это отсутствие графика. Одно крупное число с подписью и сравнением («Выручка: $124 500, плюс 12% к прошлому месяцу») сообщает больше, чем большинство дашбордов с двенадцатью графиками.

Используйте одно число, когда:

• Пользователя интересует только последнее значение, а не тренд
• Тренд подразумевается контекстом сравнения
• Места на экране мало (мобильное устройство, сайдбар, статус-бар)

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

Когда использовать small multiples

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

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

Потолок составляет примерно 16-20 small multiples на экран. Дальше глаз не может сравнить их все, и сетка превращается в обои.

---

Графики, которые почти никогда не работают в продукте

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

Круговые диаграммы больше чем с тремя секторами. Глаз не может точно сравнивать углы после трёх-четырёх секторов. Используйте stacked bar или treemap. Круговые работают для соотношений из двух частей (да/нет, вкл/выкл) и почти ни для чего больше.

3D-столбчатые диаграммы. Третье измерение искажает кодирование. Столбец спереди выглядит больше, чем есть, столбец сзади меньше. Всегда используйте 2D.

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

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

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

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

---

Цвет в dataviz

Цвет в dataviz это не украшение. Это часть кодирования. Неверный выбор цвета может превратить ясный график во вводящий в заблуждение.

Три применения цвета

Каждый цвет на графике выполняет одну из трёх задач:

Категориальный цвет различает дискретные категории без порядка. Каждый регион, каждый продукт, каждый сегмент клиентов получает свой оттенок. Используйте палитру из 6-8 различимых оттенков. После 8 глаз начинает путать похожие цвета, и кодирование ломается.

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

Расходящийся цвет показывает значения, которые идут от отрицательных к положительным вокруг осмысленной середины. Классический пример: красный, белый, синий. Середина должна быть настоящим нулём или порогом, а не визуальным удобством.

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

Разбор теории цвета для дизайнеров охватывает более общие принципы цвета. Глоссарий по цветовой палитре рассказывает, как палитры устроены.

Правила цвета, которые переживают малые размеры

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

Пять правил, которые работают:

• Используйте не больше 6 категориальных цветов на график. После шести глаз сдаётся.
• Зарезервируйте один акцентный цвет для выделения. Линия или столбец, на которые пользователь должен посмотреть первыми, получает фирменный цвет или контрастный оттенок. Всё остальное приглушено.
• Приглушайте второстепенные данные. Фоны, линии сетки, подписи осей при 40-60% непрозрачности. Основные данные при полной насыщенности. Контраст и есть иерархия.
• Тестируйте в монохроме. Переведите график в оттенки серого и проверьте, что иерархия по-прежнему читается. Если график работает только в цвете, цвет несёт слишком много.
• Тестируйте в тёмной теме. Большинство продуктовых графиков должны работать и на светлом, и на тёмном фоне. Один и тот же оттенок часто выглядит слишком насыщенным на тёмном и блёклым на светлом. Стройте парную палитру для каждого режима.

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

Дальтонизм это не ниша

Около 8% мужчин и 0,5% женщин имеют ту или иную форму нарушения цветового зрения. Большинство категориальных палитр, которые выглядят нормально для дизайнера, становятся нечитаемыми для этих пользователей.

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

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

Разбор доступного цветового контраста охватывает базовые требования к контрасту. Глоссарий по коэффициенту контраста объясняет, как контраст измеряется.

---

Иерархия на графике

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

Что выделять, что приглушать

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

Подписи и заголовки это актёры второго плана. Достаточно сильные, чтобы читаться, но недостаточно, чтобы конкурировать с данными. Обычно 50-70% визуального веса данных.

Линии сетки, оси и засечки это сцена. Видны, только когда пользователь их ищет. Обычно 20-40% визуального веса подписей.

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

Прямые подписи лучше легенд

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

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

Исключение: когда серий слишком много и прямые подписи не помещаются. Тогда используйте интерактивную легенду. Наведение или тап на элемент легенды подсвечивает эту серию на графике и приглушает остальные.

---

Правило трёх секунд

Каждый график в продукте должен отвечать на свой вопрос за три секунды. Если пользователю приходится изучать график, дизайн провалился.

Как проверить правило трёх секунд

Покажите график человеку, который не видел дашборд. Спросите: «Что вам говорит этот график?» Засеките время ответа.

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

• Тип графика не соответствует вопросу
• Иерархия перевёрнута (сетка громче данных)
• Легенда заставляет глаз метаться
• Цветовое кодирование неясно
• На графике слишком много серий

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

Когда правило трёх секунд не применяется

Инструменты исследовательской аналитики (BI-инструменты, блокноты для data science) устроены иначе. Пользователь не пробегает глазами, он исследует. Ему нужна каждая переменная, каждое измерение, каждый фильтр. Три секунды превращаются в три минуты, и это нормально.

Ошибка в том, чтобы строить продуктовый дашборд с дисциплиной BI-инструмента. Пользователь продукта не исследует. Он проверяет. Бюджет это три секунды.

---

Интерактивность в dataviz

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

Дизайн тултипов

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

Лучшие решения по умолчанию:

• Один тултип на серию, а не на все серии. Наведите на нужную линию и увидите значение этой линии. Наведение на фон графика ничего не показывает.
• Тултипы содержат единицу измерения. «$1 240», а не «1240».
• Тултипы показывают контекст сравнения, где это полезно. «$1 240 (+8% к прошлой неделе)» превращает тултип в историю.
• Тултипы никогда не закрывают данные. Располагайте над или под курсором в зависимости от близости к краю графика.

Фильтрация и brushing

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

Риск в переусложнении. График, которому нужно пять взаимодействий, чтобы быть полезным, это график, который стоит разбить на несколько более простых. Каждое взаимодействие это когнитивная цена.

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

---

Провалы dataviz, на которые стоит смотреть

Каждый аудит дашбордов ловит одни и те же провалы. Если продукт выходит с любым из них, слой dataviz подрывает остальной продукт.

Обрезанные оси y, которые преувеличивают изменение. Столбчатая диаграмма с осью y, начинающейся с 95 вместо нуля, превращает изменение в 2% в визуальный обрыв. Используйте оси с полным диапазоном, если нет явной причины иначе, и явно помечайте любую обрезку.

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

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

Графики, которые грузятся дольше остальной страницы. Дашборд, который рисует раскладку за 200 мс, а графики за 2 секунды, ощущается сломанным. Стройте skeleton-состояния для каждого графика. Лениво грузите графики ниже сгиба. Стримьте данные, а не ждите полной загрузки.

Графики, которые игнорируют бренд. Дашборд с цветами библиотеки графиков по умолчанию выглядит как шаблон. Палитра графиков должна выводиться из цветовой системы бренда с поправками на доступность и читаемость на малых размерах. Никогда не выпускайте в продакшен дашборд с палитрой Chart.js или Recharts по умолчанию.

Разбор фирменной цветовой палитры охватывает более широкую дисциплину фирменного цвета. Палитры для dataviz выводятся, а не изобретаются.

---

Dataviz в условиях 2026 года

Три сдвига изменили то, как проектируют dataviz. Работе приходится адаптироваться.

AI генерирует графики за секунды. Инструменты вроде ChatGPT и Claude могут сгенерировать график из сырых данных одним промптом. Риск в том, что дизайнеры перестают думать о выборе графика, потому что его выбирает AI. AI почти всегда выбирает универсальный тип графика, который не соответствует реальному вопросу. Используйте AI для первых черновиков, а затем переделывайте исходя из вопроса, который задаёт пользователь.

Данные в реальном времени стали нормой. Дашборды теперь стримят живые данные вместо обновления раз в 60 секунд. Следствие для дизайна: движение тоже требует дизайна. Живые графики, которые мерцают при каждом обновлении, непригодны. Базовый минимум это плавная интерполяция между точками данных и чёткий индикатор «live».

Мобильные дашборды обычное дело. Дашборд, спроектированный только под десктоп, теряет большую часть выходного и дорожного использования. Графики на мобильном требуют других решений: часто более простые типы графиков, меньше серий, высокие раскладки с прокруткой вместо сеток, которые сжимаются.

Разбор адаптивного дизайна охватывает более широкую дисциплину адаптивности. Dataviz один из самых сложных слоёв для настоящей адаптивности.

---

FAQ

Какой тип графика использовать?

Подбирайте график под вопрос пользователя. Сравнение значений по категориям: столбчатая диаграмма. Изменение во времени: линейный график. Части целого: stacked bar или treemap (почти никогда не круговая). Связь двух переменных: диаграмма рассеяния. Распределение: гистограмма или box plot. Если график на экране не подходит ни под один из этих случаев, пользователь не знает, на какой вопрос он отвечает.

Когда избегать круговых диаграмм?

Почти всегда. Круговые работают для двух-трёх секторов, где соотношение и есть вся история (да/нет, вкл/выкл, простые бинарные разбиения). После трёх секторов глаз не может точно сравнивать углы, и график становится украшением. Используйте горизонтальный stacked bar или treemap.

Сколько цветов должен использовать график?

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

Как сделать графики доступными?

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

Что такое правило трёх секунд для графиков?

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

Использовать библиотеку графиков или писать своё?

Используйте библиотеку для первых черновиков и прототипов. Большинству продакшен-графиков в интерфейсах полезны собственные слои поверх библиотеки, исправляющие дефолты: приглушённая сетка, прямые подписи, фирменные палитры, кастомные тултипы. Полностью кастомный dataviz на D3 или canvas оправдан, только когда тип графика настолько необычен, что ни одна библиотека его не поддерживает.

Dataviz это дизайн, а не украшение

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

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

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

Если вам нужна команда, которая строит системы dataviz вместе с остальным интерфейсом продукта, наймите Brainy. Графики как полноценная часть дизайн-системы в каждом проекте.

Читайте также

• Дизайн визуальной иерархии
• Теория цвета для дизайнеров
• Дизайн тёмной темы
• Доступный цветовой контраст