Методи дизайну макета приладової панелі

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

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

По-перше, дозвольте мені дати вам загальне уявлення про те, що обговорюватиметься під час цієї серії прозорості звітів.

Коли я думаю про загальний дизайн звіту та прозорість звіту, я намагаюся розділити його на чотири відповідні стовпи: дизайн макета , навігація , формули DAX та інші функції .

Дизайн макета включає такі аспекти, як вибір відповідного розміру або роздільної здатності звіту, застосування додаткових фонів або шаблонів і формування структури звіту шляхом відокремлення різних областей, таких як розділ KPI, основні візуальні елементи та панелі фільтрів навігації.

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

Тоді маємоякі допомагають розробникам BI створювати прозорі та змістовні звіти. Існує багато методів DAX, які можуть допомогти нам заощадити багато місця, виділити певні елементи певних візуальних елементів і ввести динамічну інформацію.

І останнє, але не менш важливе: ми також маємо інші функції , які можуть вивести дизайн звіту на наступний рівень, наприклад спеціальні підказки.

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

Зміст

• Дизайн макета приладової панелі
• Налаштувати роздільну здатність сторінки звіту
• Два підходи до проектування заздалегідь запланованих макетів
• Створення структури звіту шляхом додавання фігур
• Як структурувати сторінки звіту в дизайні макета інформаційної панелі
• Висновок

Дизайн макета приладової панелі

Перший важливий елемент, який слід враховувати, це розмір сторінки або роздільна здатність . Стандартна роздільна здатність сторінки за умовчанням встановлена ​​на 1280 на 720, що становить 16:9 щодо ширини та висоти звіту.

Ця роздільна здатність чудово працює в багатьох сценаріях, але особисто я вважаю корисним збільшити роздільну здатність до будь-якої точки в діапазоні від розміру роздільної здатності за замовчуванням до приблизно 1900 x 1100, зберігаючи при цьому співвідношення на тому самому рівні 16:9.

З моєї точки зору, це кінцеве значення є оптимальним для створення звітів, які призначені для читання та аналізу на екранах ноутбуків або ПК. Основною перевагою вищої роздільної здатності є збільшення простору для візуальних і додаткових елементів.

Однак підвищення роздільної здатності до надто високих рівнів може призвести до зниження читабельності звіту. Ось чому я рекомендую цю роздільну здатність, але пам’ятайте, що звіти, які відображаються на розмірах телефонів, мають бути налаштовані як мінімум на 11–12 пікселів.

Ще одна важлива міркування полягає в тому, щоб роздільна здатність сторінки була однаковою на кожній сторінці, якщо контекст звіту не потребує різноманітності.

Налаштувати роздільну здатність сторінки звіту

Тепер давайте зануримося в файл PBX. Я покажу вам, як легко налаштувати роздільну здатність сторінки звіту. Спочатку створіть нову сторінку, перейдіть на панель візуалізації, виберіть «Формат сторінки» , а потім «Налаштування полотна» . Зі спадного списку ви можете вибрати бажаний формат від співвідношення 16:9 до спеціального.

Після того як ми визначили роздільну здатність сторінки, ми можемо створити та розробити фони або шаблони для нашого звіту LuckyTemplates.

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

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

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

Два підходи до проектування заздалегідь запланованих макетів

Розробляючи заздалегідь заплановані макети, я використовую два підходи за допомогою Microsoft PowerPoint. Перший підхід полягає в тому, щоб побудувати макет із фіксованою структурою та одразу включити всі об’єкти та форми.

Другий підхід, який є моїм улюбленим, полягає в створенні структурних шарів, одночасно зберігаючи міцність стін простору.

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

Розмір візуалів дуже різниться і залежатиме від багатьох речей, як-от кількість категорій, які ми хочемо відобразити на даному візуалі.

Краще мати гнучкий підхід замість того, щоб створювати багато схожих макетів, переходити туди-сюди від файлу АТС до графічної програми та налаштовувати кожну сторінку макета.

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

Створення структури звіту шляхом додавання фігур

Давайте заглибимося в файл PBX і додамо додаткові фігури до нашого макета звіту, який ми пізніше заповнимо візуалізаціями. Ми можемо перейти до «Вставити фігури» , створити пару прямокутників темніших кольорів, ніж фактичний макет сторінки, і вимкнути рамки. Потім ми скопіюємо та вставимо їх у різні місця.

Тепер ми готові реалізувати деякі візуалізації. Для цього прикладу ми маємо легший макет на іншій сторінці. Ми додамо прямокутники з білою заливкою та сірими рамками. Таким чином, ми можемо легко змінити структуру, додавши додаткові широкі форми, такі як прямокутники.

Як структурувати сторінки звіту в дизайні макета інформаційної панелі

Структурування сторінки звіту залежить від типу звіту та кінцевих користувачів.

Моє загальне емпіричне правило полягає в тому, щоб розміщувати розділи KPI у верхній центральній частині або лівій верхній частині. Візуальні елементи, які забезпечують найефективнішу інформацію, розміщуються у верхньому лівому куті, тоді як права сторона використовується для логотипу компанії, назв, навігаційних панелей і роздільників.

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

Висновок

У цій публікації ми обговорили, як оптимізувати дизайн макета інформаційної панелі. Коли справа доходить до аспекту дизайну, мати чіткий, лаконічний макет із збалансованим поєднанням візуальних елементів – це шлях вперед.

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

Всього найкращого,
Густав Дудек