Framer-Tutorial: 7 einfache Mikrointeraktionen zur Verbesserung Ihrer Prototypen

Willkommen zum zweiten Teil unserer Framer-Tutorial-Reihe. Im letzten Artikel haben wir die Grundlagen der Verwendung von Framer im Designmodus sowie das Schreiben von einfachem Code kennengelernt, um unsere Designs zum Leben zu erwecken. In diesem Stück konzentrieren wir uns auf die Verwendung von Framer, um Mikrointeraktionen und animierte Übergänge zu erstellen. Wir zeigen Ihnen, wie Sie sieben nützliche Interaktionen für Ihre Prototypen erstellen.

Warum sollten Sie kleine Interaktionen prototypisieren?

Reibungslose Bewegungen, Zustandsänderungen und subtile Übergänge helfen einem Benutzer zu verstehen, wie er Ihre Benutzeroberfläche verwendet, indem Sie ihm Feedback zu bestimmten Aktionen geben. Oft spiegeln diese Übergänge reale Analoga wider (z. B. das Verschieben einer Schaltersteuerung) oder verwenden gängige Geräteinteraktionsmuster (z. B. Tippen zum Erweitern). In diesem Tutorial konzentrieren wir uns auf Interaktionen, die der Benutzeroberfläche den letzten Schliff verleihen, um das Verständnis zu fördern und beim Benutzer Freude zu wecken.

Schauen Sie sich die Beispiele unten an. Designer auf der ganzen Welt kreieren diese Mikrointeraktionen in verschiedenen Produkten.

Die 7 Prototypen

In diesem Tutorial gebe ich Ihnen einen Überblick über jede Mikrointeraktion und einige Code-Snippets. Wir verwenden verschiedene Techniken, sodass Sie diejenige auswählen können, die am besten zu Ihrem Produkt passt. Es gibt keinen „richtigen“ Weg, um etwas in Framer Studio zu erstellen – wie ich in meinem vorherigen Artikel erwähnt habe, gibt Framer Ihnen viel Freiheit, so zu erstellen, wie Sie es möchten.

Haben Sie solche Interaktionen schon einmal gesehen? Sicher, hast du! Sie sehen sie jeden Tag auf Ihrem Smartphone. Es ist Zeit, Ihre eigenen zu erstellen.

1. Aktionstaste

Die Aktionsschaltfläche repräsentiert oft die Hauptaktion des aktuellen Bildschirms. Manchmal enthält es mehrere Aktionen. Wir werden eine Interaktion für den zweiten Fall erstellen. Laden Sie den funktionierenden Prototyp hier herunter: https://framer.cloud/ShBnH

Schritt 1: Erstellen Sie drei kreisförmige Schaltflächen

Erstellen Sie zunächst eine kreisförmige Hauptschaltfläche mit einem Symbol darin und zwei kleinere Schaltflächen, die unter der Hauptschaltfläche platziert sind. Vergessen Sie nicht, alle diese Ebenen im Designmodus als interaktiv zu markieren (mit dem Zielindikator).

Schritt 2: Entwerfen Sie zwei Zustände für alle Ebenen

Erstellen Sie zwei verschiedene Zustände für die Ebenen. Verwenden Sie den folgenden Code, um die kleineren Schaltflächen über die Hauptschaltfläche zu bewegen und das Symbol um 45 ° zu drehen:

 button_1.states.a = y: 427 x: 246 width: 64 height: 64 button_2.states.a = y: 330 x: 246 width: 64 height: 64 icon.states.a = rotation: 45

Schritt 3: Fügen Sie ein Ereignis hinzu

Um diesen Prototyp animieren zu können, müssen wir ein Ereignis hinzufügen. Nachdem Sie auf die Aktionsschaltfläche getippt haben, ändern Sie den Status aller Ebenen:

 button.onTap -> button_1.stateCycle() button_2.stateCycle() icon.stateCycle()

Schritt 4: Frühlingsanimation

An dieser Stelle sieht die Animation sehr mechanisch aus. Um eine menschliche Note hinzuzufügen, fügen wir eine Frühlingsanimation für alle Ebenen hinzu:

 button_1.animationOptions = curve: Spring(tension: 170, friction: 12) button_2.animationOptions = delay: 0.05 curve: Spring(tension: 170, friction: 12) icon.animationOptions = curve: Spring(tension: 250, friction: 5)

Die Aktionstaste ist einsatzbereit!

2. Interaktive Schalter

Mit den folgenden Schritten können Sie Ihre eigene Schalterinteraktion erstellen. Laden Sie den funktionierenden Prototyp hier herunter: https://framer.cloud/ieypV

Schritt 1: Entwerfen Sie einen Schalterspielplatz

Sie benötigen nur zwei Dinge: den Schalter selbst, der mindestens zwei Ebenen (Hintergrund und Punkt) enthält, und einige Ebenen, die nach der Verwendung des Schalters animiert werden müssen.

Schritt 2: Zustände erstellen

Erinnern Sie sich noch aus dem ersten Artikel, wie man Zustände direkt in Framer Studio entwirft? Gestalten Sie Ihre Zustände wie Sie möchten, oder verwenden Sie meine Einstellungen:

 dot.states.a = x: 50 backgroundColor: "rgba(5,106,161,1)" switch_bg.states.a = backgroundColor: "rgba(0,136,205,1)" icon.states.a = opacity: 0 circle.states.a = x: 37 y: 183 width: 301 height: 301 circle_1.states.a = x: 20 y: 166 width: 337 height: 337

Schritt 3: Fügen Sie ein Ereignis hinzu

Damit der Prototyp funktioniert, müssen wir dem Schalter ein Ereignis hinzufügen. Nachdem wir auf den Schalter getippt haben, ändern wir den Status aller Ebenen:

 switch_1.onTap (event, layer) -> dot.stateCycle() switch_bg.stateCycle() circle.stateCycle() circle_1.stateCycle() icon.stateCycle()

Schritt 4: Passen Sie das Timing an

Um alles natürlicher zu machen, passen Sie die Zeit und Verzögerung aller Zustände an:

 dot.animationOptions = time: 0.2 switch_bg.animationOptions = time: 0.2 circle_1.animationOptions = time: 0.5 curve: Spring circle.animationOptions = time: 0.5 delay: 0.05 curve: Spring icon.animationOptions = time: 0.5 curve: Spring

Jetzt ist unser Prototyp fertig!

3. Wischaktion für Listenelemente

Dies ist eine typische Interaktion zum Entfernen, Archivieren oder Speichern von Elementen aus einer Liste. Wischen Sie nach links oder rechts, und ein Element wird weggeräumt. Laden Sie den Prototyp hier herunter: https://framer.cloud/rzMWP

Schritt 1: Erstellen Sie einen Prototyp im Entwurfsmodus

Wenn Sie möchten, können Sie Ihr eigenes Design verwenden. Sie müssen nur die gleiche Struktur der Schichten beibehalten. Wie Sie im obigen Bild sehen können, haben alle Listenelemente eine „Rückgängig“-Schaltfläche darunter.

Schritt 2: Elemente ziehbar machen

Der Einfachheit halber erstellen wir nur für das erste Listenelement eine Interaktion. Machen Sie zuerst das Listenelement ziehbar: item.draggable = true .

Sperren Sie dann die vertikale Achse: item.draggable.vertical = false .

Richten Sie die Einschränkungen des ziehbaren Bereichs ein: item.draggable.constraints

Und schließlich die Größe auf die Artikelgröße setzen: size: item .

So sieht der ganze Code aus:

 item.draggable = true item.draggable.vertical = false item.draggable.constraints = size: item

Jetzt können Sie nach links und rechts wischen, und das Element kehrt immer an seine ursprüngliche Position zurück.

Schritt 3: Zustand erstellen

Erstellen Sie als Nächstes den Status für das Listenelement, wenn es entfernt wird. Ich habe es einfach mit der X-Achse aus dem Bildschirm herausbewegt.

 item.states.a = x: -360

Schritt 4: Ändern Sie den Status nach dem Wischen

Schließlich müssen wir einen Trigger erstellen, um die Interaktion zu starten. Wenn wir das Element auf die linke Seite des Bildschirms ziehen, sollte es entfernt werden. Der Code wird wie folgt aussehen:

 item.onMove -> if item.x < -70 item.stateCycle("a")

In diesem Fall verwenden wir eine „if“-Anweisung. Der obige Code besagt im Grunde, wenn wir die Elementebene um mehr als 70 Pixel verschieben, ändern Sie den Elementstatus in den Status „a“. Informationen zu if-Anweisungen finden Sie in der Framer Studio-Dokumentation: https://framer.com/getstarted/programming/#conditional

Schritt 5: Aktion nach Tippen rückgängig machen

Wir sind mit dieser Interaktion fast fertig. Das Einzige, was übrig bleibt, ist, diese Aktion rückgängig zu machen:

 item_bg.onTap -> item.stateCycle("default")

Sie sollten diesen Code aus dem vorherigen Tutorial kennen.

Schritt 6 (optional): Passen Sie das Animationstiming an

Wenn Sie möchten, können Sie das Timing der Animation anpassen:

 item.animationOptions = time: 0.75 curve: Spring

4. Schaltflächenlader

Dies ist eine sehr nützliche Interaktion für Aktionen, die Lade- oder Wartezeiten für den Benutzer erfordern. Wenn wir diese Interaktion erstellen, lernen Sie, wie Sie viele Animationen verwalten, die nacheinander ablaufen. Laden Sie den Prototyp hier herunter: https://framer.cloud/FxmHN

Schritt 1: Erstellen Sie einen Prototyp im Entwurfsmodus

Erstellen Sie eine einfache Schaltfläche mit vier Unterebenen: einem Fortschrittsbalken und drei Symbolen für verschiedene Zustände. Ich habe meine Schaltfläche mit einem sichtbaren Upload-Symbol, einem Fortschrittsbalken unten mit einer Breite von 0 und zwei weiteren versteckten Symbolen gestaltet.

Schritt 2: Fügen Sie ein Ereignis hinzu

Dieser ganze Prototyp kann erstellt werden, ohne eine einzige Codezeile zu schreiben, indem man einfach die Autocode-Funktionen von Framer verwendet.

Fügen Sie zuerst ein Ereignis hinzu. Wir lösen die gesamte Interaktion mit einem Tippen auf die Schaltflächenebene aus:

Dies ist der Code, den Framer für Sie geschrieben hat:

 button.onTap (event, layer) ->

Schritt 3: Animationen entwerfen

Wir werden die Autocode-Funktionen von Framer verwenden, um alle Animationen zu entwerfen:

Ich habe vier Animationen mit unterschiedlichem Timing entworfen:

• Die erste Animation ändert die Breite des Fortschrittsbalkens.
• Das zweite ist das Ausblenden des Upload-Symbols mit Deckkraft.
• Der dritte dreht sich und zeigt das Ladesymbol.
• Der letzte zeigt und skaliert das Häkchen-Symbol.

Hier ist der Code, den Framer für jede dieser Animationen geschrieben hat:

 # change progress bar width progress.animate width: 247 options: time: 1.4 curve: Bezier.ease # hide upload icon upload.animate opacity: 0.00 y: 39 options: time: 0.2 curve: Bezier.ease # show and rotate loader icon load.animate opacity: 1.00 rotation: 360 options: time: 1 curve: Bezier.ease # show and scale check icon done.animate opacity: 1.00 scale: 1.4 options: time: 0.2 curve: Bezier.ease delay: 1.00

Schritt 4: Ladeanimation zurücksetzen

Wie Sie vielleicht bemerkt haben, haben wir das Ladesymbol nach Abschluss der Animation nicht ausgeblendet. Um diesen Prototyp fertigzustellen, lösen Sie eine weitere Animation mit diesem Ereignis aus: load.onAnimationEnd ->

 load.animate opacity: 0.00 options: time: 0.2 curve: Bezier.ease

5. Zum Aktualisieren ziehen

Fast jedes einzelne Produkt mit einer darin enthaltenen Liste verwendet diese Art der Interaktion. Der Benutzer zieht die gesamte Liste herunter, um sie zu aktualisieren. Es ist sehr einfach zu erstellen. Laden Sie den Prototyp hier herunter: https://framer.cloud/DgMDw

Schritt 1: Entwerfen Sie eine einfache Liste mit Aktualisierungssymbol

Wir können direkt in den Designmodus springen. Wir brauchen zwei Dinge: eine Liste und ein Aktualisierungssymbol. Das Entscheidende hier ist, das Aktualisierungssymbol mit Deckkraft auszublenden und auf unsere Liste zu setzen:

Schritt 2: Erstellen Sie eine Scroll-Komponente

Wir wollen unsere Liste scrollbar machen. Verwenden Sie dazu eine Bildlaufkomponente und fügen Sie ihr eine Listenebene hinzu:

 scroll = new ScrollComponent size: Screen scrollHorizontal: false list.parent = scroll.content

Schritt 3: Machen Sie das Aktualisierungssymbol sichtbar

Erstellen Sie einen einfachen Status für das Symbol:

 icon.states.a = opacity: 1

Schritt 4: Fügen Sie nach dem Herunterziehen ein Ereignis hinzu

Unsere Liste ist jetzt scrollbar. Das heißt, wenn wir nach oben oder unten scrollen, bewegt sich der gesamte Scroll-Inhalt auf der 'y'-Achse. Mit diesem Wissen können wir ein Event erstellen:

 scroll.content.onMove -> if scroll.content.y > 180 icon.stateCycle("a")

Auch hier verwenden wir eine „if“-Anweisung. Wenn die Liste um mehr als 180 Pixel nach unten gezogen (auf der Y-Achse verschoben) wird, lösen wir eine Aktion aus. In diesem Fall animieren wir zwei Ebenen: die Liste und das Aktualisierungssymbol.

 scroll.content.onMove -> if scroll.content.y > 180 icon.stateCycle("a") list.animate y: 210 options: time: 1 curve: Bezier.ease refresh.animate rotation: 360 options: time: 1

Wir verwenden „Animieren“, um die Liste um 210 Pixel nach unten zu verschieben und das Aktualisierungssymbol um 360° zu drehen.

Schritt 5: Alle Zustände zurücksetzen

Der Prototyp funktioniert fast, aber wir müssen alle Ebenen nach der Aktualisierungsanimation zurücksetzen. Dazu verwenden wir ein Ereignis nach dem Ende der Animation:

 icon.onAnimationEnd ->

Wir animieren die Drehung des Aktualisierungssymbols zurück in seine ursprüngliche Position und setzen mithilfe des Zustandszyklus den Hintergrundzustand der Liste und des Symbols zurück:

 scroll.content.onMove -> if scroll.content.y > 180 icon.stateCycle("a") list.animate y: 210 options: time: 1 curve: Bezier.ease refresh.animate rotation: 360 options: time: 1 icon.onAnimationEnd -> refresh.animate rotation: 0 list.stateCycle("default") icon.stateCycle("default")

Das ist es!

6. Interaktion ziehen

Ist Ihnen schon einmal aufgefallen, dass beim Ziehen eines Elements in eine App immer etwas mit dem Element selbst passiert? Manchmal schrumpft das Element, andere Elemente sind möglicherweise verschwommen oder die Deckkraft ändert sich. Lassen Sie uns lernen, wie man diese Art von Interaktion erstellt. Laden Sie den funktionierenden Prototyp hier herunter: https://framer.cloud/YstiW

Schritt 1: Gestalten Sie ein einfaches Raster mit Kacheln

Erstellen Sie ein Raster aus Kacheln und stellen Sie sicher, dass sie sich innerhalb des übergeordneten Elements befinden.

Schritt 2: Verwenden Sie die „for“-Schleife, um alle Kacheln anzuvisieren

„ for -Schleife“ mag beängstigend klingen, aber es ist wirklich einfach. Wenn Sie mit for -Schleifen nicht vertraut sind, können Sie zuerst ein wenig Hintergrund lesen: https://framer.com/getstarted/programming/#loops-and-arrays

Wir werden die for -Schleife verwenden, um alle Kacheln in unserem Raster anzuvisieren:

 for item in grid.subLayers

Mit dieser einfachen Codezeile haben Sie alle Ebenen innerhalb der Gitterebene anvisiert.

Schritt 3: Kacheln ziehbar machen

Machen Sie jedes Element innerhalb des Rasters ziehbar:

 for item in grid.subLayers item.draggable = true

Schritt 4: Entwerfen Sie einen Ziehzustand

Alle Elemente sollten einen Status haben, während sie gezogen werden. Sie müssen mit Code beginnen, aber später können Sie diesen Zustand im Layer-Editor bearbeiten:

 for item in grid.subLayers item.draggable = true item.states.a = scale: 1.1 shadowBlur: 50 shadowColor: 'rgba(0,0,0,0.5)'

Schritt 5: Ereignisse ziehen

Wir müssen Ereignisse erstellen, um verschiedene Zustände auszulösen, während das Element gezogen wird. Das erste Ereignis löst eine Aktion aus, während wir mit dem Ziehen beginnen:

 for item in grid.subLayers item.draggable = true item.states.a = scale: 1.1 shadowBlur: 50 shadowColor: 'rgba(0,0,0,0.5)' item.onDragStart -> this.bringToFront() this.stateCycle("a")

Ich habe this.bringToFront() verwendet, um sicherzustellen, dass sich das Element immer über den anderen Ebenen befindet.

Der zweite Auslöser setzt den Status des Elements zurück:

 for item in grid.subLayers item.draggable = true item.states.a = scale: 1.1 shadowBlur: 50 shadowColor: 'rgba(0,0,0,0.5)' item.onDragStart -> this.bringToFront() this.stateCycle("a") item.onDragEnd -> this.sendToBack() this.stateCycle("default")

An diesem Punkt haben wir einen funktionierenden Prototypen.

Schritt 6 (optional): Spielen Sie mit dem Timing

Interaktion findet immer entlang einer Zeitachse statt. Es ist gut, die Zeitachse anzupassen, um einen perfekten Effekt zu erzielen:

 for item in grid.subLayers item.draggable = true item.states.a = scale: 1.1 shadowBlur: 50 shadowColor: 'rgba(0,0,0,0.5)' item.onDragStart -> this.bringToFront() this.stateCycle("a") item.onDragEnd -> this.sendToBack() this.stateCycle("default") item.animationOptions = time: 0.3 curve: Spring

7. Mehrere „Gefällt mir“-Buttons (erweitert)

In diesem Prototyp werden wir fortgeschrittenere Techniken verwenden, um Ihnen eine andere Art der Ausrichtung von Ebenen in Framer Studio zu zeigen, wodurch reaktionsschnellere Interaktionen in kürzerer Zeit erstellt werden. Wenn Sie mit der grundlegenden Codierung nicht vertraut sind, empfehle ich Ihnen, zuerst diesen Artikel zu lesen: https://blog.framer.com/code-less-achieve-more-with-arrays-in-framer-c43594d13d59

Für diese Interaktion überspringen wir den Designteil und verwenden einen Prototyp, den ich speziell für diesen Artikel erstellt habe: https://framer.cloud/SZMCH

Schritt 1: Erstellen Sie Arrays

Werfen Sie einen Blick auf die Struktur der Ebenen in Framer Studio:

Wir haben eine „Schaltfläche“ innerhalb einer „Zeile“ in der Gruppe „Liste“. Wir werden eine Interaktion auf den Schaltflächenebenen erstellen, also müssen wir sie anvisieren. Aber zuerst müssen wir alle Zeilenschichten finden und sie in ein Array einfügen:

 rows = list.children buttons = []

Ich habe auch ein leeres Array für alle „Button“-Ebenen erstellt: buttons = [] .

Schritt 2: Fügen Sie dem Array eine Unterebene hinzu

Beginnen wir mit der „for-Schleife“:

 for i in rows buttons.push(i.children[0])

Um dem Array Ebenen hinzuzufügen, verwenden wir: buttons.push() . Das bedeutet, dass wir die erste Ebene jeder „Zeilen“-Gruppe in ein Array einfügen.

Schritt 3: Zustand und Ereignis erstellen

Jetzt erstellen wir einen Zustand für unsere „Gefällt mir“-Schaltflächen und fügen ihnen beim Antippen ein Ereignis hinzu:

 for i in buttons i.states.a = scale: 1.2 hueRotate: -80 i.onTap -> this.stateCycle() i.animationOptions = time: 0.3 curve: Spring

Sie können diese Technik verwenden, um alle vorherigen Prototypen neu zu erstellen und sie komplexer zu machen.

Schlussbemerkung

Wenn Sie Mikrointeraktionen erstellen, konzentrieren Sie sich auf die kleinsten Details. Sie können Animationen erstellen, die durch jede Art von Aktion ausgelöst werden, und sie absolut perfekt machen. Denken Sie daran, dass es Hunderte von Möglichkeiten gibt, denselben Prototyp zu erstellen, und Sie sollten die Methode verwenden, die Ihren Fähigkeiten und den Anforderungen Ihrer Produktdesigns entspricht.

• • •

Weiterführende Literatur im Toptal Design Blog:

• eCommerce UX – Best Practices im Überblick (mit Infografik)
• Die Bedeutung von Human-Centered Design im Produktdesign
• Die besten UX-Designer-Portfolios – inspirierende Fallstudien und Beispiele
• Heuristische Prinzipien für mobile Schnittstellen
• Antizipatorisches Design: Wie man magische Benutzererlebnisse schafft