Рекомендації по оптимізації планування

Застосовується до цієї Power Platform рекомендації щодо контрольного списку оптимізації добре архітектурного досвіду:

ХО:06	Підтримуйте зручні та візуально привабливі макети різних розмірів і роздільної здатності екранів. Використовуйте адаптивні методи для динамічного відображення контенту різними способами.

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

Визначення

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

Ключові стратегії дизайну

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

Визначення узгодженого фрейму додатка

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

Три основні підкомпоненти фрейму додатка:

1. Заголовок є основним компонентом, розробленим для того, щоб бути частиною будь-якої внутрішньої програми. Він складається з підкомпонентів, які надають користувачам доступ до загальносистемних функцій, допомагають орієнтуватися в інтерфейсі користувача та забезпечують узгодженість між можливостями. Він відображається у верхній частині рамки програми та має зберігатися на всіх сторінках програми. За бажанням він може містити глобальні команди, такі як пошук, налаштування, сповіщення, відгуки, профіль або довідка. Назва програми повинна завжди відображатися, а в ідеалі також повинна служити клікабельним посиланням на головну сторінку або цільову сторінку. Заголовок повинен бути адаптивним, з командами, що переміщуються в контроль переповнення в вікнах перегляду, які мають розмір 600 пікселів і нижче. Ширина пошукового входу також реагує на 1023 пікселі і нижче.

2. Навігація – це система елементів керування, які працюють разом, щоб допомогти користувачам знаходити інформацію та виконувати завдання. Це допомагає користувачам переходити з розділу в розділ програми. Ієрархічно він не прикріплений до жодної сторінки чи розділу, а існує над усім іншим контентом. Він завжди присутній і може бути згорнутий до згорнутого стану (також званого станом рейки), щоб звільнити додаткове місце для вмісту сторінки. При менших розмірах вікон його можна згорнути у випадаюче меню. Найпоширеніші форми навігації включають верхню та бічну навігацію. Не використовуйте обидва варіанти одночасно.

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

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

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

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

Вдумливо використовуйте область контенту

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

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

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

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

Підлегла сітка може бути корисною для послідовного розташування елементів. Вибрана поведінка сітки має бути однаковою для кожної області вмісту екрана в програмі, а також може застосовуватися на рівні компонентів, таких як картки або бічні панелі. Найбільш поширеним типом компонування сітки, який використовується у веб-додатках, є сітка стовпців. Плавна (або розтягнута) поведінка сітки рекомендується для реалізації адаптивних екранів.

Використовуйте встановлені макети та шаблони групування

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

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

Екран посадки/головного екрана

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

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

Приладна дошка

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

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

Форма

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

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

Подання сутності/профілю

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

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

Сторінка зі списком

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

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

Міні-огляд (розділений екран)

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

Цей макет особливо ефективний у сценаріях, коли користувачам потрібно швидко переглядати список елементів і одночасно переглядати детальну інформацію про кожен елемент, наприклад, під час виконання масових операцій. Каталоги продуктів, системи керування документами, клієнти електронної пошти або зв’язку, а також інструменти керування завданнями (наприклад, переглядач запитів Azure Dev Ops) – це сценарії, які зазвичай відповідають цьому шаблону.

Майстер

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

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

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

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

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

Адаптивна верстка повністю змінюється в залежності від формату, в якому вона представлена. Адаптивний дизайн має кілька фіксованих розмірів макета і запускає браузер для завантаження заданого макета на основі доступного простору. Веб-сайти, побудовані з адаптивним дизайном, використовують медіазапити для виявлення брейкпойнтів, аналогічно адаптивному дизайну. Також використовують додаткову розмітку, виходячи з можливостей пристрою. Цей процес відомий як «прогресивне вдосконалення».

Перемістити

Змініть розташування елементів сторінки.

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

Змінити розмір

Налаштуйте розмір і поля елементів сторінки.

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

Переформатування

Оптимізуйте потік елементів сторінки.

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

Показати/приховати

Оптимізуйте контент під розмір вікна та його орієнтацію.

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

Реархітектор

Розгалужуйте або згортайте елементи сторінки та контент, щоб зосередитися на важливій інформації та діях.

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

Створення матриці точок зупину

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

Power Platform Сприяння

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

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

Пов’язані відомості

Вільне планування

Чек-лист оптимізації досвіду

Чек-лист оптимізації досвіду