Панель мониторинга в LuckyTemplates: лучшие практики проектирования

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

Оглавление

• Определение цветов для панели мониторинга в LuckyTemplates
• Организация визуальных элементов на панелях мониторинга LuckyTemplates
• Выбор правильных визуализаций для панели мониторинга в LuckyTemplates 
• Добавление всплывающих подсказок для панели мониторинга в LuckyTemplates
• Создание пользовательских всплывающих подсказок
• Добавление страницы детализации для панели мониторинга в LuckyTemplates
• Добавление дополнительной информации для вашей визуализации
• Использование минимального количества слайсеров
• Заключение

Определение цветов для панели мониторинга в LuckyTemplates

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

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

Если вы используете в своем отчете различные цветовые сочетания, это будет выглядеть как детская работа в книжке-раскраске. Иногда история, которую вы хотите рассказать, смешивается со всеми цветами. Поэтому очень важно использовать в отчете максимум 2-4 цвета. 

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

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

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

Вот еще один пример, в котором я явно определил 2018 год желтым цветом, 2019 — серым цветом и 2020 — красным цветом на странице отчета. 

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

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

Затем я использовал красный или розоватый цвет для определения данных простоя .

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

И именно так вы можете определить цвета в своем отчете.

Организация визуальных элементов на панелях мониторинга LuckyTemplates

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

Например, в этой части моего отчета представлена ​​общая тенденция количества проведенных опросов.

С другой стороны, это индивидуальная тенденция для категории продуктов .

Как видите, отдельная тенденция взаимодействует со всеми визуальными элементами на этой странице отчета. 

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

В этом разделе представлены 3 основных материала: сырье , гофрокартон и пленка .

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

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

Выбор правильных визуализаций для панели мониторинга в LuckyTemplates 

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

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

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

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

Добавление всплывающих подсказок для панели мониторинга в LuckyTemplates

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

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

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

Вы также можете изменить цвет всплывающей подсказки. Для этого перейдите в раздел «Подсказка» на панели «Формат» . Здесь вы можете изменить фон, метку и цвет значения всплывающей подсказки.

Создание пользовательских всплывающих подсказок

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

Вы можете сделать это, создав отдельную страницу. На отдельной странице перейдите на панель «Формат» и включите параметр «Подсказка» в разделе «Информация о странице » . 

Затем, чтобы сделать размер похожим на всплывающую подсказку, выберите «Подсказка» для параметра «Тип» в разделе « Размер страницы ».

После этого перейдите на вкладку «Вид» и выберите параметр «Фактический размер» в разделе « Просмотр страницы» , чтобы выбрать представление всплывающей подсказки.

По умолчанию размер всплывающей подсказки небольшой.

Чтобы настроить это, просто снова перейдите к размеру страницы и выберите тип «Пользовательский» . 

Затем вы можете увеличить ширину и высоту всплывающей подсказки.

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

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

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

Добавление страницы детализации для панели мониторинга в LuckyTemplates

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

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

Вы также можете щелкнуть правой кнопкой мыши данные и выбрать Детализация . 

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

Настроить страницу детализации несложно. Просто перейдите на вкладку «Вставка» и нажмите кнопку «Пустой» . 

Затем определите его в поле «Текст кнопки» на панели «Визуализации» . 

После этого включите параметр «Действие» , установите для параметра «Тип» значение «Детализация » и установите « Назначение» .

Если вы еще ничего не выбрали, кнопка будет выглядеть так.

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

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

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

Добавление дополнительной информации для вашей визуализации

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

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

Я также добавил этот информационный значок в свой отчет здесь. 

Использование минимального количества слайсеров

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

Например, в этом отчете я поместил только один слайсер.

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

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

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

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

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

Воссоздание визуализации на панели мониторинга LuckyTemplates
Дизайн панели мониторинга LuckyTemplates — впечатляющая идея визуализации с перелистыванием страниц
Учебное пособие по панели мониторинга LuckyTemplates — как улучшить дизайн панели мониторинга
 

Заключение

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

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

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

Ваше здоровье!

Мудассир