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

Dynamische Panels ein- und ausblenden

LinkedIn Learning kostenlos und unverbindlich testen!

Jetzt testen Alle Abonnements anzeigen
Sehen Sie am anschaulichen Beispiel, wie man dynamische Panels ein- und ausblendet.
05:08

Transkript

Abschließend werde ich das Login in ein dynamisches Panel verwandeln und das an die Hauptnavigation hängen. Dazu öffne ich die Login-Seite und kopiere mir das Element heraus. Dann öffne ich den Header und platziere das Eingabefeld dadrunter. Dann füge ich ein Dreieck hinzu, damit man sieht, wo drauf das Element bezieht. Ich selektiere alle Elemente und nutze die rechte Maustaste, um die Inhalte in ein dynamisches Panel zu verwandeln. Durch diese Option wird der selektierte Inhalt in den ersten Zustand eines dynamischen Panels überführt. Ich benenne mein dynamisches Panel entsprechend und blende es initial aus. Hier sieht man noch den Preview des Panels. Jetzt entferne ich die Login-Aktion, da ich jetzt nicht mehr die Seite öffnen will, sondern mein dynamisches Panel. Login einblenden möchte. Jetzt bietet Action mir mehrere Mglichkeiten an. Treat as lightbox heißt, dass dynamische Panel soll als Overlay eingeblendet werden. Initial ist immer ein leicht grünlichen Ton eingestellt, deswegen passe ich normalerweise die Overlay-Farbe an. Wie Sie sehen, erste Case nun "Show:login treat as lightbox". Im Prototyp sieht das Ganze dann so aus. Das ist der Grauton, hier ist das Element, und es verhält sich, wie eine Lightbox das über dem eigentlichen Content liegt. Klicke ich außerhalb der dynamischen Panels, verschwindet es wieder. Das ist die Default-Einstellung von Axure. Das Ovrlay wird natürlich auch verschwinden, wenn ich den Submit Button des Formulars drücke. Also füge ich hier eine Aktion hinzu, indem ich das dynamische Panel wieder verstecke. Diesem Element füge ich nur Interaktion hinzu, damit der Nutzer das dynamische Panel auch dort oben, wo das X, schließen kann. Im Prototyp sieht das dann wie folgt aus. Sie sehen, die Seite wird passend dargestellt. Eigentlich waren alle Elemente gruppiert, das sie Teil einer Seite waren, aber die Gruppierung brauchen wir eigentlich nicht mehr. Also entferne ich die Gruppierung dieses Elementes, da sich alle Elemente in dem Panel-State befinden. Ich schließe das dynamische Panel wieder und platziere den Overlay. Ich möchte noch kurz Ihnen eine Option zeigen, die Sie beim Ein- und Ausblenden von dynamischen Panles besitzen. Eine weitere Anzeigeoption ist es, das Element als Flyout, eigentlich als Popout darzustellen. Das bedeutet, solange der Mauscursor innerhalb des dynamischen Panels ist, ist das Panel sichtbar. Verlässt der Mauscursor das Panel, blendet es sich automatisch wieder aus. Eine weitere Option ist die anderen Inhalte, die sich neben oder unterhalb des ynamischen Panel befinden, nach unten zu schieben. Das war das, was wir an den gant rechten Beispiel, vorhin sehen konnten. Für unseren Case lasse ich "Treat as lightbox" eingestellt, da dies die korrekte Darstellungsform für unser Overlay ist. Zusätzlich könnte ich festlegen, wie der Inhalt, wenn er ein- oder ausgeblendet wird, animiert werden soll. Der typische Fall für Ein-und Ausblenden ist Fading. Ich zeige Ihnen einmal, wie es aussehen würde, auch wenn die Animation für ein Overlay etwas unpassend ist.

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!