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

UX Design mit Axure 8 Grundkurs

Elemente fixieren

Testen Sie unsere 2016 Kurse

10 Tage kostenlos!

Jetzt testen Alle Abonnements anzeigen
Hier erfahren Sie, wie man statische Elemente und deren Position auf dem Screen definiert.
05:44

Transkript

In diesem Video möchte ich Ihnen zeigen, wie man Elemente in Axure statisch positioniert. Ein bekanntes Beispiel ist zum Beispiel so ein Element, das auf längeren Seiten eingesetzt wird, um am Ende oder auf der Hälfte der Seite wieder an den Anfang zu scrollen. Lassen Sie mich zeigen, wie wir dieses Element in Axure prototypen. In Axure können nur dynamische Panels statisch positioniert werden. Also konvertiere ich, dieses Element in ein dynamischen Panel und benenne es. Anschließend wähle ich in den PROPERTIES-Reiter im "Inspector" Panel den "Pin to Browser" Link aus. Mit dieser Funktionalität können Elemente statisch positioniert werden. Jedoch funktioniert diese Funktionalität, wie hier steht, nur innerhalb Ihres Prototypen, das heißt nicht im User Interface von Axure selbst. Aktivieren Sie Funktionalität, können Sie auswählen wo das Element positioniert werden soll. "Left" und "Top" ist hier korrekt und "Keep in front" auch, damit ist das Element immer auf der obersten Ebene und immer sichtbar. Hier sehen Sie die Zusammenfassung Ihrer Auswahl und Elemente mit der "Pin to Browser" Funktionalität haben hier so eine Art Stecknadel-Icon. Im "Preview" Mode sieht das Element dann wie folgt aus. Wie Sie sehen, bleibt es fest an seiner Position, auch wenn ich die Seite scrolle. Nun wird so ein Element in der Regel nicht immer dargestellt, sondern erst, wenn ich anfange zu scrollen. Das heißt, initial soll das Element ausgeblendet sein und erst eingeblendet werden, wenn ich zum Beispiel auf der Höhe des "About me" Textes bin. Das Element ausblenden ist leicht: einfach die "Hidden" Checkbox setzten und das Element ist initial unsichtbar. Um das Element ein- und auch wieder auszublenden, nutze ich den OnWindowScroll-Event der Seite. Ich möchte das Element einblenden, also nutze ich "Show toTopBTN" und ich muss jetzt eine Bedingung hinzufügen, mit der ich feststellen kann, wo der sichtbare Bereich unseres [unverständlich] grade ist. Dazu nutze ich im "Condition Builder" den Wert "Value" und drücke die Funktionstaste, "fx" abgekürzt. Hier können Sie eigene Werte und Funktionen erstellen, aber Axure bittet Ihnen auch eine Auswahl von voreingestellten Werten. Der Wert, der uns jetzt interessiert ist der Wert "Window.scrollY". In dieser Variable legt Axure den aktuell sichtbaren Bereich des Prototypen ab. Wenn der sichtbare Bereich größer oder gleich 50 Pixel ist, wollen wir das Element einblenden. Im Prototyp sieht es dann so aus. Das Element wird, nach einer Scroll-Bewegung, eingeblendet. Natürlich soll das Element auch wieder ausgeblendet werden, wenn der sichtbare Bereich ganz oben ist. Dazu erstellen wir einen neuen Case und blenden das Element anderenfalls einfach wieder aus. Initial ist das Element ausgeblendet, wir fangen an zu scrollen, es wird eingeblendet, und kommen wir oben an verschwindet das Element wieder. Da der Wert 50, ein wenig klein zu sein scheint, erhöhe ich ihn auf 100 Pixel. Da erscheint das Element und da wird es wieder ausgeblendet. Ich füge noch eine Einblend-Animation für das Ein- und Ausblenden hinzu und abschließen muss ich den Link natürlich noch klickbar machen. Ich füge einen Hot Spot an die oberste Position meiner Seite, benenne ihn und nutze die "Scroll to Widget", "theTop", damit ich beim Klicken auf das Element wieder ganz nach oben gelange. Und damit funktioniert das Element, wie erwartet. Sie haben in dem Video gesehen, wie man dynamische Panel durch die "Pin to Browser" Funktionalität an einer Position fixieren kann und wie Sie die OnWindowScroll- Events und die dazu gehörigen Variablen einsetzen können.

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!