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

UX Design mit Axure 8 Grundkurs

Interaction-Styles definieren

Testen Sie unsere 2016 Kurse

10 Tage kostenlos!

Jetzt testen Alle Abonnements anzeigen
Hier erfahren Sie, welche Stile es für interaktive Elemente in Axure gibt und wie man diese Stile definiert.
06:08

Transkript

Zusätzlich zu dem generellen Layout von einzelnen Elementen bietet Axure Ihnen die Möglichkeit, Stile für verschiedene Interaktionen festzulegen. Diese finden Sie aber nicht unter dem Style Reiter im Inspektor, sondern unter den Properties. Alle UI-Elemente haben die folgenden vier Interaction Styles: MouseOver, MouseDown, Selected und Disabled. Das heißt, Sie können den Stil verändern, wenn Elemente selektiert sind, wenn sie deaktiviert sind oder der Mauscursor über ihn rollt oder die Maustaste gedrückt ist. Im Folgenden werde ich Ihnen zeigen, wie Sie Interaction Styles für die TabBar nutzen können. Ich wähle den ersten Eintrag aus, Home und fang an mit dem MouseOver Style. Ich möchte das aktuelle Element unterstreichen, wenn die Maus darüber fährt. Dazu wähle ich den Linienstyle und die Linienstärke, lege die Farbe fest und Sie sehen durch dieses Previewfenster können Sie hier schon ein Gefühl davon bekommen, wie das Element aussehen wird. Da ich nur den Rand unten haben möchte, wähle ich unter Border Visibility nur den unteren Rand aus. In unserem Prototyp sieht unsere Style Anpassung wie folgt aus. So können Sie verschiedene Styles für die verschiedenen Zustände definieren. Eine Schwierigkeit von Axure ist, dass Sie die Einstellung des vorherigen Styles nicht einfach übernehmen und ändern können. Daher bietet es sich an, die Änderungen, die Sie vornehmen wollen, initial als Widget Style zu speichern. Das heißt, Sie gehen in den Style Reiter, nehmen Formatierung hier vor Es wird auf dem Bildschirm durchgeführt. und speichern diese. Denn nun könnte den Widget Style in den Properties anwenden und für die verschiedenen Stile anpassen. Zum Beispiel indem Sie einfach die Opacity ändern Es wird auf dem Bildschirm durchgeführt. Um Stile hin und her zu kopieren bietet Ihnen Axure unter More versteckt den Format Painter. Obwohl Ihnen das Icon wahrscheinlich bekannt vorkommt, ist der Format Painter etwas komplizierter. In dem Format Painter können Sie ein Elemente auswählen, den Stil, in der Regel sind alle Stil-Eigenschaften ausgewählt, kopieren und dann auf ein anderes Element übertragen. In diesem Beispiel kopiere ich alles von Login auf Home, jedoch nicht die Interaction Styles, die ich gerade eben definiert habe, wie Sie sehen. Es wird auf dem Bildschirm durchgeführt. Und dieses Element den Grundstil für MouseOver und für MouseDown und Selected unterschiedliche Stile. Es wird auf dem Bildschirm durchgeführt. Mit dem Painter, der über Command 9 auch erreichbar ist, können Sie nun den Stil des ersten Elementes auf alle übertragen. Jedoch müssen Sie die Änderung der Checkboxen jedes Mal neu machen, da der letzte Zustand gespeichert wird. Wie Sie sehen, sind jetzt alle Tabs unterstrichen und haben In Pressed State und den Selected State der verschiedenen Reiter zu nutzen und für die unterschiedlichen Seiten zu aktivieren, nutzen wir auf den jeweiligen Seiten den Page Event OnPageLoad, in ihn wählen wir die Aktion Set Selected aus und aktivieren das jeweilige Tab. Per Command-C und Command-V kopiere ich die Aktion schon mal hin und her und selektiere dann den passenden Link. Es wird auf dem Bildschirm durchgeführt. Im Preview sehen Sie dann, dass der State für die verschiedenen Elemente übernommen wird. So können Sie also die verschiedenen Interaction Styles nutzen, um einzelne Elemente und ihr verhalten abzubilden.

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!