Animation Guidelines

10/10
Beglei­ten­de Ani­ma­tion

K Auf den Punkt gebracht

Umliegende Elemente eines animierten Elements reagieren auf dessen Animation.

K Grundlagen

In Interfaces kann es vorkommen, dass zwei Aktionen gleichzeitig ablaufen. Das ist zum Beispiel der Fall, wenn die umliegenden Elemente eines animierten Elements auf dessen Animation reagieren. Die Nebenaktionen finden parallel zur Hauptaktion statt, bleiben aber immer untergeordnet und im Hintergrund.

K Beispiele

Drag and Drop

Drag and Drop-Aktionen sind Vorgänge, bei denen begleitende Animationen häufig angewendet werden. Die umliegenden Elemente des Elements, das bewegt wird, reagieren auf dessen Bewegungen. Sie machen Platz für das neue Element oder verändern ihre Farbe.

Slider

Ebenfalls ein typischer Anwendungsfall für begleitende Animationen sind Slider. Häufig wird der sich verändernde Wert zweimal dargestellt. Als Zahl und als individuelles Objekt. Beide verändern sich in Abhängigkeit vom Regler. Dabei sind die Zahlen meist die Hauptaktion. Die individuellen Objekte begleiten diese Aktion nur.

K Quellen

Animation principles for UX and UI designers

Artikel

The illusion of life – Disney animation

10 - Begleitende Animation

Übertreibung

Animationen besonders wichtiger Elemente werden übertrieben dargestellt, um die Aufmerksamkeit des Nutzers zu erhalten.

#

02 - Dauer

Grund

Animationen dienen der Verbesserung der User Experience. Deshalb muss jede Animation einen funktionalen Grund haben.

$

Logo Ani

Quellen About