В сегодняшней статье мы поговорим об адаптивном дизайне дашбордов. Адаптивным называется дизайн, в котором элементы дашборда могут изменять свое расположение и внешний вид в зависимости от устройства, на котором открывается отчет. Иными словами, при просмотре дашборда на мобильном устройстве компоненты могут располагаться по-другому, иметь другой размер или вовсе отсутствовать по сравнению с просмотром дашборда на экране компьютера, ноутбука или проектора.
Зачем нужен адаптивный дизайн
По умолчанию дашборд растягивается на всю область просмотра, а его элементы при этом пропорционально масштабируются. Это работает как при увеличении размера экрана, так и при уменьшении. Однако дашборд, созданный на компьютере, может выглядеть крайне неудобно на мобильном устройстве: элементы становятся мелкими и трудночитаемыми, а, например, диаграммы – сжатыми до неузнаваемости. Это снижает информативность и может привести к неверной интерпретации данных.
Именно поэтому адаптивный (или «мобильный») режим необходим – он позволяет сделать дашборд удобным, понятным и читабельным на разных устройствах. Обратите внимание!
Адаптивный режим работает только в том случае, если параметр "Выровнять содержимое" (Content Alignment) установлен в режим "Растянуть по X" (Stretch X) или "Растянуть по XY" (Stretch XY). При значениях "Центр" (Center), "Слева" (Left) или "Справа" (Right) адаптивность не применяется, так как содержимое не масштабируется и отображается в фиксированных размерах, как в режиме дизайна.
Именно поэтому адаптивный (или «мобильный») режим необходим – он позволяет сделать дашборд удобным, понятным и читабельным на разных устройствах. Обратите внимание!
Адаптивный режим работает только в том случае, если параметр "Выровнять содержимое" (Content Alignment) установлен в режим "Растянуть по X" (Stretch X) или "Растянуть по XY" (Stretch XY). При значениях "Центр" (Center), "Слева" (Left) или "Справа" (Right) адаптивность не применяется, так как содержимое не масштабируется и отображается в фиксированных размерах, как в режиме дизайна.
Как добавить мобильную версию дашборда
- Откройте существующий дашборд или создайте новый в дизайнере отчетов.
- Перейдите на вкладку "Страница" (Page) и активируйте мобильный режим: нажмите соответствующую кнопку.
- Отобразится мобильная версия дашборда, а в меню "Компоненты" (Components) вы увидите все элементы из настольной версии.
Перед настройкой важно понимать, что можно и что нельзя менять в мобильной версии:
Можно:
- Изменять размер мобильного дашборда;
- Добавлять только нужные элементы;
- Изменять размеры и порядок элементов;
- Включать/отключать заголовки элементов.
Нельзя:
- Изменять настройки элемента (например, поле данных или тип визуализации), так как эти изменения повлияют и на настольную версию;
- Изменять стиль элемента — стили также применятся ко всем версиям.
Создание мобильной версии заключается в перетаскивании нужных элементов на мобильный дашборд, изменении их размеров и порядка элементов на дашборде.
Как работает адаптивность?
После настройки и сохранения мобильной версии возникает вопрос: когда она будет отображаться?Ответ прост: это регулируется свойством "Ширина устройства" (Device width), доступным только в мобильном режиме.
- Если ширина экрана меньше или равна значению этого свойства – отображается мобильная версия.
- Если больше – показывается настольная.
Значение свойства Ширина устройства указывается в пикселях. Таким образом, вы можете адаптировать отображение дашборда под конкретные типы устройств, будь то смартфон или планшет.
Несколько мобильных версий дашборда
Иногда нужно создать разные мобильные версии: одну для телефона, другую – для планшета. Поскольку один дашборд может иметь только одну мобильную и одну настольную версию, то лучшим решением будет использовать несколько дашбордов в одном шаблоне.
Пример:
Пример:
- Есть дашборд с мобильной версией для телефона, где ширина устройства установлена в 520 px.
- Сделаем его копию. Для этого воспользуемся командой "Копия" (Duplicate) в контекстном меню на заголовке дашборда в дизайнере отчетов.
- В копии определим ширину устройства для мобильной версии как 800 px. При необходимости, можно изменить порядок и перечень элементов.
Теперь в шаблоне два дашборда, каждый со своей мобильной версией. Во вьювере они будут отображаться на отдельных вкладках. Пользователь может выбрать нужную, в зависимости от устройства.
Вот, в принципе, и все, что необходимо знать об адаптивном дизайне при разработке дашбордов. Адаптивный дизайн делает дашборды действительно универсальными и удобными для пользователей на любых устройствах. Он позволяет сохранить читаемость и информативность, независимо от размера экрана.
Для более наглядного объяснения создания адаптивного дизайна дашбордов мы подготовили несколько тематических видео.