102.3K+Download
Zur Nutzungsanleitung springen
Animation Principlesvon Owl-Listener

Animation Principles Skill.

Geben Sie einem Übergang einen klaren Zweck und ein Bewegungsprofil, das den Zustandswechsel der Oberfläche unterstützt.

  • UI-Motion
  • Design-Leitfaden
OpenDesign herunterladenAnleitung ansehen
Quellenprüfung · Animation PrinciplesSKILL.md
Aufgabe UX Liefert • Eine Begründung der Bewegung für ein Oberflächenereignis • Empfehlungen zu Easing, Dauer und Abfolge • Verhalten bei Unterbrechung und reduzierter Bewegung Vor dem Start Geben Sie die Zustände der Oberfläche vor und nach der Aktion sowie Auslöser und Zielgeräte an. Prüfen Sie Timing, Unterbrechung und reduzierte Bewegung in einer lauffähigen Vorschau.
Redaktionelle Zusammenfassung · Quelle geprüft 2026-10-07 · kein generiertes Beispiel

01 Funktionen

Eine UI-Animation verfeinern

Ein Leitfaden für eine einzelne Bewegung mit Easing, Dauer, Choreografie, Unterbrechbarkeit und reduzierter Bewegung.

Quellenbasierter WorkflowKein Ausführungs-Benchmark

Die Arbeitsweise

Animation Principles ist ein fokussierter Leitfaden für Bewegungsdesign für eine einzelne UI-Bewegung. Er verbindet Easing-Richtung, Dauer, Inszenierung und Ausklang mit dem, was Nutzende wahrnehmen sollen. Ein Einblenden, Ausblenden, eine Hervorhebung, eine Ladedarstellung oder ein Übergang hat jeweils eine andere Aufgabe.

Die Quelle enthält Zeitbereiche und Vorschläge für gestaffelte Animationen, doch sind dies Ausgangspunkte und keine gemessenen Anforderungen für jede Oberfläche. Sie verlangt außerdem unterbrechbares Verhalten, Unterstützung für reduzierte Bewegung und Prüfungen auf leistungsschwächeren Geräten. Produktweite Motion-Tokens gehören zu einer anderen Aufgabe.

Erwartete Ergebnisse

  • Eine Begründung der Bewegung für ein Oberflächenereignis
  • Empfehlungen zu Easing, Dauer und Abfolge
  • Verhalten bei Unterbrechung und reduzierter Bewegung
Beispiel-Briefing ansehen

Vom Briefing zur Prüfung

  1. 01
    Den Zustandswechsel benennen

    Bestimmen Sie, was die Animation vermittelt und welches Element zuerst Aufmerksamkeit verdient.

  2. 02
    Die Bewegung abstimmen

    Wählen Sie ein Easing-Profil und eine Dauer, die zu Einblenden, Ausblenden, Hervorhebung oder Übergang passen.

  3. 03
    Alternativen prüfen

    Prüfen Sie den Abbruch mitten in der Animation, das Verhalten bei reduzierter Bewegung und die wahrgenommene Reaktionsfähigkeit auf Zielgeräten.

02 Einsatzbereiche

Wann man es nutzt

Geben Sie die Zustände der Oberfläche vor und nach der Aktion sowie Auslöser und Zielgeräte an. Prüfen Sie Timing, Unterbrechung und reduzierte Bewegung in einer lauffähigen Vorschau.

Gut geeignet

  • Ein Modal erscheintDamit wirkt eine einblendende Fläche reaktionsschnell und gezielt.
  • Ein störender ÜbergangNützlich, wenn die Interaktion funktioniert, aber Tempo oder Choreografie nicht stimmen.

Zu prüfende Grenzen

  • Kein vollständiges Motion-SystemDie Quelle trennt dies von produktweiten Tokens für Dauer und Easing.
  • Bereiche brauchen KontextVorgeschlagene Millisekundenwerte ersetzen keine Tests der tatsächlichen Interaktion.

Diese Eingaben mitbringen

  • Auslöser und ZuständeZeigen Sie den Zustand davor, die Aktion und den Zustand danach.
  • AufmerksamkeitszielBeschreiben Sie, was die betrachtende Person durch die Bewegung verstehen soll.
  • GeräteeinschränkungenNennen Sie Anforderungen an reduzierte Bewegung und Performance.

03 Wichtige Entscheidungen

Entscheidende Punkte

  1. Zweck vor Dekoration

    Die Bewegung wird danach beurteilt, welchen Zustandswechsel sie vermittelt.

  2. Unterbrechbarkeit zählt

    Ein Übergang muss eine weitere Nutzeraktion vertragen, bevor er endet.

04 Beispielbriefing

Ein fokussiertes Briefing ausprobieren

Das folgende Beispiel-Briefing wurde nicht getestet. Prüfen Sie die Einrichtung des Skills, bevor Sie es verwenden.

Einrichtung prüfen

Laden Sie das SKILL.md dieser Aufgabe aus dem designer-skills-Repository an einen von Ihrem Agenten unterstützten Skill-Speicherort. Die Einstiegsdatei legt keinen universellen Installationsbefehl fest.

Upstream-Quelldatei
https://github.com/Owl-Listener/designer-skills/blob/9a6930cf84a822eb458624bd11c61aac5bbdf224/interaction-design/skills/animation-principles/SKILL.md

Geben Sie die Zustände der Oberfläche vor und nach der Aktion sowie Auslöser und Zielgeräte an. Prüfen Sie Timing, Unterbrechung und reduzierte Bewegung in einer lauffähigen Vorschau.

Mit einem Ergebnis beginnen

Passen Sie Umfang, Quellmaterial und Vorgaben dieses Briefings an, bevor Sie den Skill ausführen.

Beispiel-Briefing
Nutze animation-principles, um das Einblenden dieses Filterpanels abzustimmen. Erkläre Easing und Dauer, koordiniere Panel und Inhalt und lege fest, was passiert, wenn es auf halber Strecke geschlossen wird. Füge eine Alternative für reduzierte Bewegung hinzu und vermeide dekorative Schleifen.

Ergebnis prüfen

Prüfen Sie das tatsächliche Ergebnis anhand dieser beobachtbaren Kriterien.

  • Die Animation vermittelt einen bestimmten Wechsel.
  • Eine zweite Aktion kann sie sauber unterbrechen.
  • Das Verhalten bei reduzierter Bewegung bleibt verständlich.

OpenDesign bietet einen lokalen Design-Arbeitsbereich für Coding-Agenten. Diese Auflistung bedeutet nicht, dass der Skill gebündelt ist oder dass externe Tools, Zugangsdaten und Software-Abhängigkeiten enthalten sind.

OpenDesign herunterladenSchnellstart lesen

05 Quelle und Lizenz

Quelle und Lizenz

Diese Seite beschreibt die unten verlinkte, fixierte Quellrevision. Verhalten und Anforderungen im Upstream können sich ändern.

Quellinhaber
Owl-Listener
Repository
Owl-Listener/designer-skills
Skill-Datei
interaction-design/skills/animation-principles/SKILL.md
Lizenz
MIT
Geprüfter Stand
2026-10-07 · 9a6930cf84a8
Redaktionelle Quellenzusammenfassung
Ein Leitfaden für eine einzelne Bewegung mit Easing, Dauer, Choreografie, Unterbrechbarkeit und reduzierter Bewegung.

Originalzusammenfassung von OpenDesign auf Grundlage der verlinkten Quelle. Repository-Sterne sind ein datiertes Popularitätssignal, weder Skill-Nutzung noch Qualitätswert.

06 Fragen vor dem Start

Fragen vor dem Start

Definiert dies alle Motion-Tokens?

Nein. Der angegebene Umfang ist eine einzelne Bewegung; ein Skill für Motion-Systeme übernimmt produktweite Tokens.

Gelten die Zeitbereiche universell?

Betrachten Sie sie als Design-Hinweise, die im Kontext zu testen sind, nicht als garantiert optimale Werte.

Sollte Laden immer animiert sein?

Die Quelle nennt Lademuster, verlangt aber, dass Bewegung einen Zweck erfüllt und Barrierefreiheitseinstellungen respektiert.

OpenDesign

Schaffen Sie Raum für die nächste Design-Iteration.

Halten Sie Briefing, Quellmaterial und Designarbeit in einem lokalen Arbeitsbereich zusammen. Prüfen Sie die eigene Einrichtung des Skills, bevor Sie ihn in Ihren Workflow aufnehmen.

OpenDesign herunterladenDesign-Skills durchsuchen
Upstream-Quelldatei
https://github.com/Owl-Listener/designer-skills/blob/9a6930cf84a822eb458624bd11c61aac5bbdf224/interaction-design/skills/animation-principles/SKILL.md