Wie lange sollte eine UI-Animation dauern?
Praktische Dauerbereiche für UI-Bewegung, warum Ausgänge kürzer sind als Eingänge, wie Distanz und Eingabeart die Antwort ändern und wann eine Feder keine Dauer hat.
Kernaussage
Es gibt keine einzige richtige Dauer. Kleines Feedback wie ein Button-Druck ist nahezu sofort, Übergänge zwischen nahen Ansichten liegen im unteren Hunderterbereich an Millisekunden, und Vollbildwechsel dürfen länger dauern. Ausgänge sind meist schneller als Eingänge. Distanz, Größe, Eingabeart und Gerätegeschwindigkeit ändern die Antwort, behandle jeden Bereich also als Startpunkt und teste in der echten Oberfläche.
Die Dauer folgt der zurückgelegten Strecke
Ein Tooltip, der an Ort und Stelle ausblendet, ist eine andere Aufgabe als ein Panel, das über den Bildschirm wandert. Je weiter sich ein Element bewegt und je mehr Bildschirm es bedeckt, desto mehr Zeit braucht das Auge. Deshalb dürfen große Übergänge länger dauern, ohne langsam zu wirken.
Kleines Feedback: fast sofort
Druckzustände, Hover-Änderungen und kleine Icon-Wechsel sollen wie eine direkte Antwort wirken. Nimmt der Nutzer eine Wartezeit zwischen Eingabe und Feedback wahr, wirkt die Oberfläche kaputt statt animiert.
Lokale Übergänge: unterer Hunderterbereich
Dropdowns, Popovers, kleine Dialoge und aufklappende Panels sind die Mitte: lang genug, um den Ursprung zu zeigen, kurz genug, dass der Nutzer nicht wartet. Das ist der Bereich, den viele Designsysteme als kurze und mittlere Dauer-Tokens veröffentlichen.
Große Wechsel und Seitenübergänge
Vollbildwechsel, Blätter über den ganzen Viewport und Routenübergänge dürfen länger laufen, weil sie mehr visuelle Information tragen. Auch hier ist Aufmerksamkeit die Grenze: Dauert die Animation länger als das Lesen des Inhalts, steht sie im Weg.
Ausgänge sind kürzer als Eingänge
Ein Eingang erklärt, was kommt; ein Ausgang muss nur den Weg freimachen. Der Nutzer weiß bereits, was geht, ein schneller Ausgang wirkt also reaktionsschnell. Dieses Verhältnis umzudrehen ist eine der häufigsten Ursachen für eine träge wirkende Oberfläche.
Federn haben keine Dauer
Eine Feder kommt zur Ruhe, wenn ihre Physik zur Ruhe kommt, die Frage nach einer Dauer ist also falsch. Du stellst Steifheit, Dämpfung und Masse ein und beobachtest, wie lange sie sichtbar still bleibt. Brauchst du eine exakte Dauer für eine Übergabe oder ein Video, ist eine Kurve mit Dauer das einfachere Werkzeug.
Teste auf einem Gerät, nicht auf einem Datenblatt
Dieselbe Dauer fühlt sich auf einem Mittelklasse-Handy anders an als auf einem Desktop-Monitor. Die wahrgenommene Geschwindigkeit ändert sich auch mit dem, worauf der Nutzer wartet. Miss die echte Interaktion, auch mit langsamen Netzen und Geräten, bevor du die Zahl in ein Token schreibst.
Wichtige Prinzipien
- Die Dauer skaliert mit Distanz und der Fläche, die sich ändert
- Feedback soll sofort wirken, nicht animiert
- Lokale Übergänge liegen im unteren Hunderterbereich an Millisekunden
- Ausgänge sind kürzer als Eingänge
- Eine Feder hat eine Einschwingzeit, keine Dauer
- Teste auf einem Mittelklasse-Gerät, bevor du einen Wert festschreibst
Häufige Fragen
Quellen
- Applying easing and duration — Material Design 3
- Motion — Apple Human Interface Guidelines
- Animation performance and frame rate — web.dev