Unsere Datenschutzrichtlinie wird in Kürze aktualisiert. Bitte sehen Sie sich die Vorschau an.

UX Design mit Axure 8 Grundkurs

Mit Formularen arbeiten

Testen Sie unsere 2017 Kurse

10 Tage kostenlos!

Jetzt testen Alle Abonnements anzeigen
Sehen Sie, welche Formularelemente Axure bietet und wie man diese einsetzt. Sie lernen, Formulare zu erstellen und Eingaben zu verarbeiten.
07:28

Transkript

In diesem Video möchte ich Ihnen kurz die verschiedenen Formularelemente von Axure vorstellen und wie Sie sie nutzen. Um Ihnen einen Überblick zu verschaffen habe ich ein wirklich überladenes das Kontaktformular erstellt. Aber dieses Formular soll nicht einfach oder gut zu bedienen sein, sondern soll Ihnen einen Überblick über die verschiedenen Formularelemente von Axure liefern. Wir haben die Eingabefelder, einen Dropdown, eine große Textarea eine Checkbox, zwei Radiobuttons und ein Submit Button. Wie Sie im Outline Panel sehen, habe ich die einzelnen Formularfelder bereits benannt. Bei Eingabefelder können Sie eine Reihe von Eigenschaften einstellen. Dazu wählen Sie in dem Properties-Tab im Inspector und gehen hier zu den Eigenschaften des Text Fields. In dieser Dropdown können die verschiedene Standardeingabeformate für das Element wählen. Ein typisches, was ich Ihnen auch schon gezeigt habe, war zum Beispiel "Password". Jetzt wird bei der Eingabe anstatt Echttext nur noch Platzhalter dargestellt. Die anderen Optionen, zum Beispiel "Number" bewirkt in den neueren Browsern, dass ich die Eingabeformate ändern, oder das auf mobilen Endgeräten die passende Tastatur direkt eingeblendet wird, aber da dies ein Textfeld ist wähle ich erneut "Text" aus. Dieses zweite Eingabefeld "Hint", beschreibt den Text, der zu lesen ist, wenn das Textfeld noch leer ist. Das heißt, es kann eine alternative zu einer Überschrift wie dieser hier sein. Wie Sie sehen, steht hier jetzt "your name" als Hint Text. Für den Text können Sie auch ein Format festlegen zum Beispiel die Farbe ändern oder die Schriftgröße. Außerdem können Sie festlegen, wann der Text verschwinden soll. Wenn Sie anfangen in dem Felde einzutippen oder wenn Sie das Feld aktivieren. Außerdem können Sie einstellen, dass der Rahmen nicht dargestellt wird, oder Sie können das Feld auf "Read Only" stellen oder deaktivieren. Neben dem Hint Text können Sie auch einen Tooltip vergeben, der angezeigt wird, wenn Sie mit der Maus über das Eingabefeld fahren. Der Parameter des Submit Buttons ist für gesamte Feld relevant, deswegen selektieren Sie am besten alle Eingabeelemente und wählen den passenden Button nämlich "submitBTN" aus. Kommen wir nun zur Dropdown. Beim Doppelklick auf eine Dropdown sehen Sie, dass Sie hier mit dem Plus neue Elemente eintragen könne, durch langsames klicken können Sie den Eintrag ändern oder auch einzelne Einträge wieder löschen oder umsortieren. Wenn Sie mehrere hintereinanderweg eingeben wollen, wählen Sie die "Add Many" Option aus und geben Sie dann Ihre Informationen einfach hintereinander ein. Jede Zeile wird dann in einen einzelnen Wert umgewandelt. Neue können Sie durch Doppelklick oder hier über den Link auf der rechten Seite im Inspektor Panel hinzufügen. Textareas ähneln Textfeldern sehr, auch dort können Sie einen Hint-Text hinterlegen, den Style definieren und einen Tooltip vergeben. Kommen wir nun zu den Checkboxen. Eine Checkbox können Sie initial durch klicken auf die Checkbox selbst selektieren oder hier auf der rechten Seite. Außerdem können Sie einstellen, ob der Knopf links oder rechts von dem Text stehen soll. Auch Checkboxes können einen Tooltip besitzen. Ähnliches gilt für Radiobuttons. Auch Radiobuttons können mit einem Klick ausgewählt werden, jedoch sollte so ein Case nicht verkommen. Da mehrere Radiobuttons in der Regel zu einer Gruppe gehören, von der man nur eine Option wählen kann, müssen Sie auch hier eine Gruppe für die Radiobuttons erstellen. In dieser Dropdown können Sie entweder eine bestehende Gruppe auswählen, falls Sie schon eine angelegt haben oder eine neue erstellen. Jetzt werden Sie im Prototyp nur eine der Optionen auswählen können, da beide Radiobutton zu der gleichen Gruppe gehören. Wie Sie sehen, sind hier die Elemente ausgewählt und hier können Sie nur eins der Elemente selektieren. Ein weiterer wichtiger Punkt ist die Reihenfolge, wie man mit der Tab-Taste durch die einzelnen Eingabefelder geht. Ich fange also oben an, gebe etwas ein, drücke Tab, komme zum zweiten Feld und komme jetzt erst zu dem Textfeld bevor ich zu der eigentlichen Topic-Auswahl komme. Die Klickreihenfolge wird nämlich durch die Reihenfolge der Elemente in dem Outline Panel bestimmt, das heißt, in welcher Reihenfolge die Elemente auf der Arbeitsfläche liegen. Ich klicke in das erste Element und drücke Tab und sehe, dass ich zu dem zweiten komme. Von hier komme ich aber zu der Textarea und danach erst zu der Dropdown. Ändere ich diese Reihenfolge hier und schaue mir erneut den Prototypen an, wird die Reihenfolge richtig sein, das heißt nach dem Namen komme ich zur Frage und danach zum Topic. Achten Sie also darauf, dass Ihre Elemente in der richtigen Reihenfolge in dem Outline Panel angeordnet sind. Falls Sie das erste Eingabefeld beim Öffnen der Seite direkt aktivieren wollen, nutzen Sie den OnPageLoad-Event der Seite und wählen Sie den Focus-Aktion für das Textfeld, was Sie selektieren wollen, in diesem Fall das "Name" Text Field. Beim Öffenen des Prototypen ist das Text Field direkt aktiviert. Damit wissen Sie, wie Sie die verschiedenen Eingabefelder von Axure verwenden, welche Optionen Sie bitten, wie Sie ein Submit Button hinzufügen und wie Sie die Tab-Reihenfolge der Eingabefelder definieren.

UX Design mit Axure 8 Grundkurs

Lernen Sie mit Axure 8 Apps und Webseiten zu konzipieren und prototypisch umzusetzen, ganz ohne Programmiervorkenntnisse.

3 Std. 32 min (53 Videos)
Derzeit sind keine Feedbacks vorhanden...
 
Software:
Axure RP Pro Axure RP Pro 8
Exklusiv für Abo-Kunden
Erscheinungsdatum:04.11.2016

Dieser Online-Kurs ist als Download und als Streaming-Video verfügbar. Die gute Nachricht: Sie müssen sich nicht entscheiden - sobald Sie das Training erwerben, erhalten Sie Zugang zu beiden Optionen!

Der Download ermöglicht Ihnen die Offline-Nutzung des Trainings und bietet die Vorteile einer benutzerfreundlichen Abspielumgebung. Wenn Sie an verschiedenen Computern arbeiten, oder nicht den ganzen Kurs auf einmal herunterladen möchten, loggen Sie sich auf dieser Seite ein, um alle Videos des Trainings als Streaming-Video anzusehen.

Wir hoffen, dass Sie viel Freude und Erfolg mit diesem Video-Training haben werden. Falls Sie irgendwelche Fragen haben, zögern Sie nicht uns zu kontaktieren!