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

UX Design mit Axure 8 Grundkurs

Mobile Apps prototypisieren

Testen Sie unsere 2019 Kurse

10 Tage kostenlos!

Jetzt testen Alle Abonnements anzeigen
Dieser Film verrät, auf welche Besonderheiten man achten muss und wie man dynamische Panels einsetzt, um Page-Transitions zu prototypisieren.
04:18

Transkript

In diesem Video werde ich Ihnen zeigen, was Sie bei der Erstellung eines Prototypen für einen Mobile App beachten müssen. Mobile Apps unterscheiden sich in der Regel von Webseiten und Desktop Applikation darin, dass Sie stärker Animationen und Tradition nutzen. So werden Seiten oder Menüs von links nach rechts ein- und ausgefahren oder ausgeklappt und Seiten und Elemente werden ein- und ausgeblendet. Diese Interaktionen lassen sich mit Seitenbasierten Prototypen, das heißt Prototypen, die Ihre Inhalte über Seiten definieren, schlecht abbilden, da man mit Axure keine Seiten Transitionen definieren kann. Das heißt neue Seiten können immer nur ohne Transition dargestellt werden. Das einzige Element, was Ihnen Axure Tradition bietet, ist das dynamische Panel. Wenn Sie also Transitionen in Ihrem mobilen Prototyp abbilden wollen, müssen Sie Ihren Prototypen anders aufbauen. Anstatt Ihrem Prototyp Seitenbasiert zu bauen, müssen Ihr Prototyp auf Basis eines dynamischen erstellen. Das heißt, anstatt einzelner Seiten nutzen Sie jetzt Panel State, um die einzelnen Screens zu definieren und zu layouten. Das heißt die Struktur, die Sie vorher im Pagespeed erstellt haben, bilden Sie jetzt in einem dynamischen Panel auf den verschiedenen Panel States ab. Das heißt, so eine Struktur, wie ich hier auf der linken Seite habe mit einem Splash Screen, einer Homepage und einer Details-Seite lässt sich in einem dynamischen Panel, dass ich Prototyp genannt habe, mit verschiedenen Panel States, wie folgt abbilden. Dies hat natürlich einige Implikationen für die Erstellung Ihres Prototypen. Um zwischen in verschiedenen Seiten zu wechseln, nutzen Sie jetzt nicht mehr die Openpage-Funktionalität, sondern Sie nutzen die Set Panel State Aktion. Um dieses Vorgehen zu illustrieren, werde ich die Set Panel State Aktion nutzen, um die nächste Seite meines Prototypen zu öffnen. Ich nutze den OnClick Event und wähle die Set Panel State Aktion, wähle die Seite aus, zu der ich wechseln will und kann nun eine Animation definieren. In diesem Fall möchte ich von der Home Seite zu den Details wechseln und mein Screen soll nach links ausfahren und der Neue einfahren. Auf der Detailseite habe ich oben links ein Back Button angelegt, der mich zu der vorherigen Seite zurücken soll. Hier legen wir eine ähnliche Aktion an. Der einzige Unterschied ist, dass ich hier die Transitionsrichtung umkehre. Jetzt möchte ich noch, dass der Splash Screen nach 2 Sekunden ausgeblendet wird und der Home Screen dargestellt wird. Dazu nutze ich den OnLoad Event des dynamischen Panels und setze den fade Efect ein. Damit der Prototyp 2 Sekunden wartet, nutze ich die Wait-Aktion und gebe zwei Sekunden ein. So sieht unser Prototyp im Browser aus. Wie Sie sehen, funktionieren die Animationen und Transitionen. Auf mein Mobiltelefon sieht der Prototype, wie folgt aus. Nach 2 Sekunden wird der Splash Screen ausgeblendet und die Tradition funktionieren, wie erwartet. Das heißt, Sie können alle Animationen und Transitionen, die Axure besitzt, für mobile Prototypen nutzen, jedoch ändert sich die Art, wie Sie Ihre Prototypen bauen. Anstatt die Struktur Ihres Prototypen mit Pages abzubilden, nutzen Sie ein zentrales dynamisches Panel, und verteilen Ihre Seiten auf verschiedene Panel States. So sind Sie in der Lage Animation und Transitionen einzusetzen.

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!