Basiselemente

Motion-Prinzipien

Die Bewegungen in unseren Videos, Animationen und Benutzeroberflächen sollten geradlinig und direkt, dynamisch und schnell, eindeutig und relevant sein. In diesem Guide erhalten Sie einen Überblick über unsere Animationsprinzipien sowie eine Liste der „Dos and Don’ts“, was deren Anwendung betrifft.

Motion-Prinzipien
  • Prinzipien
  • Easing und Anzeigedauer
  • Dos and Don’ts

Prinzipien

Bewegung ist geradlinig und direkt

Genau wie unser Layoutprinzip und unser Verlaufsmodul sind auch unsere bewegten Grafiken horizontal oder vertikal ausgerichtet.

Bewegung ist dynamisch und schnell

Unsere Bewegungen sind inspiriert von der Kraft der Natur und sollten natürlich und realistisch wirken. Gestalten Sie Ihre Animationen schnell genug, um unnötig lange Wartezeiten zu vermeiden, aber nicht zu schnell, damit der Betrachter nicht verwirrt wird.

Bewegung ist eindeutig und relevant

Bewegung dient der Orientierung. Sie führt das Auge des Betrachters gezielt auf den Schwerpunkt. Schaffen Sie klare Bewegungsabläufe für den Betrachter und überfordern Sie ihn nicht mit zu vielen Eindrücken.

Easing und Anzeigedauer

Wenden Sie eine natürliche Easing-Kurve auf alle bewegten Grafiken an. So können Ihre Bewegungselemente schneller oder langsamer werden. Die Anzeigedauer ist abhängig von der Größe der Elemente und der zurückgelegten Distanz. Wenden Sie eine Ease-out-Kurve auf einblendende Elemente und eine Ease-in-Kurve auf ausblendende Elemente an. Um eine reaktionsschnelle Benutzeroberfläche zu schaffen, wenden Sie eine Ease-out-Kurve auf benutzeraktivierte Bewegungen in Animationen an.

Ease-out-Kurve

Ease-in-Kurve

Dos and Don’ts

Animieren Sie Grafiken mit einer natürlichen Easing-Kurve (ease-in und ease-out).

Vermeiden Sie zitternde Bewegungen.

Gestalten Sie Bewegungen schnell genug, um unnötig lange Wartezeiten zu vermeiden.

Verlangsamen Sie Bewegungen nicht so stark, dass unnötige Wartezeiten entstehen.

Richten Sie bewegte Grafiken horizontal oder vertikal aus.

Vermeiden Sie diagonale Bewegungen.