Flow & Transition

Als Ausgangsbasis dient folgendes Figma Projekt.

Duplizieren Sie dieses zunächst in Ihren eigenen Workspace und arbeiten Sie anschließend an dieser Kopie weiter.

Step 1: Testing auf mobilem Endgerät

Installieren Sie die Mirror App auf ihrem mobilen Endgerät und richten Sie diese so ein, dass Sie Zugriff auf den Prototypen haben.

Step 2: Scrolling der Playlist hinzufügen

Passen Sie das Frame ‘playlist-portrait’ so an, dass die Playlist über die vertikale Achse scrollbar ist und der restliche Inhalt fixiert bleibt.

Step 3: Interkationen und Übergänge zwischen Frames erstellen

Erstellen Sie mithilfe des Prototyping-Tools Interaktionen, um die Navigation zwischen den einzelnen Frames zu ermöglichen. Fügen Sie zudem sinnvolle Übergänge hinzu, die die Benutzererfahrung verbessern.

Frame ‘overview potrait’
Bei einem Tap auf das Album-Cover von ‘99% Invisible’ soll der Frame ‘playlist-portrait’ angezeigt werden.

Frame ‘playlist-portrait’
Bei einem Tap auf den Back-Button oder einer Swipe-Geste nach rechts soll der Frame ‘overview-potrait’ angezeigt werden.

Step 4: Mikrointeraktionen erstellen

Erstellen Sie Interaktionen für den Play-/Pause-Button mit folgenden Verhalten:

1. Beim ersten Tap auf die Schaltfläche soll das Symbol von Play zu Pause wechseln.
2. Beim nächsten Tap soll das Symbol wieder von Pause zu Play wechseln.

Erstellen Sie Interaktionen für die Einträge der Playlist mit folgenden Verhalten:

1. Bei einem Touch down auf einen Eintrag soll dieser hervorgehoben werden, indem sich die Hintergrundfarbe des Eintrags ändert.
2. Bei einem Touch up soll die Hintergrundfarbe des Eintrags wieder in den ursprünglichen Zustand zurückgesetzt werden. Verwenden Sie Smart Animations, um den Farbwechsel fließend und ansprechend zu gestalten.