Am 14. September 2017 haben wir eine überarbeitete Fassung unserer Datenschutzrichtlinie veröffentlicht. Wenn Sie video2brain.com weiterhin nutzen, erklären Sie sich mit diesem überarbeiteten Dokument einverstanden. Bitte lesen Sie es deshalb sorgfältig durch.

UX Design mit Axure 8 Grundkurs

Mit Panel-States arbeiten

LinkedIn Learning kostenlos und unverbindlich testen!

Jetzt testen Alle Abonnements anzeigen
Lernen Sie, wie man mit dynamischen Panels verschiedene Zustände eines Prototypen abbildet. Außerdem zeigt das Video, wie man diese Zustandswechsel animiert.
07:42

Transkript

Um zu zeigen, wie man mehrere Panel States in einem dynamischen Panel verwaltet und zugreift, lassen wir uns noch einen weiteren Zustand zu einem dynamischen Panel hinzufügen. Und zwar der Dialog, falls man sein Login vergessen hat. Ich benenne die beiden Zustände passend, damit ich mich später besser zurechtfinde. Ich öffne den Login-Zustand, und kopierere hier mal kurz diese vier Elemente. Und kopiere sie, inklusive der Outline in den zweiten Zustand. Zu diesem Screen gelangt der Nutzer, falls er auf den Link hier "Passwort vergessen" gedrückt hat. Dann wird er gebeten, seine E-mail Adresse einzugeben, damit hier mal ein neues Passwort zugesendet wird. Wenn Sie Inhalte kopieren, vergessen Sie nicht die Aktionen, die wahrscheinlich falsch sein werden, zu entfernen, und benennen Sie die Elemente passend. Da wir zwei Submit-Buttons innerhalb des dynamischen Pannels haben. passe ich den Namen für den ersten Panel State entsprechend an. Das Gute ist, dass Axure merkt, wenn Sie irgendwo an irgendeiner Stelle einen Namen ändern und die Namen in allen Cases und Aktionen entsprechend anpasst. Wie Sie sehen, kann man durch Doppelklick im Outline Panel schnell zwischen verschiedenen Zuständen hin- und herschalten und muss nicht jedesmal über den State Manager gehen. Auch hier soll sich beim Klicken das dynamische Panel wieder ausblenden. Nun müssen wir noch zwischen den beiden dynamischen Panels wechseln. Das heißt, wenn dieser Link geklickt wird, soll das dynamische Panel auf seinen zweiten Zustand wechseln. Dazu nutzen wir OnClick Event und nutzen den "Set Panel State" Event. Auf der rechten Seite werden dann alle dynamischen Panels im Arbeitsbereich angezeigt, hier nur ein einziges, und dann kann man hier in dem Dropdown die verschiedenen Panel States auswählen, oder auch mit vor und zurück automatisch das nächste Panel State anwählen. Das war zum Beispiel die Option, die ich beim Klicken oder beim Swipen in den Beispielen genutzt habe. Hier wissen wir aber, wir wollen zu "Login vergessen". Als Animation nutzen wir "flip left" und lassen die voreigestellte Zeit dafür. Im Prototyp sieht das dann wie folgt aus. Das Hand-Button müsste schon funktionieren - nein, da er noch disabled ist. Das muss ich noch anpassen. So weit, so gut. Klicke ich jedoch erneut auf dem Login Link, sehe ich, dass der aktuelle Zustand, nämlich der letzte, den das Panel hatte, noch aktiv ist. Das heißt, beim Schließen des dynamischen Panels oder beim erneuten Klicken, müsste ich hier wieder auf den ersten Zustand des dynamischen Panels zurückkommen. Am einfachsten realisiere ich dies, indem ich hier in der Aktion, wo ich das Panel einblende direkt zuvor den Zustand setze, also "Set Panel State" des Login Panels auf Login. Hier ist natürlich die Reihenfolge wichtig, dies muss natürlich passieren, bevor das dynamische Panel angezeigt wird. Ich lade noch einmal neu, im Prototyp funktioniert dieser Screen, ich wechsel den Panels State, schließe das dynamische Panel und jetzt wird der Zustand wieder auf Login gesetzt und ich kann wieder auf den zweiten Panel State wechseln. Die einzige Aktion, die im dynamischen Panel noch fehlt, ist, dass der Fokus direkt auf dem Eingabefeld liegt. Das war eine Aktion, die wir vorhin der Login-Seite gegeben haben. Jetzt muss ich den Fokus setzen, wenn das dynamische Panel angezeigt wird. Das heißt, ich nutze einfach den Event "OnShow" des dynamischen Panels. OnShow, Fokus des Login Text Fields. Schauen wir uns kurz das Ergebnis an, es funktioniert. Abschließend möchte ich noch eine Fehlermeldung anzeigen, wenn das Passwort oder das Login falsch eingegeben worden ist. Dazu möchte ich diesen Text einblenden, wenn es eine Falscheingabe gab. Initial setze ich den Text auf "Hidden" und benenne die Fehlermeldung damit ich sie jetzt bei einer Fehlereingabe einblenden kann. Falls das Login okay war, blende ich sicherheitshalber die Fehlermeldung einmal aus. Außerdem kann ich dann die beiden Links, die wir vorher zu "Login success" und "Login failure" angelegt hatten, löschen. Sie haben gesehen, dass ein dynamisches Panel ein Element ist, das verschiedene Zustände eines Teilbereiches abbilden kann. Dynamische Panel können ein- und ausgeblendet werden und die Zustandsübergänge animiert werden. Zusätzlich gibt es noch eine Handvoll Events, die es ausschließlich für Panels gibt, wie zum Beispiel Drag and Drop ein Event, wenn sich ein Panel State ändert, und Swiping.

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!