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

UX Design mit Axure 8 Grundkurs

Zustandswechsel erkennen

Testen Sie unsere 2016 Kurse

10 Tage kostenlos!

Jetzt testen Alle Abonnements anzeigen
Hier lernen Sie, wie man die Panel-Events der dynamischen Panels von Axure einsetzt.
07:07

Transkript

In diesem Video möchte ich Ihnen zeigen, wie Sie Zustandswechsel von dynamischen Paneln erkennen können. Häufig findet man unter Slideshows eine Reihe von Kringeln, die zum einen die Anzahl der enthaltenen Bilder darstellen und andererseits anzeigen, welches Bild gerade aktuell ist. Das heißt, ist der zweite Kringel ausgefüllt, wird gerade das zweite Bild gezeigt. In diesem Video werde ich diese Interaktionen prototypen. Da aus der Gruppe der Kringel immer nur eine aktiv sein kann, verhalten die sich eigentlich wie Radiobuttons. Glücklicherweise bietet Axure eine Funktionalität, mit der mehrere Elemente zu einer sogenannten Selection Group zusammengefasst werden können. Diese Elemente verhalten sich nicht dann wie Radiobuttons, nur eins dieser Elemente kann jeweils selektiert sein. Eine Selection Group ist aber keine normale Gruppe. Selection Groups werden hier im Properties Panel von Inspector angelegt. Jetzt kann nur noch eines dieser Elemente selektiert werden. Elemente muss man über eine Aktion selektieren. Zum Beispiel über den OnClick-Event. Ich habe jetzt definiert, dass, wenn der erste geklickt wird, er sich automatisch selektiert. Ich kopiere diese Interaktion und füge sie bei den anderen Kringeln auch hinzu. Danach müssen wir noch festlegen, wie Selected für diese Elemente aussehen soll. Dafür gibt es die sogenannte "Interaction Styles". Und für unsere Elemente definieren wir für Selected einfach einen ausgefüllten Kreis. Überprüfen wir das Ergebnis. Wie Sie sehen, kann immer nur ein Element aktiviert werden. Das heißt, die Selection Group funktioniert und der Selected State auch. Aber zusätzlich soll, außer dass das Element selektiert wird, aber auch das passende Bild angezeigt werden. Daher muss hier noch eine Aktion ergänzt werden, nämlich "Set Panel State" von Slideshow auf der ersten Zustand für den ersten Kringel. Für den zweiten, auf den zweiten. Für den dritten auf den dritten und für den vierten auf den vierten. Mit ein paar Copy Paste-Befehlen sind nun alle Aktionen passend zugewiesen. Da aber durch das Klicken der automatische Zustandswechsel unterbrochen ist, müssen wir auch hier die Fire-Event Aktion nutzen. Das heißt, als dritten Befehl, nehmen wir "Fire Event", wählen die "slideShow" aus und suchen den OnLoad-Befehl. Diese Aktion kopiere ich und füge sie den anderen Knöpfen hinzu. Das Ergebnis sieht dann so aus. Man kann einzelne Zustände auswählen und nach einer Zeit wird der Zustand automatisch gewechselt. Das einzige was noch bleibt ist, dass der Zustand, der hier aktuell ist, unten abgebildet wird, durch die Selektion. Um über den aktuellen Zustandswechsel informiert zu werden, bietet Axure den OnPanelStateChange-Event an. Für diesen werde ich eine Reihe von Bedingungen festlegen, um zu erfragen, welcher Zustand dieses Panels gerade aktiv ist. Dazu nutze ich "Set Panel State", meines aktuellen Panals und überprüfe, ob es der erste Zustand ist. Wenn ja, selektiere ich den ersten Kringel. Diesen Case kopiere ich und füge ihn noch dreimal hinzu, da wir vier Kringel und vier Zustände in den Panel State haben. Dann passe ich die Cases und die Aktionen entsprechend an, dass der State den passenden Kringel selektiert. Bei dem letzten Case brauche ich keine Bedingung mehr, da dieser ausgeführt wird, wenn die anderen drei nicht gelten. Schauen wir uns das Ergebnis im Preview an. Wie Sie sehen, werden durch den Zustandswechsel des dynamischen Panels die Elemente unten selektiert. Ich kann einen neuen Zustand anklicken oder auch über Swipe den Zustand wechseln. Zustandswechsel, egal ob sie automatisch über den Load-Event kommen oder über den SwipeLeft- und Right-Event werden immer an OnPanelStateChange kommuniziert und von dort aus werden die Kringel aktualisiert. Wie Ihnen vielleicht aufgefallen ist, ist der erste Kringel initial nicht selektiert. Dazu wähle ich ihn einfach aus und selektiere ihn hier in den Properties. Die Selektion wird Ihnen im User Interface von Axure nicht angezeigt, wohl aber im Prototyp. In diesem Video haben Sie gesehen, wie Sie OnPanelStateChange-Event nutzen können, um über Zustandsänderungen eines dynamischen Panels benachrichtigt zu werden.

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!