Обязательное руководство по спецификации диаграмм для визуализации данных

1. Вы беспокоитесь о том, как выбирать наглядные диаграммы на работе?

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

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

Почему такая ситуация?

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

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

2. Какие спецификации дизайна диаграммы визуализации данных должны знать дизайнеры?

Сегодня я поделюсь с вами обновленным руководством Google по разработке спецификаций визуализации данных Material Design в июне 2019 г. Это руководство по спецификациям в основном применимо ко всем проектам диаграмм данных и имеет большую справочную ценность. Рекомендуется для сбора.

В основном он сводится к следующим аспектам:

1. Основные принципы визуализации данных?
2. Какие существуют типы диаграмм данных?
3. Как выбрать подходящий тип диаграммы визуализации для разных целей?
4. Стиль графиков данных?
5. Классификация использования визуализации данных на большом экране?

3. Основные принципы визуализации данных

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

Поэтому нам нужно обратить внимание на три требования при визуализации данных:

1. Точный

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

2. Полезно

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

3. Масштабируемость

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

4. Типы диаграмм данных

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

Выбор типа диаграммы в основном зависит от двух моментов:

1. данные, которые должны быть представлены
2. выражать намерение данных

1. Конкретный тип

1) График изменений во времени

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

Общие варианты использования включают: колебания цен на акции, статистику, годовые отчеты и т. д.

Источник: Сеть

2) Сравнение категорий между различными данными

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

Источник: Сеть

3) Показать диаграммы ранжирования между различными данными

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

Источник: Сеть

4) Доля различных частей данных в общих данных

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

Источник: Сеть

5) Корреляционное сравнение более чем двух данных

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

Источник: Сеть

6) Распределение между значениями

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

Источник: Сеть

7) Поток данных

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

Источник: Сеть

8) Связь данных

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

Источник: Сеть

5. Как выбрать подходящий тип диаграммы визуализации для различных целей?

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

Чтобы показать изменения с течением времени, вы можете использовать диаграммы временных рядов для представления изменений с течением времени, которые представляют собой диаграммы, представляющие точки данных в хронологическом порядке. Диаграммы, отображающие изменения с течением времени, включают линейные диаграммы, гистограммы (гистограммы) и диаграммы с областями.

* Базовое значение — это начальное значение по оси Y.

1. Столбчатые (столбчатые) и круговые диаграммы

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

• Столбчатые диаграммы (столбчатые диаграммы) используют общую базовую линию и представляют количества по длине столбцов;
• Круговые диаграммы используют дуги или углы окружности для представления частей целого.

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

Источник: Сеть

2. Диаграмма с областями

Существует несколько типов диаграмм с областями, включая диаграммы с накоплением и диаграммы с областями с накоплением:

• Диаграмма с областями с накоплением, показывающая несколько временных рядов (в пределах одного периода времени), расположенных друг над другом
• Диаграмма с областями с накоплением, показывающая несколько временных рядов (в пределах одного периода времени), наложенных друг на друга

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

Источник: Сеть

Шесть, дизайн стиля диаграммы данных

Визуализация данных использует настраиваемые стили и формы, чтобы упростить понимание данных в соответствии с потребностями пользователя.

Графики можно оптимизировать следующими способами:

• графический элемент
• Верстка
• значок
• Оси и метки
• Легенда и примечания

Стили для разных типов данных:

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

Эти графические свойства включают в себя:

• форма
• цвет
• размер
• площадь
• объем
• длина
• угол
• Место расположения
• направление
• плотность

Производительность различных свойств:

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

Источник: Сеть

Формы могут использоваться для представления качественных данных. На этой диаграмме каждая категория представлена ​​определенной формой (круги, квадраты и треугольники), что позволяет легко сравнивать определенный диапазон на одной диаграмме, а также сравнивать категории.

1. Форма

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

Точность формы: диаграммы могут отображать данные с разной степенью точности.

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

Источник: Сеть

2. Цвет

Цвета можно использовать для различения данных диаграммы четырьмя основными способами:

• Различать категории
• Укажите количество
• Выделите конкретные данные
• выражать значение

1) Цветовая классификация

Источник: Сеть

Пример. В кольцевой диаграмме цвета используются для представления категорий.

2) Цвет выделяет данные

Источник: Сеть

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

3) Ключевые области

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

4) Цвета указывают на значение

Источник: Сеть

5) Доступность

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

3. Линия

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

Линии могут быть применены к определенным элементам, в том числе:

• Примечания
• элемент предсказания
• инструмент сравнения
• надежный интервал
• аномальный

Источник: Сеть

4. Набор текста

Текст можно использовать на различных элементах диаграммы, в том числе:

• Название диаграммы
• метки данных
• метки осей
• легенда

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

Источник: Сеть

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

Источник: Сеть

5. Иконки

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

Графики можно использовать для:

• Категориальные данные: используются для различения групп или категорий;
• Элементы управления и действия пользовательского интерфейса: такие как фильтрация, масштабирование, сохранение и загрузка;
• Статус: например, Ошибка, Пустой статус, Статус завершения и Опасность.

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

Источник: Сеть

6. Координатная ось

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

1) Столбчатая диаграмма (столбчатая диаграмма) базовый уровень

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

2) Метки осей

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

3) Направление текста

Для удобства чтения текстовые метки должны располагаться на графике горизонтально.

Текстовые метки не должны:

• вращать
• вертикальный стек

Источник: Сеть

7. Легенды и примечания

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

1—Примечания, 2.—Легенды.

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

1) Этикетки и легенды

В простых диаграммах можно использовать прямые метки. В плотных диаграммах (или в составе более крупной группы диаграмм) можно использовать легенду.

Семь, классификация использования визуализации данных на большом экране

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

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

Экран больших данных должен:

• Выделите самую важную информацию (с помощью макетов)
• Сосредоточьтесь на информации на основе информационной иерархии (используя цвет, положение, размер и визуальный вес)

Информация должна располагаться по приоритетам и планироваться в соответствии с потребностью в данных. Панель мониторинга разработана в этом примере с учетом следующих вопросов пользователя:

1. Проблемы, о которых следует знать
2. время проблемы
3. где возникла проблема
4. Другие переменные, затронутые проблемой

1. Большой экран аналитических данных

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

Варианты использования включают в себя:

• Выдающиеся тенденции с течением времени
• Ответьте «Почему» и «Что, если» вопросы
• предсказывать
• Создавайте подробные отчеты

Пример большого экрана данных анализа:

• Отслеживайте эффективность ваших рекламных кампаний
• Отслеживайте продажи и доходы продукта на протяжении всего его жизненного цикла
• Тенденции городского населения с течением времени
• Отслеживайте климатические данные с течением времени

Аналитические данные отображают климатические данные на большом экране

2. Большой экран оперативных данных

Экраны оперативных данных предназначены для ответов на заданный набор вопросов.

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

Варианты использования включают в себя:

• Отслеживайте текущий прогресс в достижении целей
• Производительность системы отслеживания в реальном времени

Пример большого экрана данных операции:

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

Операционные данные индикаторы хранения устройства с большим экраном

3. Демонстрация данных на большом экране

Экраны с демонстрационными данными представляют собой презентационные представления по интересующим темам.

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

Варианты использования включают в себя:

• Предоставляет обзор ключевых показателей эффективности
• Создание высокоуровневых профилей выполнения

Пример большого экрана данных демонстрационного класса:

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