Дизайн с иконками: наглядность и эстетика в одном флаконе

На изображении представлена интересная диаграмма, которая показывает, как часто жители города используют разные виды транспорта. Вместо обычных столбцов здесь использованы элементы, напоминающие пазлы, что делает диаграмму более привлекательной и легкой для понимания. Вместо текста для обозначения видов транспорта используются картинки, что помогает быстро разобраться в данных. Акцент цветом сделан на доле автомобилей в транспорте.
БЫЛО / СТАЛО

Готовый шаблон

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

Где применяется диаграмма?

Подобная диаграмма может применяться в следующих областях:

1. Транспорт и логистика: для анализа использования различных видов транспорта.
2. Маркетинг и реклама: для анализа доли рынка различных брендов или продуктов.
3. Образование: для анализа распределения студентов по специальностям.
4. Здравоохранение: для анализа распределения пациентов по заболеваниям или медицинским учреждениям.
5. Финансы: для анализа распределения инвестиций по активам или секторам экономики.
6. Экология и устойчивое развитие: для анализа распределения источников энергии или видов транспорта с точки зрения их экологического воздействия.
7. Городское планирование: для анализа распределения населения по районам города или использования общественного транспорта.

Диаграмма помогает в планировании, анализе и принятии решений в этих областях.

ИНСТРУКЦИЯ КАК ПОСТРОИТЬ ДИАГРАММУ

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

Построение диаграммы

Вместо обычной гистограммы построим гистограмму с накоплением по трем столбцам.
Сменим порядок рядов так чтобы "по иконки" оказалась внизу, доля - посередине, а "всего" - вверху.

Вертикальная ось

Увеличим объем данных на диаграмме, установив верхнюю границу вертикальной оси на 1.
-- / --

Ширина столбцов

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

Заливка позиции иконок

Средний ряд "доля" передает основную информацию. Остальные ряды окрасим в оттенки серого. Ряд "поз иконки" выделим градиентом серого. Для первого маркера установим #DADADA.
Продолжим настройку для второго (#FEFEFE) и третьего (#DADADA) маркера градиента.

Оформление верхнего пространства

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

Оформление основного ряда

Установим основному ряду яркую градиентную заливку от цвета #6D339C.
Продолжим настройку для второго (#C29DE2) и третьего (#6D339C) маркера градиента.
Добавим тени к ряду, чтобы изображение выглядело объемным и глубоким.

Акцент на автомобилях

Точку "Легковые" окрасим контрастным градиентом в желтых оттенках от #FFB41E.
Продолжим настройку для второго (#FFDF9E) и третьего (#FFB41E) маркера градиента.

Подписи долей

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

Эффект пазла

Чтобы создать эффект пазла между нижними частями. Для этого сначала сменим диапазон значений подписей на столбец "значки" (пустой) и расположим подписи у основания.
Установим для подписей заливку рисунком или текстурой. В учебном файле есть все необходимые изображения для данной диаграммы. Первым нам понадобиться серый круг, скопируем его. Возвращаемся к подписям и вставим изображение из буфера обмена.
Преобразим рисунок в текстуру. Отредактируем параметры масштабов по осям X и Y. Далее поочередно выберем каждую подпись и настроим их размеры.
*Указанные значения масштабов и размеров примерные и вы можете их регулировать по вашему усмотрению.
-- // --

Иконки транспорта (грузовые)

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

Иконка "Легковые автомобили"

Заменим иконку второй подписи на автомобиль и также отрегулируем её размеры.
Иконка "Автобус"
Заменим иконку точки "Автобус" на соответствующую иконку и также отрегулируем её размеры.
Иконка "Мотоцикл"
Заменим иконку точки "Мотоцикл" на соответствующую иконку и также отрегулируем её размеры.
Иконка "Велосипед"
Заменим иконку точки "Велосипед" на соответствующую иконку и также отрегулируем её размеры.
Горизонтальная ось
Уберем деления по горизонтальной оси, чтобы сосредоточить внимание на основных данных

Настройка подписей

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

На основании диаграммы сделать выводы:
1. Велосипеды являются самым популярным видом транспорта, занимая 37% от общего объема.
2. Легковые автомобили занимают второе место с долей в 26%.
3. Грузовые автомобили составляют 14% от общего объема.
4. Автобусы и мотоциклы имеют меньшую долю — 8% и 15% соответственно.
Таким образом, диаграмма показывает, что велосипеды и легковые автомобили являются основными видами транспорта в городе, в то время как автобусы и мотоциклы используются реже.

Я решил сосредоточиться на значении автобусов, потому что они создают основную нагрузку на транспортную сеть.

Готовый шаблон

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

...еще 9 популярных диаграмм