Registrierung mit Lightbox

Mit Axure 7 haben Dynamic Panles einige neue Optionen erhalten. U.a. die Treat as Lightbox Option. Mit dieser Option lassen sich sehr schnell Lightboxen mit abgedunkeltem Hintergrund erstellen. Ein typischer Anwendungsfall ist ein Layer, der sich sich über bestimmte Elemente legen soll. In dieser Übung bauen wir als Beispiel einen Registrierungslayer.
  • Axure Version: 8.0
  • Level: Beginner
  • Dauer: 20 min
  • Themen: Axure Basics, Lightbox, Overlay, Registrierung, Treat As Lightbox
Preview:

Das Konzept

Bei Klick auf den Registrierungs-Button wird ein verstecktes Dynamic Panel sichtbar gemacht und durch die Treat as Lightbox Option wie eine Lightbox auf die Seite gelegt. Das Panel verschwindet mit Hide Panel wieder im Hintergrund, wenn man den Registrierungs-Button im Formular anklickt. Am Ende erscheint ein Bestätigungstext.

1 Vorbereitung

Zunächst baut man ein kleines Registrierungsfenster mit einem Button. Sowohl der Button als auch der Text sollten benannt werden:

Button: 'Registrieren-Button'

Button: ‚Registrieren-Button‘

Label: 'Registrierungstext'

Label: ‚Registrierungstext‘

Ziehe ein Dynamic Panel über das gesamte Registrierungsfenster und nennen es ‚Registrierungsformular‘. Füge dem Panel den State ‚Formular‘ hinzu und platziere die Inhalte:

Dynamic Panel: 'Registrierungsformular'

Dynamic Panel: ‚Registrierungsformular‘

Dynamic Panel 'Registrierungsformular' > State 'Formular'

Dynamic Panel ‚Registrierungsformular‘ > State ‚Formular‘

Markiere die beiden Passwortfelder und maskiere sie mit Rechtsklick > Input type > Password:

Passwortfelder maskieren

Passwortfelder maskieren

Verlasse den State wieder und verstecke das Panel mit Hidden. Lege ihn anschließend mit Back in den Hintergrund damit der Registrieren-Button klickbar ist.

Dynamic Panel mit Hidden verstecken

Dynamic Panel mit Hidden verstecken

Dynamic Panel mit Back in den Hintergrund setzen

Dynamic Panel mit Back in den Hintergrund setzen

2 Interaktion erstellen

Markiere den Registrieren-Button und gebe ihm die OnClick Aktion Show ‚Registrierungsformular‘.
Unter More Options wählt man zusätzlich treat as lightbox und die Background Color aus.

treat as lightbox Option wählen

treat as lightbox Option wählen

Der Button auf dem Formular bekommt auch eine Aktion, damit sich die Lightbox wieder schließt.
Vergebe dem Button im State ‚Formular‘ die OnClick-Aktionen Hide Panel:

OnClick > Hide Registrierungsformular

OnClick > Hide Registrierungsformular

Anschließend wird das Panel mit Send to Back in den Hintergrund gesetzt:

Send Registrierungsformular to Back

Send Registrierungsformular to Back

Nachdem die Lightbox ausgeblendet ist, soll eine Bestätigung erfolgen. Hierfür verstecken wir mit Hide zunächst den Registrieren-Button und ändern mit Set Text den Registrierungstext:

Set text on Registrierungstext to …

Mit Klick auf fx kann der Text im Edit Text Fenster bearbeitet werden:

Edit Text

Edit Text

Die fertige Interaktion auf dem Registrieren-Button im State ‚Formular‘ sieht wie folgt aus:

Fertige Interaktion auf dem 'Button: Registrieren'

Fertige Interaktion auf dem ‚Button: Registrieren‘

 

Ein Kommentar

eparo – Digital Service Design » Blog Archiv » Sticky Element: Header & Lightbox

[…] zuerst zu ihm scrollen. (Die Erstellung des Registrierungsformulars könnt Ihr in dieses Tutorial Registrierung mit Lightbox […]

Kommentar schreiben

    Name
    E-Mail Adresse
    Website URL (optional)
    Kommentar