Представляємо Flow Mode у Qt Design Studio 1.5 - Частина 1

UX, Design, Qt, UI, Designer

У версії 1.5 Qt Design Studio можна спробувати функціонал flow mode . У першій частині статті, що складається з кількох частин, буде розказано про базове використання flow mode та про те, як розпочати роботу. Наприкінці статті розглянемо заплановані розширені функції, які з'являться у версії Qt Design Studio.

Що таке Flow Mode?

Потік (flow) може бути описаний, як схематичне представлення екранів у вашому додатку, чимось схоже на вузол графа, що використовується для візуального програмування, хоча спеціально реалізоване завдання створення потоків користувальницького інтерфейсу. Сама блок-схема показує кожен екран та його зв'язок з іншими екранами, а також можливі шляхи користувача через програму. Традиційно дизайнери створювали ці плати як макет для представлення концепцій потоку програми. З появою таких інструментів, як Sketch, з'явилася можливість запуску створених дизайнером блок-схем у вигляді інтерактивного прототипу, яким можна переходити, щоб імітувати користувальницький досвід програми. Проте фактична логіка для цього потоку все одно має бути наново реалізована розробниками.

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

Створення потоку в Qt Design Studio. Основи.

Налаштування вашого першого потоку (Flow)

Ви можете створити потік або в існуючому проекті або в новому проекті. Щоб почати використовувати режим потоку, вам потрібно бути в проекті, а потім додати наступні елементи через меню "Файл" / "Новий файл" (file menu/New File) або "Майстер проектів" (Project Wizard).

Створити Flow View

Перший файл, який потрібно, це новий тип QML з ім'ям Flow View. Це полотно, з яким ви будете поєднувати всі екрани вашого інтерфейсу. Цей файл можна додати за допомогою майстрів (wizards) після створення проекту, а потім перейти до додавання нового файлу, нові QML Types, що використовуються в потоках, можна знайти в розділі Qt Quick Files.

Створити Flow Items (елементи потоку)

Далі вам потрібен новий тип екрану, який може використовуватися flow mode – Flow Item. Ви також можете їх створити за допомогою майстрів (wizards). Ці файли є типом файлу UI.QML, який можна вставити у файл Flow View.

Створення вмісту екрана (Screen content)

Додавання вмісту до Flow Items працює так само, як і при проектуванні будь-якого звичайного екрана Qt Design Studio, оскільки ці файли Flow Item є просто типом файлу UI. Файл QML, значить ви можете використовувати їх так само, як і звичайний файл інтерфейсу користувача. Вони можуть містити підкомпоненти, швидкі елементи управління, анімацію і все інше, що ви можете додати у звичайний файл інтерфейсу користувача (UI file). Єдина реальна відмінність полягає в тому, що ці файли можна побачити у Flow View, тому при перегляді бібліотеки QML ці спеціальні компоненти є єдиними елементами на панелі «Мої компоненти QML» (My QML Components).

Додавання ваших файлів у flow view (подання потоку)

Перетягніть Flow Item з бібліотеки до Flow View, після чого у вас з'явиться перший екран у потоці, зрозуміло, вам потрібно як мінімум два екрани, щоб змусити працювати потік, тому після того, як у вас з'явиться другий екран, ви можете почати використовувати Flow View правильно.

Додавання action areas (областей дії)

Action areas (області дії) можуть працювати кількома способами. По-перше, це діяти як проста інтерактивна область, яка ініціює перехід – це найпростіший спосіб використання flow editor (редактора потоків) для створення прототипів. Інше використання областей дії - це те, що можна підключити будь-який сигнал від будь-якого компонента на вашому екрані потоку або від будь-якого його підкомпонента, наприклад, кнопку на вашому екрані, яка має сигнал onPressed. У цій першій частині блогу буде розглянуто простий варіант використання, а потім у другій частині вже складніший варіант використання.

Підключення екранів (Connecting Screens)

Якщо у вас є Action Area (область дії), ви можете використовувати її для підключення до іншого екрану, або двічі клацнувши Action Area, а потім перетягнувши лінію підключення на інший екран і відпустивши її, або за допомогою контекстного меню для Flow View, де всі відповідні елементи керування можна знайти. Після того, як ви з'єднали екрани разом, у вас є перший потік, тепер ви можете запустити Live Preview і натиснути кнопку, що покриває Action Area, яка не буде видно в Live Preview, щоб побачити корисний попередній перегляд першого переходу.

Додавання ефектів (Adding Effects)

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

Редагування Ефектів (Editing Effects)

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

Повернення (Go Back)

Однією з особливостей функціоналу flow mode Qt Design Studio є додавання кнопки «Назад» (back button). У багатьох випадках в потоці буде багато взаємозв'язків з вашими екранами, традиційно вам доведеться створювати явні лінії зв'язку «к» і «с» кожного потенційно підключеного екрану, що призводить до заплутаної і брудної діаграми. З Qt Design Studio ви можете просто встановити дію як "Повернення" ("Go Back"), і вона завжди поверне вас до попереднього екрану.

Попередній перегляд у Live Preview

Як і на всіх екранах Qt Design Studio, ви можете переглядати свої зміни в реальному часі за допомогою Live Preview, просто запустіть попередній перегляд і продовжуйте роботу над потоком, ваші зміни будуть оновлюватися в реальному часі, і ви можете протестувати їх безпосередньо у вікні Live Preview.

Зовнішній вигляд (Appearance)

Властивості Flow View дозволяють налаштувати зовнішній вигляд всіх елементів у потоці, ліній підключення, Action Areas (область дії) та додаткових вузлів, таких як "Рішення" (Decisions) та "Підстановочні знаки" (Wildcards). Ви можете змінити загальні налаштування для всіх елементів або вибрати окрему лінію, вузол або action area та змінити зовнішній вигляд тільки цього елемента (включаючи колір, товщину лінії, пунктирні або суцільні лінії і навіть криву з'єднань), дозволяючи вам додати додаткову семантику до дизайну самої блок. -схеми.

Рішення (Decisions)

Частиною будь-якого складного інтерфейсу користувача є умовна логіка, яку він використовує для представлення свого стану користувачам або для збору та обробки різних джерел даних, взаємодії з користувачем з різних входів, таких як фізичні кнопки та елементи управління, показання датчиків з масивів обладнання або загальні значення з підтримуваних/сервісних API. За допомогою Decision Nodes (вузлів прийняття рішень) ви можете змоделювати будь-яку з цих умов, надавши користувачеві список опцій, що дозволяє створювати прототипи складних взаємодій до того, як у вас будуть якісь виробничі необхідні фізичні елементи управління, дані бекенда або сенсора. У майбутньому ви зможете пов'язати ці рішення з фактичними значеннями, що підтримуються, або списками подій, перенісши ваші зусилля зі створення прототипів у ранні стани реального виробничого коду.

Підходячи до частини 2

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

Знаки підстановки

Розробники помітили, що іншою поширеною функціональністю реальних інтерфейсів, яка не була добре оброблена в традиційних інструментах проектування потоків, були екрани, які можуть з'являтися з будь-якого місця або в будь-який час на основі умовної події. Візьміть, наприклад, push-сповіщення на смартфонах або на екранах вхідних дзвінків у HMI вашого автомобіля. За допомогою Wildcards ви можете моделювати екрани цього типу у своєму потоці, використовуючи реальні або змодельовані сигнали та умови, що дозволяє вивести концепції потоку за межі цього традиційного бар'єру. Інший варіант використання, який розробники планували, полягав у включенні білого та чорного списків цих подстановочных подій. Щоб продовжити з одного з наших прикладів тут, з вхідним викликом HMI нашого автомобіля, скажімо, у нас є екран попередження для двигуна десь у нашому потоці, який також використовує знак підстановки і може з'явитися на будь-якому екрані в будь-який час, якщо він отримав сигнал. Тепер додамо цей екран попередження двигуна до чорного списку екрана вхідних викликів. Це означає, що тепер екран вхідного дзвінка може з'являтися на будь-якому екрані, крім екрана попередження двигуна.

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

Підключення сигналів від компонентів

Прості інтерактивні області відмінно підходять для створення прототипів, але що робити, коли хочеться використовувати реальні сигнали з екранів інтерфейсу користувача для управління потоком програми? У наступній частині цього блогу буде розглянуто, як використовувати область дії (action areas) потоку для прослуховування сигналів від компонентів екранів потоків і підключення їх до дизайну потоків.

Інтегруючі стани (Integrating States)

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