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

UX Design mit Axure 8 Grundkurs

Widgets ein- und ausblenden

Testen Sie unsere 2013 Kurse

10 Tage kostenlos!

Jetzt testen Alle Abonnements anzeigen
Sehen Sie hier, wie man UI-Elemente in Axure ein- und ausblendet.
05:17

Transkript

Was Axure von vielen anderen Prototyping Tools unterscheidet, ist die Fähigkeit einzelene Elemente oder ganze Teilbereiche interaktiv zu verändern. In den meisten anderen Tools müssen Sie Änderungen auf neuen Seiten darstellen. Mit Axure können Sie Veränderungen direkt auf der Seite vornehmen. Dadurch werden Sie wenige Varianten gleiche Seiten anlegen müssen. In diesem Tutorial zeige ich Ihnen, wie man Elemente ein- und ausblendet, dazu werde ich das Login- Beispiel weiter ausbauen. Zunächst möchte ich Warnhinweise anzeigen, wenn der Nutzer eines der Eingabefelder leerlässt. Dazu verwende ich das Warnsymbol, der Icon-Library. Ich bin eine Beide und füge sie dem empfohlenen Line hinzu. Axure bietet eine einfache Möglichkeit Elemente ein- und auszublenden. Dazu gibt es hier oben eine Checkbox, mit der Elemente ein und ausgeblendet werden können. Alternativ haben Sie im Rechtsklick-Menü auch die Option, Elemente wieder ein- und auszublenden. Ausgeblendet Elemente erkennt man durch die gelbe Outline. Sind Elemente ausgeblendet, stören Sie nicht, die andere Elemente und die Interaktion auf dem Screen. Jetzt werde ich Interaktionen erstellen, bei denen die Icons bei Leereingaben eingeblendet werden. Dazu nutze ich den OnLostFocus Event des Eingabefeldes. Bei den Wedget-Aktion ist der erste Eintrag Show/Hide. Diesen wähle ich und selektiere hier das userWarning Icon. Hier unten kann ich auswählen, ob ich es zeigen, verstecken oder in den Zustand wechseln will. In diesem Fall möchte ich es anzeigen. Der aktuelle Case besagt, dass, wenn den Nutzer mit dem Cursor das Feld verlässt, das Warnsymbol angezeigt werden soll. Dies soll natürlich nur passieren, wenn das Eingabefeld leer ist. Daher muss ich noch eine Bedingung hinzufügen. Ich überprüfe, ob der Text für dieses Widget leer ist. Ist dies der Fall, zeige das Warnsymbol. Überprüfen wir kurz die Interaktion. Ist das Feld leer und verlasse ich das Eingabefeld mit dem Cursor erscheint das Warnsymbol. Jetzt muss es nur noch ausgeblendet werden. Ich möchte das Icon ausblenden, wenn der Nutzer erneut in der Feld klickt. Dazu nutze ich den OnFucus Event. Ich kopiere mittels Command+C, die Aktion und kopieren Sie einfach unter den OnFocus Event. Per Doppelklick öffne ich noch einmal den Case Editor und wähle diesmal "Hide" aus. Verlasse ich das Feld mit leerer Eingabe, erscheint das Warnsymbol, gehe ich wieder hinein, verschwindet es. Gebe ich etwas ein, erscheint das Icon auch nicht. Diese Cases kann ich nun für das Passwort-Feld kopieren und entsprechend anpassen. Die Bedingung ist noch korrekt "text on This", mit "This" bezeichnet Axure übrigens das aktuelle Element. Jedoch möchte ich hier nicht das User Icon darstellen, sondern das Icon für die Passwort-Warnung. Wie Sie sehen, ist es möglich mehrere Elemente mit der gleichen Aktion auszuführen. Jedoch möchte ich Ihnen davon abraten, denn so können Sie die Elemente nicht umsortieren oder die Reihenfolge ändern. Das heißt ich würde sie Aktionen separat halten. In diesem Fall hier brauche ich jedoch nur die Passwort-Warnung. Jetzt füge ich noch das Ausblenden der Passwort-Warnung hinzu, wenn das Feld wieder fokussiert wird und damit mussten Interaktionen im Prototyp funktionieren. Sie sehen, wie leicht ist es Elemente ein- und auszublenden.

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!