Поделиться через

Рекомендации по выбору стиля визуализации данных для надстроек Office

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

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

Элементы визуализации данных

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

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

Заголовки диаграмм

Следуйте этим рекомендациям для заголовков диаграмм.

  • Сделайте заголовки диаграмм удобочитаемыми. Располагайте их с соблюдением четкой визуальной иерархии относительно остальных элементов диаграммы.

  • Как правило, следует начинать предложения с прописной буквы. Чтобы создать контраст или обозначить иерархию, можно использовать все прописные буквы, но этим не следует злоупотреблять.

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

  • Используйте шрифты sans-serif больших размеров.

Подписи осей

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

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

Точки данных

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

Цвет

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

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

Линии сетки

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

Для линий сетки лучше всего подходят светло-серые тона. Изучите следующие цветовые палитры, нейтральные для пользовательского интерфейса Fluent.

На приведенном ниже рисунке показана визуализация данных с линиями сетки.

Визуализация данных графиков с линиями сетки.

Условные обозначения

Условные обозначения необходимы для следующего:

  • Различает ряды.
  • Изменение масштаба или значения.

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

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

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

Подписи и подсказки данных

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

Принципы оформления

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

Принципы визуального оформления

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

Принципы взаимодействия

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

Дополнительные сведения о создании понятных интерактивных представлений данных см. в статье Принципы и распространенные ошибки оформления интерфейса.

Принципы динамического оформления

Движение — результат воздействия. Визуальные элементы должны двигаться в одном направлении и с одинаковой скоростью. Это относится к следующему:

  • созданию диаграмм;
  • изменению типа диаграммы;
  • фильтрам;
  • сортировке;
  • сложению и вычитанию данных;
  • объединению и сегментации данных;
  • изменению размера диаграммы;

созданию ощущения непринужденности. При создании анимации следуйте таким рекомендациям:

  • Проектируйте элементы по одному.
  • Изменяйте оси, прежде чем менять точки данных.
  • Если объекты двигаются в одном направлении и с одинаковой скоростью, обрабатывайте их как группу.
  • Собирайте элементы в группы не более чем из 4–5 объектов. Пользователям сложно отслеживать более 4–5 независимых объектов.

Движение добавляет осмысленность.

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

Движение следует за данными.

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

Специальные возможности для визуализации данных

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

См. также