Einführung in den Flow-Modus in Qt Design Studio 1.5 - Teil 1

UX, Design, Qt, UI, Designer

In Version 1.5 von Qt Design Studio können Sie die Funktion Flussmodus ausprobieren. Der erste Teil dieses mehrteiligen Artikels behandelt die grundlegende Verwendung des Flow-Modus und die ersten Schritte. Am Ende des Artikels werden wir uns die geplanten erweiterten Funktionen ansehen, die in der nächsten Version von Qt Design Studio erscheinen werden.

Was ist der Flow-Modus?

Ein Flow kann als schematische Darstellung der Bildschirme in Ihrer Anwendung beschrieben werden, ähnlich dem Diagrammknoten, der für die visuelle Programmierung verwendet wird, obwohl er speziell für die Aufgabe der Erstellung von Benutzeroberflächenflows implementiert wurde. Das Flussdiagramm selbst zeigt jeden Bildschirm und seine Beziehung zu anderen Bildschirmen sowie mögliche Benutzerpfade durch die Anwendung. Traditionell haben Designer diese Boards als Modell erstellt, um die Flusskonzepte einer Anwendung darzustellen. Mit dem Aufkommen von Tools wie Sketch ist es möglich, von einem Designer erstellte Flussdiagramme als interaktiven Prototypen auszuführen, die navigiert werden können, um die Benutzererfahrung einer Anwendung nachzuahmen. Die eigentliche Logik für diesen Thread muss jedoch noch von den Entwicklern neu implementiert werden.

Flows in Design Studio bieten eine umfassendere Lösung für das Problem. Sie ermöglichen es dem Designer, schnell einen Prototyp einer vollständigen Anwendung zu erstellen, indem der Fluss in einem vertrauten visuellen Programmierstil basierend auf Nodegraph-artigem modelliert wird. Der QML-Code wird im Hintergrund generiert, sodass der Entwickler die Funktionalität seines Ablaufs über die Grenzen herkömmlicherer Designtools hinaus erweitern kann. Die Endergebnisse sind sowohl ein High-Fidelity-Prototyp als auch Entwickler von funktionalem Code, der als Grundlage für eine Produktionsversion der Anwendung verwendet werden kann.

Erstellen eines Threads in Qt Design Studio. Grundlagen.

Einrichten Ihres ersten Flows (Flow)

Sie können einen Thread entweder in einem bestehenden Projekt oder in einem neuen Projekt erstellen. Um den Stream-Modus verwenden zu können, müssen Sie sich in einem Projekt befinden und dann die folgenden Elemente über das Menü „Datei“/Neue Datei oder den Projektassistenten hinzufügen.

Flow-Ansicht erstellen

Die erste Datei, die Sie benötigen, ist ein neuer QML-Typ namens Flow View. Dies ist die Leinwand, mit der Sie alle Bildschirme Ihrer Benutzeroberfläche verbinden. Diese Datei kann mit den Assistenten (Wizards) nach dem Erstellen des Projekts hinzugefügt werden und dann mit dem Hinzufügen einer neuen Datei fortfahren. Neue QML-Typen, die in Streams verwendet werden, finden Sie im Abschnitt Qt Quick Files.

Flow-Elemente erstellen

Als Nächstes benötigen Sie einen neuen Bildschirmtyp, der vom Flow-Modus verwendet werden kann – Flow Item. Sie können sie auch mithilfe von Assistenten erstellen. Diese Dateien sind eine Art UI.QML-Datei, die in eine Flow View-Datei eingefügt werden kann.

Erstellen von Bildschirminhalten

Das Hinzufügen von Inhalten zu Flow-Elementen funktioniert genauso wie das Entwerfen eines normalen Bildschirms in Qt Design Studio, da diese Flow-Element-Dateien nur eine Art UI-Datei sind. QML-Datei, sodass Sie sie wie eine normale Benutzeroberflächendatei verwenden können. Sie können Unterkomponenten, Schnellsteuerungen, Animationen und alles andere enthalten, was Sie einer normalen UI-Datei hinzufügen können. Der einzige wirkliche Unterschied besteht darin, dass diese Dateien in der Flow-Ansicht angezeigt werden können. Wenn Sie also eine QML-Bibliothek anzeigen, sind diese speziellen Komponenten die einzigen Elemente, die im Bereich „Meine QML-Komponenten“ angezeigt werden.

Hinzufügen Ihrer Dateien zur Flow-Ansicht (Flow-Ansicht)

Ziehen Sie ein Flow-Element aus der Bibliothek in die Flow-Ansicht und Sie haben den ersten Bildschirm im Flow. Natürlich benötigen Sie mindestens zwei Bildschirme, damit der Flow funktioniert, sodass Sie nach dem zweiten Bildschirm mit der Verwendung der Flow-Ansicht beginnen können Rechts.

Aktionsbereiche hinzufügen

Aktionsbereiche können auf verschiedene Weise funktionieren. Die erste besteht darin, als einfacher anklickbarer Bereich zu fungieren, der einen Übergang einleitet – dies ist die einfachste Möglichkeit, den Flow-Editor für das Prototyping zu verwenden. Eine weitere Verwendung von Bereichen besteht darin, dass Sie jedes Signal von jeder Komponente auf Ihrem Flow-Bildschirm oder von einer seiner Unterkomponenten anschließen können, z. B. eine Schaltfläche auf Ihrem Bildschirm, die ein onPressed-Signal hat. Dieser erste Teil des Blogs befasst sich mit einem einfachen Anwendungsfall, gefolgt von einem komplexeren Anwendungsfall in Teil zwei.

Bildschirme verbinden

Wenn Sie einen Aktionsbereich haben, können Sie ihn verwenden, um eine Verbindung zu einem anderen Bildschirm herzustellen, indem Sie entweder auf den Aktionsbereich doppelklicken und dann die Verbindungslinie auf den anderen Bildschirm ziehen und loslassen, oder indem Sie das Kontextmenü für die Flussansicht verwenden, wo alle finden Sie die entsprechenden Steuerelemente. Sobald Sie die Bildschirme miteinander verbunden haben, haben Sie Ihren ersten Stream. Sie können jetzt die Live-Vorschau starten und auf die Schaltfläche klicken, die den Aktionsbereich abdeckt, der in der Live-Vorschau nicht sichtbar ist, um eine nützliche Vorschau des ersten Übergangs zu sehen .

Hinzufügen von Effekten

Sobald Sie einen Übergang haben, können Sie ihm einen Effekt hinzufügen. Sie tun dies, indem Sie den Übergang direkt auswählen, zum Kontextmenü zurückkehren und den Effekt für diesen Übergang (Übergang) auswählen. Nachdem Sie den Effekt angewendet haben, können Sie ihn über das Eigenschaftsfenster bearbeiten. Für viele Effekte gibt es eine Übergangsrichtung, die die Richtung bestimmt, aus der der neue Bildschirm angezeigt wird. Sie können die Dauer des Effekts festlegen und den Curve Builder ausführen, um Ihre eigene Easing-Kurve auf diesen Effekt anzuwenden.

Effekte bearbeiten

Um zurückzugehen und einen zuvor angewendeten Effekt zu bearbeiten, können Sie den Übergang auswählen, zum Kontextmenü gehen und den Effekt auswählen, wodurch die Effektsteuerelemente wieder in das Eigenschaftenfenster zurückkehren.

Zurück (Zurück)

Eine Funktion der Flow-Modus-Funktionalität in Qt Design Studio ist das Hinzufügen einer Zurück-Schaltfläche. In vielen Fällen gibt es viele, viele Beziehungen zu Ihren Bildschirmen im Fluss, traditionell müssten Sie explizite Verbindungslinien „zu“ und „von“ jedem potenziell verbundenen Bildschirm erstellen, was zu einem verwirrenden und chaotischen Diagramm führt. Mit Qt Design Studio können Sie die Aktion einfach auf "Zurück" setzen und Sie gelangen immer zum vorherigen Bildschirm zurück.

Live Vorschau

Wie bei allen Bildschirmen in Qt Design Studio können Sie Ihre Änderungen in Echtzeit mithilfe der Live-Vorschau anzeigen. Führen Sie einfach die Vorschau aus und arbeiten Sie weiter am Stream. Ihre Änderungen werden in Echtzeit aktualisiert und Sie können sie direkt im Live-Fenster testen Vorschau.

Aussehen

Mit den Eigenschaften der Flow-Ansicht können Sie das Erscheinungsbild aller Elemente im Flow, der Verbindungslinien, der Aktionsbereiche (Umfang) und zusätzlicher Knoten wie Entscheidungen und Platzhalter anpassen. Sie können die allgemeinen Einstellungen für alle Elemente ändern oder eine einzelne Linie, einen Knoten oder einen Aktionsbereich auswählen und das Erscheinungsbild nur dieses Elements ändern (einschließlich Farbe, Linienstärke, gestrichelte oder durchgezogene Linien und sogar Verbindungskurven), sodass Sie hinzufügen können zusätzliche Semantik zum Design des Blocks selbst. -Schema.

Entscheidungen

Teil jeder komplexen Benutzeroberfläche ist die bedingte Logik, die verwendet wird, um Benutzern ihren Zustand zu präsentieren oder um verschiedene Datenquellen, Benutzerinteraktionen aus verschiedenen Eingaben wie physischen Tasten und Bedienelementen, Sensormesswerte von Gerätearrays oder generische Werte zu sammeln und zu verarbeiten von unterstützten/Dienst-APIs. Mit Decision Nodes können Sie jede dieser Bedingungen simulieren, indem Sie dem Benutzer eine Liste von Optionen präsentieren, die es Ihnen ermöglichen, Prototypen komplexer Interaktionen zu erstellen, bevor Sie über physische Steuerungen, Backend- oder Sensordaten verfügen, die für die Produktion erforderlich sind. In Zukunft können Sie diese Entscheidungen an tatsächlich unterstützte Werte oder Ereignislisten binden und Ihre Prototyping-Bemühungen in die frühen Stadien des tatsächlichen Produktionscodes verlagern.

Komm zu Teil 2

Der nächste Teil der Blog-Reihe befasst sich mit der Verwendung der erweiterten Funktionen, die für die nächste Iteration des Thread-Editors geplant sind.

Platzhalter

Entwickler stellten fest, dass eine weitere gängige Funktionalität in echten Benutzeroberflächen, die in herkömmlichen Flow-Design-Tools nicht gut gehandhabt wurde, Bildschirme waren, die von überall und jederzeit basierend auf einem bedingten Ereignis angezeigt werden konnten. Nehmen Sie zum Beispiel Push-Benachrichtigungen auf Smartphones oder Bildschirme für eingehende Anrufe auf dem HMI Ihres Autos. Mit Wildcards können Sie diese Art von Bildschirmen in Ihrem Flow simulieren, indem Sie echte oder simulierte Signale und Bedingungen verwenden, sodass Sie Ihre Flow-Konzepte über diese traditionelle Barriere hinaus erweitern können. Ein weiterer Anwendungsfall, den die Entwickler im Sinn hatten, war die Aktivierung von Whitelists und Blacklists für diese Wildcard-Ereignisse. Um mit einem unserer Beispiele hier fortzufahren, nehmen wir an, wir haben bei einem eingehenden Anruf an der HMI unseres Autos irgendwo in unserem Thread einen Warnbildschirm für einen Motor, der ebenfalls einen Platzhalter verwendet und jederzeit auf jedem Bildschirm erscheinen kann, wenn er ein Signal empfängt . Lassen Sie uns nun diesen Engine-Warnbildschirm zur Blacklist des Bildschirms für eingehende Anrufe hinzufügen. Das bedeutet, dass unser Bildschirm für eingehende Anrufe jetzt auf jedem anderen Bildschirm als dem Motorwarnbildschirm angezeigt werden kann.

Die Entwickler glauben, dass Sie mit diesem Satz von Tools beginnen können, die Komplexität der realen Benutzeroberfläche zu modellieren, was weit über einfache Klick-zu-Klick-Layouts und Lo-Fi-Prototypen hinausgeht.

Signale von Komponenten verbinden

Einfache Hives eignen sich hervorragend für das Prototyping, aber was ist, wenn Sie echte UI-Bildschirme verwenden möchten, um den Fluss Ihrer Anwendung zu steuern? Im nächsten Teil dieses Blogs wird untersucht, wie Flow-Aktionsbereiche verwendet werden, um Signale von Flow-Screen-Komponenten abzuhören und sie mit dem Flow-Design zu verbinden.

Integrierende Staaten

Eine weitere Überlegung, die die Entwickler entwerfen mussten, ist die Existenz von Zuständen in Qt Design Studio, einem vorhandenen und leistungsstarken Teil des Workflows, mit dem Sie Zustände für Ihre UI-Bildschirme erstellen und Änderungen zwischen ihnen verfolgen können. Mit diesen Flows können Sie nicht nur von einem beliebigen Bildschirmstatus zu einem anderen Bildschirmstatus wechseln, sondern Sie können auch einen Flow verwenden, um sich zwischen Zuständen auf demselben Bildschirm zu bewegen, indem Sie die Leistungsfähigkeit bestehender QML-Funktionen mit dem neuen Flow-Modus mischen.