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

UX Design mit Axure 8 Grundkurs

Widgets deaktivieren

Testen Sie unsere 2016 Kurse

10 Tage kostenlos!

Jetzt testen Alle Abonnements anzeigen
Der Film zeigt, wie man UI-Elemente in Axure bei Bedarf deaktiviert.
04:50

Transkript

Genauso einfach ist es Elemente zu aktivieren oder deaktivieren. Um dies zu demonstrieren, werde ich den Login-Button solange deaktivieren, bis beide Eingabefelder Texte enthalten. Elemente können Sie in den Properties deaktivieren. Jetzt ist der Button im Prototypen nicht mehr klickbar, auch wenn es hier in Axure in der Arbeitsumgebung nicht angezeigt wird. Wie Sie sehen, können hier Knopf jetzt nicht mehr gedruckt werden. Da die Deaktivierung des Buttons an den Eingabefeldern hängt, nutze ich wieder den OnLostFocus Event. Ist das Eingabefeld leer, soll also nicht nur die Warnung dargestellt werden, sondern auch der Button, falls er aktiviert ist, deaktiviert werden. Das heißt ich wähle Disable aus und zwar für den Submit-Button. Diese Aktion kapiere ich und füge sie auch bei dem Passwortfeld hinzu. Jetzt muss ich noch den Login-Button aktivieren. Dazu nutze ich den OnChange Event des Eingabefeldes. Hierbei überprüfe ich, ob der Text dieses Widgets nicht leer ist und der Text des Login-Eingabefeldes auch nicht leer ist. Damit diesen Case gleich einfach zwischen diesen beiden Elementen hin und her kopieren kann, ändere hier den Namen von "This" auf Passwort-Textfeld, da so die Elemente eindeutig benannt sind. Als Aktion wähle ich "Enable" aus, und zwar den Submit-Button des Formulars. Auch diese Aktion benenne ich. Dann kopiere ich sie über Command+C und Command+V an das andere Eingabefeld. Und um darzustellen, ob der Button aktiv oder disabled ist, vergebe ich noch einen sogenannten Interaktion-Style. Der Interaktion-Style wird nur in dem entrsprechenden Zustand hier disabled aufgerufen und in diesem Fall ändern wir die Hintergrundfarbe auf hellgrau, um zu unterscheiden, ist der Knopf aktiv oder nicht. Schauen wir uns das Ganze im Prototypen an. Bei leeren Eingabefeldern werden der Symbol dargestellt und der Knopf ist hellgrau, also deaktiviert. Sie sehen, sobald der Text des Eingabefeldes nicht mehr leer ist, ändert sich der Zustand des Buttons. Außerdem funktioniert noch die Abfrage, ob das Login korrekt oder inkorrekt ist. Um das Login-Beispiel abzuschließen, werde ich noch ein Case hinzufügen, mit dem das erste Eingabefeld initial im Fokus ist. Damit der Nutzer direkt mit der Eingabe beginnen kann. Dazu klicke ich auf die Seite, um auf den OnPageload Event zugreifen zu können. Hier suche ich mir den Event "Set Focus" und wähle dafür, das Login-Textfeld aus. Das bedeutet, dass sobald die Seite geladen wird, das Login-Eingabefeld aktiviert werden soll und im Browser sieht es dann so aus. Das Eingabefeld ist direkt aktiviert. Wie Sie gesehen haben, können Sie mit wenigen Aktionen Teilbereiche und einzelne Elemente Ihres Prototypen interaktiv machen, wie zum Beispiel ein- und ausblenden oder aktivieren oder deaktivieren. Und durch die Vielzahl der Aktionen wird Ihre Fantasie dabei fast keine Grenzen gesetzt.

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!