Советы по навигации в LuckyTemplates

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

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

Оглавление

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

Четыре типа навигации LuckyTemplates

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

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

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

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

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

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

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

Эффективное размещение навигации

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

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

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

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

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

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

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

Сделайте активную кнопку самой заметной частью панели навигации.

Это будет зависеть от цвета фона, отображаемого за кнопкой.

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

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

Здесь важен цвет шрифта, и он должен быть достаточно светлым, чтобы создать впечатление, что вы еще не активны. Но в то же время он должен создавать впечатление кликабельности.

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

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

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

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

3 обходных пути для дополнительной навигации

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

И, наконец, если вы хотите вернуться на домашнюю страницу, вы можете сделать это, нажав кнопку домашней страницы.

Сворачивающийся и расширяющийся эффект

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

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

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

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

Использование пользовательских визуалов

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

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

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

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

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

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

Заключение

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

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

Всего наилучшего,
Густав Дудек.