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

Überblick über dynamische Panels

LinkedIn Learning kostenlos und unverbindlich testen!

Jetzt testen Alle Abonnements anzeigen
Dynamische Panels sind Elemente, mit denen man komplexere Interaktionen prototypisieren kann – hier geht’s um Animieren, Drag& Drop, das Erkennen von Swiping-Gesten und mehr.
05:16

Transkript

Um Teilbereiche interaktiv zu machen oder um komplexe Interaktion zu Prototypen, wie zum Beispiel Drag and Drop, bietet Axure das sogenannte dynamische Panel an. Dieses Widget werde ich in dem Folgenden vorstellen. In dem Ordner "other" finden Sie eine Seite namens "Dynamic Panel Overview", die in einen Überblick über die Eigenschaften von dynamischen Panels bietet. Das Widget Dynamic Panel finden Sie in der Default Das Besondere von den dynamischen Panels ist, dass es ein Element ist, das aus mehreren Zuständen bestehen kann. Das heißt es kann verschiedene Seiteninhalte oder Teilbereiche einer Seite beinhalten, die auf unterschiedlichen Zuständen ein- und ausgeblendet werden kann. Zusätzlich kann festgelegt werden, wie der Wechsel zwischen den Bereichen animiert werden sollen. doppelklicken Sie auf ein Element öffnet sich der entsprechende Zustand des dynamischen Panels. Der blaue Rahmen zeigt die aktuelle Größe des dynamischen Panels an. Das heißt, wenn Sie ein Element in dynamischen Panel platzieren, in diesem aktuellen Zustand "State 1" und das Panel schließen, wenn Sie sehen, dass nur ein Teil des Rechteckes sichtbar ist, nämlich der der sich in dem sichtbaren Bereich befindet. Sie sehen findet sich das Rechteck komplett im sichtbaren Bereich, wird es vom dynamischen Panel angezeigt. Der nächste Zustand eines Panels kann komplett unterschiedliche Inhalte beinhalten. Wie Sie im Outline-Panel sehen, sind das die verschiedenen Inhalte. Der oberste Zustand wird bei einem dynamischen Panel immer initial angezeigt. Sortieren wir hier die Zustände um, sehen Sie, dass dann Zustand 2 initial angezeigt wird. Das kann man nun mit dynamischen Panel tun. Dazu öffne ich einmal kurz diese Seite. Dynamische Panel reagieren, wie alle andere New iWidgets auf eine Reihe von Events. Jedoch bietet ein dynamisches Panel ein paar mehr. Dieses dynamische Panel besitzt nur ein Zustand und wird beim Klicken aus- und wieder eingeblendet. Damit ist die Funktionalität ähnlich, wie das, was hier eben mit den einzelnen Elementen in dem Login ein Beispiel umgesetzt haben. Mit diesem Panel kann ich Ihnen den Wechsel zwischen in verschiedenen Zuständen zeigen. Dieses Panel besteht aus drei Zuständen und jeder der Zustände enthäjt eine unterschiedlich farbige Box. Durch den Klick-Event wird der Zustand des Panels immer ein weiter gesetzt. Das heißt die unterschiedliche Inhalte können durch Mausklick nach und nach angezeigt werden. Das dritte Beispiel Panel funktioniert fast gleich, es hat auch wieder drei Zustände, jedoch reagiert dieses Panel ausschließlich auf zwei Bewegungen. Das sind die Events, die ausschließlich dynamischen Panels vorbehalten sind. Wie Sie sehen, können Sie den Zustand wechseln, wenn Sie wollen auch animieren, in dem linken Panel wird der neue Zustand unmittelbar eingeblendet, hier habe ich hier nach der Swipe-Bewegung die passende Animation dazu ausgewählt. Eine weitere Besonderheit von dynamischen Panels zeigt das vierte Beispiel. Dieses dynamische Panel in der Mitte besteht aus zwei Zuständen. Die Inhalte des dynamischen Panels sind unterschiedlich groß. Was dieses dynamische Panel macht, ist: Es drückt die Inhalte, die unterhalb liegen, nach unten, um so Platz für den Inhalt seines Zustandes zu schaffen. So können wir zum Beispiel, wie hier dem Beispiel anskizziert ausklappbare Bereiche Prototypen. Das Dreieck ist übrigens ein einzelnes Element, das abhängig von dem aktuellen Zustand und 90° in oder gegen den Uhrzeigersinn gedreht wird. Der Unterschied zwischen diesen und diesen Panel ist also, dass dieses nur aus zwei Zuständen besteht, die sich auch abwechseln, jedoch kann dieses Panel andere Inhalte seitewärts verschieben, um für seine eigene Inhalte Platz zu schaffen. Und weitere Events, die ausschließlich dynamischen Panels vorbehalten sind, befassen sich mit Drag & Drop. Dieses dynamische Panel kann ich mit dem Mausblick bewegen und beim Loslassen geht es zurück an seinen Ausgangsort. Dies gibt in einen sehr guten Überblick über die Eigenschaften von den dynamischen Panels. Lassen Sie mich also kurz zusammenfassen. Dynamische Panels bestehen aus mehreren Zuständen. Zwischen diesen Zuständen können Sie einfach hin und her wechseln. Zudem bieten in dynamischen Panels die Möglichkeit zu definieren, wie der Übergang von einem State zum anderen aussehen sollen. Das können Animation oder Transition sein. Darüber hinaus besitzen dynamische Panels insbesondere Events für Swiping und für Drag and Drop. Zusätzlich können Panel-State unterschiedlich große Inhalte beinhalten. Ändert sich eine dynamisches Panel, kann bei Bedarf der verbleibenen Inhalt, der unterhalb oder auch seitwärts zu einem dynamischen Panel wird, verschoben werden.

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!