Folge uns auf Twitter

Folge uns auf Twitter

Es lohnt sich, Ahadesign aufTwitterzu folgen, um keine Neuigkeiten zu Bildbearbeitung, Webdesign Tutorials, Reviews, Testberichte, News, Downloads und Verlosungen zu verpassen. Wer Twitter nicht mag oder eine zusätzliche Möglichkeit sucht, um immer auf dem neuesten Stand zu sein, kann auch gerne denAhadesign-RSS-Feedkostenfrei abonnieren.

SeedingUp | Digital Content Marketing


7 einfache Mikrointeraktionen zur Verbesserung von Prototypen!

Ahadesign Tutorials

framer-tutorialIn diesem Framer-Tutorial geht es um das Erstellen von Mikrointeraktionen und animierten Übergängen. Anhand von sieben Beispielen werden nützliche Interaktionen für Prototypen erstellt. Das im englischen Original bei Toptal.com erschienene Framer-Tutorial über Mikrointeraktionen stammt von dem Designer Wojciech Dobry und soll hier auch dem deutschsprachigen Publikum zugänglich gemacht werden.

Warum sollte man Prototypen auch für kleinere Interaktionen nutzen?

Saubere Bewegungen, Statusänderungen und dezente Übergänge helfen dem Anwender bei der Nutzung eines Interface und geben ihm sinnvolle Rückmeldungen bei seinen Aktionen. Oft entsprechen diese Übergänge den realen Vorgängen aus der analogen Welt, wie z.B. Schieberegler. In diesem Tutorial geht es um Interaktionen, die dem Interface einen Feinschliff geben und damit den Anwender sinnvoll an die Hand nehmen.

Designer in aller Welt erstellen Mikrointeraktionen für alle möglichen Produkte, wie folgende Beispiele zeigen.

interaktionen

Prototypen von Artem Litvin, Johny Vino, Marcin Michalak (Contrabook)

Die sieben Prototypen

Dieses Tutorial zeigt eine Übersicht zu jeder Mikrointeraktion und diverse Code-Ausschnitte. Es werden verschiedene Techniken gezeigt, welche später gezielt für eigene Produkte verwendet werden können. Es gibt keinen "richtigen Weg", um etwas in Framer-Studio zu erstellen. Framer bietet viele Freiheiten, um ganz nach eigenen Wünschen voran zu kommen.

prototypen

Sicher sind Interaktionen wie diese bereits bekannt. Man begegnet ihnen jeden Tag auf dem eigenen Smartphone. Jetzt ist es Zeit, eigene zu erstellen.

1. Aktions-Button

Der Aktions-Button repräsentiert meist die Hauptaktion des gegenwärtigen Bildschirms. Manchmal beinhaltet er noch weitere Aktionen, worum es hier auch gehen soll. Hier gibt es den Download des funktionierenden Prototyps.

kreisfoermige-buttons

Schritt 1: Erstellen von drei kreisförmigen Buttons

Für den Anfang wird als Basis zunächst ein kreisförmiger Button mit darin befindlichem Icon und zwei kleinere Buttons unterhalb des Haupt-Buttons erstellt. Dabei sollte man nicht vergessen, sämtliche Ebenen im Design-Modus mit dem Target Indicator als Interaktiv zu markieren.

framer-interaktive-ebenen

Schritt 2: Zwei unterschiedliche Zustände für alle Ebenen

Nun werden zwei abweichende Zustände für die Ebenen erstellt. Um die kleinen Buttons über den Hauptbutton zu bekommen und das Icon um 45 Grad zu drehen, kann nachfolgender Code verwendet werden.

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: Ein Ereignis hinzufügen

Um diesen Prototyp zu animieren, muss ein Ereignis hinzugefügt werden. Nach dem Antippen des Aktions-Buttons ändert sich der Status von allen Ebenen.

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

Schritt 4: Sprung-Animation

sprunganimation

Bisher sieht die Animation sehr mechanisch aus. Für mehr Natürlichkeit wird jetzt eine Sprung-Animation für alle Ebenen hinzugefügt.

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)

Nun ist der Aktionsbutton fertig zur Verwendung.

aktionsbuttons-fertig

2. Interaktives Switchen

Die nachfolgenden Schritte ermöglichen das Erstellen von eigenen Switch-Interaktionen. Hier gibt es den Download zum fertigen Prototype.

switches

Schritt 1: Eine Oberfläche für den Switch erstellen

switch-oberflaeche

Es werden lediglich ein paar Dinge benötigt. Zum einen der Switch selbst, welcher zwei Ebenen für Hintergrund und Punkt beinhaltet und einige Ebenen für die Animation, welche nach Verwendung des Switch ausgelöst wird.

Schritt 2: Zustände erstellen

Zustände lassen sich direkt im Framer Studio erstellen. Nachfolgender Code kann natürlich auf die eigenen Bedürfnisse angepasst werden.

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: Ein Ereignis hinzufügen

Damit der Prototyp funktioniert, muss dem Switch ein Ereignis zugewiesen werden. Nach dem Antippen des Switch sollen sich die Zustände aller Ebenen ändern.

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

Schritt 4: Einstellen der Zeiteinteilungen

Um alles etwas natürlicher wirken zu lassen, wird die Zeit und Verzögerung von allen Zuständen definiert.

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

Damit ist auch dieser Prototyp fertig!

3. Listen-Element Wischaktion

Es folgt die typische Interaktion zum Löschen, Archivieren oder Speichern von Listenelementen. Mit dem Wischen nach links oder rechts, wird ein Element weggeschoben. Download des Prototypen.

wischen

Schritt 1: Erstellung eines Prototypen im Design-Modus

prototyp-design-modus

Auch hier kann natürlich jeder sein eigenes Design verwenden. Lediglich die hier gezeigte Struktur der Ebenen sollte beibehalten werden. Wie man im oberen Screenshot sieht, haben alle Listenelemente einen Rückgängig-Button unterhalb.

Schritt 2: Elemente verschiebbar machen

Um es einfach zu halten, wird eine Interaktion nur für das erste Listenelement erstellt. Zunächst wird das Listenelement folgendermaßen verschiebbar gemacht:

item.draggable = true

Dann wird die vertikale Achse geschützt:

item.draggable.vertical = false

Nun werden die Abmessungen für den verschiebbaren Bereich definiert:

item.draggable.constraints

Und schließlich wird die Größe für das Element passend gesetzt:

size: item

Der gesamte Code sieht dann so aus:

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

Jetzt lässt sich links und rechts wischen und das Element kommt stets zu seiner originalen Position zurück.

Schritt 3: Status erstellen

Als nächstes wird der Status für das entfernte Listenelement erstellt. Hier wird das Element dazu einfach über die X-Achse außerhalb des Bildschirms bewegt.

item.states.a =  	
			x: -360

Schritt 4: Statusänderung nach dem Wischen

Zum Schluss muss noch ein Auslöser für den Start der Interaktion erstellt werden. Wird das Element zur linken Seite des Bildschirms geschoben, soll es entfernt werden. Der Code dafür sieht dann so aus:

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

In diesem Fall kommt ein If-Statement zur Anwendung. Der hier gezeigte Code bewirkt bei einem Verschieben von mehr als 70 Pixel eine Statusänderung nach "a". Mehr zu den If-Statements sind in der Framer-Dokumentation zu finden.

Schritt 5: Rückgängig-Aktion nach dem Tap

Das Meiste wurde mit dieser Interaktion bereits berücksichtigt. Das Einzige was noch fehlt, ist das Rückgängig machen dieser Aktion.

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

Nach dem Lesen des vorigen Tutorials sollte der hier gezeigte Code kein Problem mehr darstellen.

Schritt 6 (Optional): Zeiteinstellungen für die Animation

Wer möchte, kann noch das Timing der Animation zum Beispiel wie folgt anpassen:

item.animationOptions =
			time: 0.75
			curve: Spring

4. Button-Loader

Jetzt geht es um eine sehr nützliche Interaktion für Aktionen die eine Ladezeit benötigen, die der Anwender abwarten muss. Bei der Erstellung dieser Interaktion wird deutlich, wie viele nacheinander ablaufende Animationen gehandhabt werden können. Download des Prototypen.

button-loader

Schritt 1: Erstellen eines Prototypen im Design-Modus

Erstellung eines einfachen Buttons mit vier Unterebenen: Ein Fortschrittsbalken und drei Icons für unterschiedliche Verhalten. Hier wird der Button mit einem sichtbaren Upload-Icon, einer unten mit einer Breite von 0 dargestellten Fortschrittsanzeige und zwei weiteren versteckten Icons umgesetzt.

button-framer

Schritt 2: Ein Ereignis hinzufügen

Dieser gesamte Prototyp kann dank der Autocode-Funktionen von Framer ohne eine einzige Zeile Code verwirklicht werden.

Als erstes wird ein Event hinzugefügt. Die komplette Interaktion wird mit einem Tap auf der Button-Ebene ausgelöst.

buttonebene-tap

Framer schreibt dann folgenden Code:

button.onTap (event, layer) ->

Schritt 3: Design-Animation

Jetzt werden die Autocode-Funktionen von Framer für die Erstellung aller Animationen genutzt.

framer-autocode-funktionen

Die vier Animationen erhalten unterschiedliche Definitionen für das Timing:

  • Die erste Animation ändert die Breite der Fortschrittsanzeige
  • Die zweite Animation versteckt das Upload-Icon mit Transparenz
  • Die dritte Animation dreht und zeigt das Loader-Icon an
  • Die letzte Animation zeigt und skaliert das Check-Icon

 

Für jede dieser Animationen erstellt Framer folgenden Code:

# 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 sicher aufgefallen ist, wurde das Loader-Icon nach Ablauf der Animation nicht versteckt. Deshalb muss noch eine andere Animation mit folgendem Event ausgelöst werden: load.onAnimationEnd ->

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

5. Herunterziehen zum Aktualisieren

In den allermeisten Fällen kommt für die Aktualisierung von Listen die nachfolgend gezeigte Interaktion zum Einsatz. Der Anwender zieht die gesamte Liste nach unten um sie aktualisiert anzuzeigen. Das lässt sich recht leicht umsetzen. Download des Prototypen.

refresh

Schritt 1: Erstellung einer einfachen Liste mit Refresh-Icon

Auch hier kann es direkt im Design-Modus losgehen. Zwei Dinge werden benötigt. Eine Liste und ein Icon für die Aktualisierung. Der hier entscheidende Punkt ist das Verstecken des Refresh-Icons mit Opazität und die Platzierung des Icons auf der Liste.

list-refresh-icon

Schritt 2: Erzeugen einer Scroll-Komponente

Nun soll die Liste scrollbar sein. Um das zu erreichen, wird eine Scroll-Komponente verwendet und dieser eine Listenebene hinzugefügt.

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

Schritt 3: Das Refresh-Icon sichtbar machen

Ein einfacher Status wird für das Icon definiert:

icon.states.a =
			opacity: 1

Schritt 4: Hinzufügen eines Events nach dem Herunterziehen

Die Liste kann jetzt gescrollt werden. Das bedeutet also, dass sich der gesamte Inhalt auf der Y-Achse bewegt, wenn nach oben oder unten gescrollt wird. Mit diesem Wissen kann ein Event wie folgt erstellt werden:

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

Wieder wird ein If-Statement verwendet. Wird die Liste mehr als 180 Pixel nach unten gezogen, also auf der Y-Achse bewegt, soll eine Auslöseaktion starten. In diesem Fall werden zwei Ebenen animiert, die Liste und das Refresh-Icon.

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

Hier wird "animate" verwendet, um die Liste um 210 Pixel nach unten zu bewegen und das Refresh-Icon um 360 Grad zu drehen.

Schritt 5: Zurücksetzen aller Verhalten

Prinzipiell funktioniert der Prototyp bereits, allerdings müssen noch alle Ebenen nach der Refresh-Animation zurückgesetzt werden. Um das zu erreichen, wird ein Event nach dem Ende der Animation genutzt:

 icon.onAnimationEnd ->

Die Rotation des Refresh-Icon zurück in seine ursprüngliche Position wird nun animiert und mit state cycle werden der Status der Liste und des Icon-Hintergrunds zurückgesetzt.

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")

Damit ist alles erledigt.

6. Ziehen Interaktion

Bewegt man ein Element innerhalb der App, können verschiedene Verhalten auftreten. Manchmal schrumpft es, andere Elemente werden unscharf oder die Transparenz verändert sich. Nachfolgend wird gezeigt, wie diese Art der Interaktion realisiert wird. Download des fertigen Prototypen.

dragging

Schritt 1: Erstellen eines einfachen Rasters mit Kacheln.

Zunächst wird ein Raster mit Kacheln erstellt, welche innerhalb des Elternelements liegen.

kachelraster

Schritt 2: Verwendung einer "for"-Schleife um alle Kacheln zu adressieren.

For-Schleife klingt vielleicht etwas kompliziert, ist aber wirklich einfach. Wer mit solchen Schleifen gar nichts anfangen kann, sollte sich besser erst die Grundlagen dazu aneignen.

https://framer.com/getstarted/programming/#loops-and-arrays

Mit der For-Schleife werden jetzt also alle Kacheln innerhalb des Rasters angesprochen.

for item in grid.subLayers

Diese einfache einzelne Zeile reicht völlig aus, um die Kacheln innerhalb des Rasters anzusprechen.

Schritt 3: Die Kacheln bewegbar machen

Jedes einzelne Element innerhalb des Rasters wird bewegbar gemacht.

for item in grid.subLayers
		item.draggable = true

Schritt 4: Erstellen eines Bewegungs-Status

Alle Elemente sollten während der Bewegung einen Status erhalten. Zunächst muss etwas Code geschrieben werden. Später ist es aber möglich, für Bearbeitungen den Ebenen-Editor zu verwenden.

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: Drag Events

Um unterschiedliche Verhalten während des Bewegens eines Elements auslösen zu können, müssen Events erstellt werden. Das erste Event löst eine Aktion bei Start der Bewegung aus:

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")

Um sicherzustellen, dass das Element stets über den anderen Ebenen liegt, wird hier "this.bringToFront()" verwendet.

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")

Ab diesem Punkt ist ein funktionierender Prototyp entstanden.

Schritt 6 (Optional): Mit dem Timing spielen

Interaktionen laufen immer entlang einer Zeitschiene ab. Für einen perfekten Effekt empfiehlt es sich, diese zu justieren.

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 "like"-Buttons (Fortgeschritten)

Für den folgenden Prototypen kommen fortgeschrittenere Techniken zum Einsatz, welche unterschiedliche Wege zum Ansprechen von Ebenen in Framer Studio aufzeigen und den Aufbau responsiver Interaktionen in kürzerer Zeit erlauben. Wer sich mit dem grundlegenden Coding nicht auskennt, kann sich in folgendem Artikel schlau machen:

https://blog.framer.com/code-less-achieve-more-with-arrays-in-framer-c43594d13d59

Für diese Interaktion wird auf den Design-Teil verzichtet und ein speziell für diesen Artikel erstellter Prototyp verwendet.

https://framer.cloud/SZMCH

multiple-likebuttons

Schritt 1: Felder erstellen

Hier ein Blick auf die Struktur der Ebenen innerhalb des Framer Studio:

ebenenstruktur-framer

Hier gibt es ein "button" innerhalb einer "row" in der Gruppe "list". Eine Interaktion auf den Button-Ebenen soll verwirklicht werden, weshalb diese entsprechend angesprochen werden müssen. Zuerst müssen allerdings alle ROW-Ebenen gefunden und in ein Array gebracht werden.

rows = list.children

buttons = []

Ein leeres Feld für alle "button"-Ebenen wurde also erstellt.

buttons = []

Schritt 2: Hinzufügen einer Unterebene zum Array

Das beginnt mit einer For-Schleife:

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

Um dem Array Ebenen hinzuzufügen, wird buttons.push() verwendet. So wird also die erste Ebene einer jeden row-Gruppe in das Array gebracht.

Schritt 3: Status und Event erstellen

Jetzt wird ein Status für die Like-Buttons und ein Event bei Betätigung der Buttons erstellt.

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

Diese Technik kann auch für die vorhergehend besprochenen Prototypen verwendet werden, um diese noch komplexer zu gestalten.

Schlussbemerkung

Beim Erstellen von Mikrointeraktionen achtet man auf feinste Details. Auf viele Arten von Aktionen ausgelöste Animationen können absolut perfekt erstellt werden. Man sollte die hunderten Möglichkeiten zum Erstellen des gleichen Prototypen im Kopf behalten und die Methoden nutzen, welche einem am besten liegen und die für das Design notwendig sind.

Viele weitere Tutorials auch zu Framer, sind stets bei Toptal.com in englischer Sprache zu finden.

Die Kommentarfunktion steht während unseres Urlaubs kurzzeitig bis 06.08.2017 aus Sicherheitsgründen nicht zur Verfügung.