Formulare und Eingaben
Mit Justinmind können Sie interaktive Formulare entwerfen, um Benutzereingaben zu simulieren, z. B. Registrierungs-, Anmelde- und Suchformulare.
Ein Formular erstellen
Um ein Formular in Justinmind zu erstellen, müssen Sie Widgets verwenden. Schauen Sie in der Symbolleiste unter dem Pluszeichen in der oberen linken Ecke Ihres Bildschirms nach. Hier finden Sie Widgets, die häufig in Formularen verwendet werden, darunter: Eingabetextfelder, Kontrollkästchen und Optionsfelder, Auswahllisten und mehr.
Sie können auch unsere vorgefertigten Formulare herunterladen und in Ihre Widgets-Palette importieren.
Ziehen Sie einfach ein Widget auf die Leinwand, um mit der Erstellung Ihres Formulars zu beginnen.
Alle Formular- und Eingabe-Widgets sind während der Simulation automatisch interaktiv – keine Ereignisse erforderlich. Klicken Sie einfach auf „Simulieren“ und schon können Sie mit ihnen interagieren.
Je nachdem, welches Gerät Sie in Ihrem Prototyp verwenden, unterscheiden sich das Aussehen und die Funktionalität dieser Widgets. Wenn Sie z.B. bei iPhone-Prototypen während der Simulation auf ein Eingabefeld fokussieren, wird automatisch eine interaktive Gerätetastatur angezeigt.
Sie können zusätzliche Widgets mit einem Eingabestil in Ihren Prototyp aufnehmen, indem Sie andere Widget-Bibliotheken hinzufügen.
Sobald Sie Ihr Formular designt haben, können Sie damit beginnen, Ereignisse hinzuzufügen, um anspruchsvolle Interaktionen zu erstellen. Wir haben ein paar Beispielübungen erstellt, um Ihnen eine Vorstellung von einigen Möglichkeiten zu geben. Sehen Sie sie sich unten an.
Formulare automatisch ausfüllen
In dieser Übung lernen Sie, wie Sie zwei Eingabetextfelder automatisch ausfüllen, nachdem Sie im ersten Eingabetextfeld die Tabulatortaste gedrückt haben.
Folgen Sie diesen Schritten, um die Übung abzuschließen:
- Erstellen Sie einen neuen Prototyp für Ihr Formular; verwenden Sie einen Text, Eingabe-Textfelder und eine Schaltfläche aus der Symbolleiste.
- Wählen Sie die Schaltfläche und gehen Sie zur Palette Ereignisse.
- Klicken Sie auf „Ereignis hinzufügen“ und wählen Sie den Auslöser „Bei Klick“; wählen Sie eine Aktion „Wert setzen“.
- Wählen Sie für das Ziel das zweite Eingabefeld und geben Sie als Wert „Produktname“ ein. Klicken Sie auf „OK“, um die Erstellung des Ereignisses abzuschließen.
- Gehen Sie zur Palette Ereignisse, klicken Sie auf das Zahnradsymbol neben dem Wort ‚Tun‘ und wählen Sie ‚Aktion hinzufügen‘. Erstellen Sie eine weitere Aktion „Bei Klick“ + „Wert setzen“ und wählen Sie das dritte Eingabetextfeld als Ziel und geben Sie etwas als den von der Aktion gesetzten Wert ein.
- Schauen Sie erneut in die Palette Ereignisse und klicken Sie auf „Interaktion hinzufügen“. Belassen Sie den Auslöser bei „Bei Klick“ und ändern Sie die daraus resultierende Aktion in „Fokus setzen auf“ und wählen Sie das zweite Input-Textfeld als Ziel, auf das der Fokus gerichtet werden soll.
Das war’s! Klicken Sie auf „Simulieren“ und geben Sie etwas Text in das erste Eingabefeld ein. Drücken Sie dann die TAB-Taste und Sie werden auf das zweite Eingabefeld fokussiert und sehen, wie die Werte automatisch ausgefüllt werden.
Sie können das Beispiel hier herunterladen.
Validierung des Bildschirmablaufs
Mit Justinmind können Sie ein mehrstufiges Formular unter Verwendung von Variablen und Screenflow-Validierung erstellen und simulieren. In diesem Beispiel lernen Sie, wie Sie ein mobiles Eingabeformular mit mehreren Bildschirmen erstellen können. Auf dem letzten Bildschirm sieht der Benutzer eine Zusammenfassung aller Details, die er ausgefüllt hat.
Um ein mehrstufiges Formular in Ihrem Prototyp zu designen, führen Sie die folgenden Schritte aus:
Design der Bildschirme
- Erstellen Sie einen neuen Prototyp mit zwei Bildschirmen.
- Ziehen Sie auf dem ersten Bildschirm drei Texte und nennen Sie sie „Benutzername“, „E-Mail-Adresse“ und „Passwort“.
- Ziehen Sie ein Eingabe-Textfeld unter jedes Textfeld, insgesamt sollten es drei sein.
- Fügen Sie in der unteren rechten Ecke des Bildschirms eine Schaltfläche hinzu, mit der Sie zum nächsten Bildschirm navigieren können.
- Gehen Sie zu Bildschirm 2 und fügen Sie die gleichen Textfelder mit den Eingabetextfeldern unter jedem Text hinzu.
- Gehen Sie zur Palette Variablen und fügen Sie drei Variablen hinzu, eine für jedes Eingabefeld.
Hinzufügen der Ereignisse
- Gehen Sie zu Bildschirm 1 und erstellen Sie ein Ereignis „On Tap“ + „Link To“ und verknüpfen Sie es mit Bildschirm
- Wiederholen Sie Schritt 2 für die nächsten beiden Eingabetextfelder.
- Gehen Sie zu Bildschirm 2 und sehen Sie sich die Palette Variablen an. Wählen Sie eine Variable und ziehen Sie sie auf das entsprechende Textelement auf dem Bildschirm. Dadurch wird ein Ereignis „Beim Laden der Seite“ + „Wert setzen“ erzeugt und der Wert des Textelements auf den Wert der Variablen gesetzt.
- Wiederholen Sie Schritt 3, bis jedem Textelement die entsprechende Variable zugewiesen wurde.
- Und das war’s! Klicken Sie auf „Simulieren“ und interagieren Sie mit Ihrem Prototyp. Sie werden sehen, dass Ihre Antworten in der Zusammenfassung auf der letzten Seite erscheinen.
Sie können das Beispiel hier herunterladen.
Validierung von Pflichtfeldern
In diesem Beispiel lernen wir, wie Sie Bedingungen verwenden, um ein Eingabeformular zu validieren, damit alle erforderlichen Felder korrekt ausgefüllt werden.
Folgen Sie diesen Schritten, um zu erfahren, wie:
Das Design des Formulars
- Erstellen Sie einen Prototyp und legen Sie drei Eingabefelder im Canvas an (Sie finden die Eingabefelder in der Symbolleiste im Menü mit dem Plus-Symbol).
- Weisen Sie in der Palette Eigenschaften jedem Eingabetextfeld einen Platzhalterwert von „Vorname“, „E-Mail*“ und „Telefonnummer*“ zu. Sie können den Platzhaltertext in der Palette Eigenschaften definieren.
Hinweis: In die Eingabefelder, die das Zeichen ‚*‘ enthalten, muss der Benutzer Text eingeben, um das Formular auszufüllen. Beachten Sie außerdem, dass das E-Mail-Feld das Format „xxx@xxx“ erfordert.
- Erstellen Sie ein Schaltflächen-Widget am unteren Rand von Bildschirm 1.
- Gehen Sie zu Bildschirm 2 und erstellen Sie eine „Erfolgsmeldung“, um den Benutzer darüber zu informieren, dass er seine Daten erfolgreich eingegeben hat.
Hinzufügen der Ereignisse
Wir haben ein statisches Eingabeformular erstellt. Jetzt fügen wir mit Hilfe von Bedingungen Ereignisse hinzu, um unser Formular interaktiv zu machen und festzustellen, welche Felder ausgefüllt werden müssen, um erfolgreich zum nächsten Bildschirm zu gelangen.
- Wählen Sie die Schaltfläche in Bildschirm 1 und gehen Sie zur Palette Ereignisse. Fügen Sie eine Aktion „Bei Klick“ + „Stil ändern“ hinzu und wählen Sie das „E-Mail*“ Eingabe-Textfeld. Wählen Sie die Optionen für die Rahmen- und Textfarbe aus dem Dropdown-Menü und setzen Sie sie auf die aktuelle Farbe des Eingabetextfelds. Klicken Sie dann auf „OK“, um den Dialog zu verlassen. Dadurch ändert sich das Aussehen des Eingabetextfelds so, dass es in seiner Standardfarbe erscheint, wenn der Benutzer die richtigen Informationen eingegeben hat.
- Gehen Sie zurück zur Palette Ereignisse und klicken Sie auf den Text „Bedingung hinzufügen“ über dem Ereignis, das Sie gerade erstellt haben. Führen Sie im Modul für bedingte Ausdrücke die folgenden Schritte aus, um die Bedingung zu erstellen:
1. Ziehen Sie die Textfunktion Regulärer Ausdruck auf das erste Leerzeichen des Ausdrucks.
2. Ziehen Sie das Postleitzahlen-Eingabetextfeld aus dem Dialog Canvas oder aus der Dialogkontur in den angezeigten Bereich.
3. In das zweite Feld ziehen Sie die Konstante Postleitzahl. Klicken Sie auf „OK“, um die Erstellung der Bedingung abzuschließen. - Sehen Sie sich die Ereignisse an, die Sie gerade erstellt haben, und klicken Sie auf den Text „Sonst“. Fügen Sie eine weitere Aktion „Bei Klick“ + „Stil ändern“ hinzu und wählen Sie erneut das „Postleitzahl*“ Eingabefeld und wählen Sie die Optionen Rahmenfarbe und Textfarbe aus dem Dropdown-Menü. Ändern Sie dieses Mal den Stil des Rahmens und des Textes in Rot. Der rote Stil zeigt dem Benutzer an, dass das Eingabefeld für die Postleitzahl nicht korrekt ausgefüllt wurde.
- Wiederholen Sie die Schritte 1-3 für das andere erforderliche Eingabefeld (Telefonnummer). Denken Sie daran, die Komponenten im Expression Builder und in den Input Text Fields entsprechend zu ändern.
- Sobald Sie Ereignisse für beide erforderlichen Felder haben, fügen Sie der Schaltfläche ein weiteres Ereignis hinzu. Erstellen Sie ein Ereignis „Bei Klick“ + „Navigieren zu“ und wählen Sie dann Bildschirm 2.
- Klicken Sie auf den Text „Bedingung hinzufügen“ für dieses Ereignis. Fügen Sie den folgenden Ausdruck hinzu:
Hinweis: Die Bedingung muss genau diesem Bild entsprechen, damit das Ereignis korrekt ausgelöst wird.
Und das war’s! Klicken Sie auf „Simulieren“, um mit Ihrem Eingabeformular in Ihrem Prototyp zu interagieren und es zu genießen.