Die Kurzfassung
- Gutes Motion Design beruht auf fünf Prinzipien: Gib jeder Bewegung einen Zweck, stimm ihr Timing ab, nutze Easing, ordne sie nach Wichtigkeit und setz so wenig wie möglich ein.
- Kleine Bewegungen in Oberflächen fühlen sich meist zwischen etwa 150 und 300 Millisekunden richtig an, größere Bewegungen und Auftritte brauchen länger.
- Was hereinkommt, sollte abbremsen, was hinausgeht, sollte beschleunigen, und endlose Loops sollten sich in gleichmäßigem Tempo bewegen.
- Bewegen sich mehrere Elemente, sollte sich das wichtigste zuerst bewegen, und immer nur eines sollte führen.
- Ein kleines Bewegungssystem aus drei Dauern und zwei oder drei Easing-Kurven hält die Bewegung einer Marke in jedem Stück einheitlich.
Auf dieser Seite
Motion-Design-Prinzipien sind die Faustregeln, die Bewegung natürlich statt zufällig wirken lassen. Die klassische Figurenanimation hat ihre berühmten zwölf, aufgeschrieben von den Disney-Animatoren Frank Thomas und Ollie Johnston in The Illusion of Life. Für Designarbeit wie Posts, Websites, Logos und Präsentationen leisten fünf fast die ganze Arbeit: Zweck, Timing, Easing, Hierarchie und Zurückhaltung. Du kannst sie nutzen, ohne je eine Animations-App zu öffnen.
Zweck: Jede Bewegung sollte eine Aufgabe haben
Bewegung ist laut. Alles, was sich bewegt, zieht den Blick an, also behauptest du mit jeder Bewegung, dass etwas gerade jetzt wichtig ist. Bevor du animierst, benenne die Aufgabe. Wenn du das nicht kannst, lass es stillstehen.
Bewegung mit Aufgabe
- Lenkt den Blick auf das eine, was zuerst gelesen werden soll
- Zeigt, woher etwas kam oder wohin es ging
- Bestätigt eine Aktion: gesendet, gespeichert, hinzugefügt
- Setzt mit einem langsamen Hintergrund eine Stimmung
Bewegung um ihrer selbst willen
- Jedes Element hüpft beim Erscheinen herein
- Text, der sich weiterbewegt, während du ihn liest
- Drehende Logos und pulsierende Buttons
- Übergänge, die dich warten lassen
Timing: wie lange Bewegung dauern sollte
Die Dauer ist das Prinzip, das die meisten falsch machen, meist zu langsam bei kleinen Dingen und zu schnell bei großen. Zwei Regeln helfen. Kleine, häufige Bewegungen sollten schnell sein, weil man sie ständig sieht. Bewegungen, die weiter reisen oder mehr verändern, sollten länger dauern, weil das Auge Zeit zum Folgen braucht.
| Art der Bewegung | Typische Dauer | Warum |
|---|---|---|
| Feedback bei Buttons und Schaltern | Etwa 100 bis 200 ms | Fühlt sich sofort an, bleibt aber sichtbar |
| Kleine Änderungen in der Oberfläche, Menüs | Etwa 200 bis 300 ms | Schnell genug, um niemanden aufzuhalten |
| Große Panels, Seitenwechsel | Etwa 300 bis 500 ms | Mehr Strecke braucht mehr Zeit |
| Text, der in einen Post oder ein Video kommt | Etwa 0,4 bis 1 s | Lang genug, um als Auftritt wahrgenommen zu werden |
| Hintergrund, der im Loop treibt | Viele Sekunden pro Zyklus | Stimmung, keine Information: Er sollte kaum auffallen |
Ein nützlicher Test: Wenn Leute die Animation selbst bemerken statt dessen, was sie zeigt, ist sie zu langsam oder zu groß. Wenn sie die Änderung ganz verpassen, ist sie zu schnell.
Easing: warum sich nichts mit konstantem Tempo bewegen sollte
Echte Gegenstände beschleunigen und bremsen ab. Bewegung mit einem konstanten Tempo, linear genannt, wirkt mechanisch, weil sich nichts auf der Welt so bewegt. Easing-Kurven fügen Beschleunigung und Abbremsen hinzu, und die richtige zu wählen ist einfach, sobald du drei Fälle kennst.
- Hereinkommen: Ease-out. Schnell ankommen und sanft zur Ruhe kommen, wie ein Auto, das vorfährt. Die meisten Auftritte nutzen das.
- Hinausgehen: Ease-in. Sanft starten und davonziehen. Abgänge dürfen auch kürzer sein als Auftritte.
- Bewegung innerhalb des Bildes: Ease-in-out. Sanft starten und sanft stoppen.
- Loops und Drehungen: linear. Durchgehende Bewegung sollte ein gleichmäßiges Tempo halten, sonst scheint sie an der Nahtstelle zu stocken.
.panel-enter {
transition: transform 300ms cubic-bezier(0, 0, 0.2, 1); /* ease out */
}
.panel-leave {
transition: transform 200ms cubic-bezier(0.4, 0, 1, 1); /* ease in, and shorter */
}
.background-drift {
animation: drift 20s linear infinite; /* steady loop */
}Hierarchie: Das Wichtige bewegt sich zuerst
Bewegung erzeugt eine Lesereihenfolge, so wie Größe und Gewicht in einem stehenden Design. Was sich zuerst bewegt, wird zuerst gelesen. Wenn mehrere Elemente animiert sind, staffle sie nach Wichtigkeit, mit einer kurzen Pause von etwa 50 bis 150 Millisekunden dazwischen, und lass immer nur ein Element führen. Visuelle Hierarchie behandelt die stehende Version derselben Idee.
In einer animierten Version dieser Story kommt zuerst die Überschrift, dann das Datum, dann die Details. Der Hintergrund behält darunter sein eigenes langsames Tempo.
- 1
Der Hintergrund kommt zur Ruhe
Das Feld bewegt sich schon langsam, wenn der Post erscheint. Es setzt die Stimmung, ohne gelesen werden zu wollen.
- 2
Die Überschrift tritt auf
Ein klarer Auftritt mit Ease-out, in unter einer Sekunde.
- 3
Die Nebenzeilen folgen
Label und Details kommen kurz danach, in Lesereihenfolge, mit kleinerer Bewegung.
- 4
Alles hält an
Die Worte stoppen und bleiben lange genug stehen, um gelesen zu werden. Nur der Hintergrund bewegt sich weiter.
Zurückhaltung: weniger Bewegung, als du denkst
Erst Stillstand gibt Bewegung Bedeutung. Wenn sich alles bewegt, sticht nichts heraus, und das Design wirkt nervös. Wähl eine führende Bewegung pro Stück, halte Wege kurz und lass Worte stehen, sobald sie angekommen sind. Bei Zurückhaltung geht es auch um Menschen: Manche empfinden Bewegung als unangenehm oder bekommen davon sogar Übelkeit, deshalb sollte jedes Stück auch mit ausgeschalteter Bewegung funktionieren. Reduzierte Bewegung erklärt, wie du das einplanst.
Konsistenz: ein kleines Bewegungssystem
Marken halten Farben und Schriften einheitlich; Bewegung verdient dieselbe Sorgfalt. Schreib ein winziges System auf und nutze es immer wieder: drei Dauern, zwei oder drei Easing-Kurven und eine Hausbewegung für Hintergründe. So erfindet nicht jedes neue Stück sein eigenes Tempo, und deine Bewegung wird wiedererkennbar, so wie es Bewegung für statische Marken beschreibt.
:root {
--motion-quick: 150ms;
--motion-base: 250ms;
--motion-slow: 400ms;
--ease-out: cubic-bezier(0, 0, 0.2, 1);
--ease-in: cubic-bezier(0.4, 0, 1, 1);
--ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
}
@media (prefers-reduced-motion: reduce) {
:root {
--motion-quick: 1ms;
--motion-base: 1ms;
--motion-slow: 1ms;
}
}Wende dieselben Prinzipien an, wenn du ein Logo, einen Post oder einen Website-Hero animierst. Animierte Logos und animierte Posts zeigen sie in Aktion.
Häufige Fragen
Was sind die Grundprinzipien des Motion Designs?
Für Designarbeit decken fünf das meiste ab: Gib jeder Bewegung einen Zweck, wähl eine sinnvolle Dauer, nutze Easing, ordne Bewegung nach Wichtigkeit und setz so wenig Bewegung wie möglich ein.
Wie lange sollte eine Animation dauern?
Kleines Feedback in Oberflächen funktioniert meist bei etwa 100 bis 300 Millisekunden, größere Bewegungen bei etwa 300 bis 500 Millisekunden und Textauftritte in Posts oder Videos bei etwa einer halben bis einer ganzen Sekunde.
Welches Easing sollte ich nutzen?
Ease-out für Dinge, die hereinkommen, Ease-in für Dinge, die hinausgehen, Ease-in-out für Bewegung innerhalb des Bildes und linear für endlose Loops.
Was sind die 12 Prinzipien der Animation?
Es sind Prinzipien der Figurenanimation, die die Disney-Animatoren Frank Thomas und Ollie Johnston in The Illusion of Life beschrieben haben. Timing und Easing, bei ihnen Slow in und Slow out genannt, lassen sich am direktesten auf Motion im Design übertragen.
Geschrieben von Gradiently
Das Team hinter Gradiently, einem Designtool rund um Marks: lebendige Farbverläufe, durch die alles, was du gestaltest, nach dir aussieht.
Unser Profil ansehen
