In diesem Workshop widmen wir uns der Gestaltung von Userinteraktion mit dem Schwerpunkt Interaktionsabläufe und Übergänge. In den meisten Anwendungen haben wir idealerweise keine Abfolge von statischen Screens, sondern versuchen, dem User die Benutzung mithilfe von sinnvollen Übergängen und Hervorhebungen zu erleichtern und seine Aufmerksamkeit zu lenken.
Schönes Beispiel zu Flow & Transition aus einem studentischen Screendesign Projekt aus dem WS20/21
Was muss ich mitbringen?
eigener Rechner mit Figma
Sehr gute Kenntnisse in Figma
Figma-Fertigkeiten
Hier stehen nur die Figma-Fertigkeiten, die neu dazukommen. Alles andere kennen Sie bereits aus den vorherigen Veranstaltungen.
Prototyp-Verbindungen: Im Prototype-Tab ziehen Sie eine Verbindung von einem Element zu einem anderen Frame. Dabei legen Sie fest, wann etwas passiert (z. B. On click) und was passiert (z. B. Navigate to).
Figma-Hilfe · Video
Übergänge (Animations): Für jede Verbindung wählen Sie eine Animation wie Dissolve, Move in, Push oder Slide in und die Richtung. Probieren Sie ruhig mehrere aus, denn je nach Übergang wirkt die Beziehung zwischen zwei Screens ganz anders.
Figma-Hilfe (englisch) · Video
Smart Animate: Smart Animate sucht in zwei Frames nach Ebenen mit gleichem Namen und animiert, was sich an ihnen ändert, etwa Position, Größe oder Farbe. Deshalb ist eine saubere Benennung hier besonders wichtig.
Figma-Hilfe · Video
Easing und Dauer: Über die Easing-Kurve (Ease out, Spring oder eine eigene Bezier-Kurve) und die Dauer bestimmen Sie, wie sich eine Animation anfühlt. Genau damit experimentieren Sie im Warm-up.
Figma-Hilfe (englisch) · Video
Interaktive Komponenten: Sie können die Varianten einer Komponente auch direkt miteinander verbinden, zum Beispiel den Favoriten-Button an und aus. Jede Instanz reagiert dann im Prototyp von selbst, ohne dass Sie dafür extra Screens bauen müssen.
Figma-Hilfe · Video
Prototyp auf dem Smartphone ansehen: Mit der Figma-App für iOS und Android öffnen Sie Ihren Prototyp direkt auf dem Handy und können ihn dort als Screencast aufnehmen. Übergänge und Timings fühlen sich auf dem Gerät oft anders an als am Rechner.
Figma-Hilfe (englisch) · Video
Prototyp teilen: Über „Share“ erzeugen Sie einen Link zu Ihrem Prototyp. Damit wir ihn bei der Abgabe öffnen können, muss dort „Anyone with the link“ eingestellt sein.
Figma-Hilfe
