Was macht Marken-Bewegungsrichtlinien?
Erstellen Sie ein Marken-Bewegungssystem – das Dokument, das definiert, wie sich eine Marke oder ein Produkt bewegt, so wie es ausgereifte Designsysteme (Slack, IBM Carbon, Klarna, Material) tun. Die Ausgabe ist ein ausfüllbares Template, das Prinzipien, Easing-/Timing-Tokens, eine Bewegungsbibliothek, Logoregeln, Feedbackzustände, Barrierefreiheit und Do's/Don'ts-Beispiele umfasst.
Wann verwenden
Verwenden Sie dieses Skill, wenn eine Marke oder ein Produkt eine dokumentierte Bewegungssprache benötigt, wenn Animationen im Team inkonsistent wirken, wenn benannte Easing-/Dauer-Tokens für Designer und Entwickler definiert werden sollen oder wenn ein Standard für reduzierte Bewegung/Barrierefreiheit hinzugefügt werden soll. Die Ausgabe ist ein strukturiertes Dokument, kein Code.
Entscheidungsbaum – Umfang des Systems festlegen, dann Token wählen
Zwei Kernfragen: Wie groß muss das System für diese Marke wirklich sein? und Welchen Token verwendet eine bestimmte Bewegung? Bauen Sie kein 7-teiliges System für eine Landingpage; versenden Sie keine Einseitige für ein Multi-Team-Designsystem.
Wie viele Oberflächen/Teams werden dies nutzen?
├─ Eine Website / eine Kampagne → leichtgewichtig: Prinzipien + Tokens + kurze
│ Bibliothek. Überspringen Sie tiefe Logo-/Zustandsabschnitte, es sei denn, relevant.
├─ Ein Produkt (App/Web) → vollständiges 7-teiliges Dokument; Tokens sind Pflicht.
└─ Eine Marke über Produkt + Marketing + Broadcast → vollständiges Dokument PLUS ein
Bewegungs-Persönlichkeits-Preset (siehe motion-art-direction), damit jedes Medium übereinstimmt.
Auswahl des Tokens für eine bestimmte Bewegung:
Dauer: größeres Element / längerer Weg → längerer Token
(instant<fast<base<slow<slower)
Easing: Eintritt → decelerate (verlangsamen) · Austritt → accelerate (beschleunigen, kürzer)
Bewegung im Sichtfeld → standard · Markenmoment → emphasized
Dauerschleife → linear · verspielter Akzent → spring (sparsam)
Faustregel: Wenn eine Bewegung den verwendeten Token nicht benennen kann, ist es ein Einzelfall – und Einzelfälle sind es, die ein System inkonsistent wirken lassen.
Was ein Bewegungssystem enthält
Ein vollständiges Bewegungsrichtlinien-Dokument besteht aus sieben Teilen. Erstellen Sie sie in dieser Reihenfolge:
- Bewegungsprinzipien — 3-5 benannte Grundsätze, die jede Animation leiten.
- Timing- & Easing-Tokens — benannte Dauern und Kurven, sodass Bewegung konsistent und für Entwickler implementierbar ist.
- Bewegungsbibliothek — Eintritts-, Austritts- und Übergangsmuster, die Tokens zugeordnet sind.
- Logo-Animationregeln — wie sich das Markenzeichen bewegen darf und nicht.
- Feedback- & Zustands-Bewegung — Laden, Erfolg, Fehler, Hover, Fokus.
- Barrierefreiheit — reduzierte Bewegung, Lichtempfindlichkeit, Fokussichtbarkeit.
- Do's / Don'ts — konkrete Beispiele, die die Regeln unmissverständlich machen.
Tokens sind der Kern
Alles andere bezieht sich auf die Tokens. Definieren Sie Dauern und Kurven einmal als benannte Tokens; die Bibliothek und Komponenten verwenden sie wieder. Das macht ein Bewegungssystem implementierbar statt nur dekorativ.
Beispiel-Dauer-Tokens (ausfüllen/anpassen)
| Token | Wert | Verwendung |
|---|---|---|
duration-instant | 100ms | Mikro-Feedback (Toggle, Tippen) |
duration-fast | 150ms | Hover, kleiner Zustandswechsel |
duration-base | 250ms | Standard-UI-Übergang (Standard) |
duration-slow | 400ms | Größere Oberflächen, Modale, Seitenabschnitte |
duration-slower | 600ms | Hero-/Markenmomente, Vollbild |
Faustregel: Je größer das Element/die Distanz, desto länger die Dauer. Die meiste UI-Bewegung liegt bei 150-400ms; unter ~100ms wirkt es augenblicklich, über ~500ms fühlt es sich für alltägliche UI träge an.
Beispiel-Easing-Tokens (Kurven)
| Token | cubic-bezier | Gefühl / Verwendung |
|---|---|---|
ease-standard | (0.4, 0.0, 0.2, 1) | Standard; Element bewegt sich im Sichtfeld |
ease-decelerate (ease-out) | (0.0, 0.0, 0.2, 1) | Eintritte – schnell rein, absetzen |
ease-accelerate (ease-in) | (0.4, 0.0, 1, 1) | Austritte – reinlaufen, schnell raus |
ease-emphasized | (0.2, 0.0, 0, 1) | Ausdrucksstarke/Markenmomente |
ease-spring | spring(stiffness, damping) | Verspieltes Überschwingen (sparsam verwenden) |
Prinzip: Eintritte verlangsamen (Objekte kommen an und setzen sich ab), Austritte beschleunigen (Objekte verlassen zielstrebig), und nichts Wichtiges verwendet lineares Easing – linear wirkt mechanisch und ist reserviert für Dauerschleifen (Spinner, Fortschritt).
Bewegungsbibliothek (Muster Tokens zuordnen)
| Muster | Tokens | Verhalten |
|---|---|---|
| Einblenden | duration-base + ease-decelerate | Opazität 0→1 |
| Skalieren + Einblenden | duration-base + ease-decelerate | 0.96→1 Skalierung, Opazität 0→1 |
| Nach oben schieben | duration-slow + ease-decelerate | Y +8/16px → 0, einblenden |
| Ausblenden | duration-fast + ease-accelerate | Opazität 1→0 (Austritte schneller als Eintritte) |
| Modal öffnen | duration-slow + ease-emphasized | Skalieren + Einblenden, Hintergrund einblenden |
| Seiten-/Abschnittsübergang | duration-base + ease-standard | Überblendung oder Shared-Element-Bewegung |
| Liste Staffelung | duration-fast pro Element, 30-50ms Versatz | Elemente kaskadieren, nicht alle auf einmal |
Standardregel: Austritte sind kürzer als Eintritte; Staffelungen verwenden kleine Versätze (30-50ms), sodass Gruppen lebendig wirken, ohne zu ziehen.
Das Template (ausfüllen)
[MARKE] BEWEGUNGSRICHTLINIEN Version: ___ Eigentümer: ___
1. PRINZIPIEN
Wir bewegen uns, um: [Prinzip 1 – z. B. "Aufmerksamkeit lenken, niemals stehlen"]
[Prinzip 2 – z. B. "Schnell als Standard, ausdrucksstark mit Absicht"]
[Prinzip 3 – z. B. "Jede Bewegung hat einen Grund"]
[Prinzip 4] [Prinzip 5]
2. DAUER-TOKENS
instant ___ms · fast ___ms · base ___ms · slow ___ms · slower ___ms
3. EASING-TOKENS
standard ____ · decelerate ____ · accelerate ____ · emphasized ____
4. BEWEGUNGSBIBLIOTHEK
Eintritte: [Muster + Tokens auflisten]
Austritte: [Muster + Tokens auflisten]
Übergänge: [Muster + Tokens auflisten]
5. LOGO-ANIMATION
Erlaubt: [Enthüllungsstil, Dauer-Token, wann animiert werden darf]
Niemals: [Strecken, Verzerren, frei drehen, umfärben, ___ms überschreiten]
6. FEEDBACK- & ZUSTANDS-BEWEGUNG
Laden: [Spinner/Skeleton-Regeln + wann was]
Erfolg: [Bestätigungsbewegung]
Fehler: [Schüttel-/Farbregeln – niemals Farbe allein]
Hover/Fokus: [Token + sichtbare Fokusanforderung]
7. BARRIEREFREIHEIT
Reduzierte Bewegung: [was passiert – siehe Abschnitt unten]
Lichtempfindlichkeit: max. 3 Blitze/Sek.; kein Vollbild-Stroboskop.
Fokus: Fokusindikatoren animieren niemals weg oder verschwinden.
8. DO'S / DON'TS
✅ [do] ❌ [don't]
Logo-Animationregeln (ausfüllen)
Geben Sie explizit an, was erlaubt und was verboten ist. Typische Grundlinie:
- Erlaubt: eine Enthüllung/Aufbau mit
duration-slow-slower+ease-emphasized; sanftes Absetzen; ein einheitlicher Signaturaufbau, der überall konsistent verwendet wird. - Niemals: das Zeichen aus dem Verhältnis strecken/stauchen, frei drehen, außerhalb der Palette umfärben, jedes Erscheinen animieren (nur für Schlüsselmomente reservieren) oder die vereinbarte maximale Dauer überschreiten.
Feedback- & Zustands-Bewegung
- Laden: Skelette für Content-Layout; Spinner nur für kurze, unbestimmte Wartezeiten; Fortschritt bei Wartezeiten über ~1s anzeigen.
- Erfolg/Fehler: Bewegung mit einem Label oder Icon kombinieren – niemals Zustand nur durch Farbe oder Bewegung kommunizieren (Barrierefreiheit).
- Hover/Fokus:
duration-fast+ease-standard; Fokuszustand muss deutlich sichtbar sein und darf sich nicht aus dem Blickfeld animieren.
Barrierefreiheit (erforderlicher Abschnitt)
- Reduzierte Bewegung: Die Einstellung "reduzierte Bewegung" des Benutzers respektieren. Bewegung/Parallaxe/große Transformationen durch einfache Opazitäts-Überblendungen oder sofortige Zustandsänderungen ersetzen. Wesentliche Bedeutung beibehalten; dekorative Bewegung entfernen. (Konzeptionell auf
prefers-reduced-motionabgebildet.) - Lichtempfindlichkeit: Nicht mehr als 3 Blitze pro Sekunde; Vollbild-High-Contrast-Stroboskop vermeiden.
- Keine Bedeutung durch Bewegung/Farbe allein: Immer mit Text oder Icon kombinieren.
- Fokussichtbarkeit: Niemals zulassen, dass eine Animation den Fokusindikator versteckt oder entfernt.
Ausgearbeitete Beispiele
GUT – ein tokenverankerter Bibliothekseintrag:
Modal öffnen:
duration-slow(400ms) +ease-emphasized; Skalierung 0.96→1, Hintergrund blendet ein. Schließen:duration-base(250ms) +ease-accelerate.
Jeder Wert ist ein benannter Token, das Schließen ist kürzer als das Öffnen, das Easing passt zur Absicht (emphasized für einen Markenmoment beim Öffnen, accelerate zum Verlassen). Ein Entwickler kann es direkt implementieren, und es wird mit jedem anderen Modal übereinstimmen.
ANTI-PATTERN – die "Vibes"-Richtlinie:
"Animationen sollten sich geschmeidig, modern und entzückend anfühlen. Verwenden Sie schönes Easing und halten Sie Dinge flott, aber nicht zu schnell."
Warum es scheitert: keine benannten Tokens, keine Werte, keine Eintritts-/Austrittsregel, nichts Implementierbares – "geschmeidig" und "flott" widersprechen sich, und jeder Entwickler interpretiert sie anders, sodass das Produkt inkonsistent wird (das genaue Problem, das das Dokument lösen sollte). Die Lösung: Adjektive durch die Token-Tabellen ersetzen, jedes Muster Tokens zuordnen und Do's/Don'ts-Paare mit konkreten Millisekundenwerten angeben.
Häufige Fehler
| Symptom | Warum es passiert | Behebung |
|---|---|---|
| Bewegung inkonsistent über Bildschirme | Handangepasste Einzelwerte, keine Tokens | Tokens einmal definieren; jedes Muster referenziert sie |
| Dokument klingt gut, kann nicht gebaut werden | Prinzipien als Adjektive formuliert, nicht als Werte | Jedes Prinzip mit einer numerischen Tokenregel paaren |
| Alles hüpft | Spring/Überschwingen überall verwendet | Spring/emphasized nur für Markenmomente reservieren |
| Austritte fühlen sich träge an | Austrittdauer ≥ Eintrittdauer | Austritte eine Stufe kürzer machen; sie beschleunigen |
| Animation bricht Barrierefreiheit | Keine reduzierte Bewegung / Nur-Farbe-Zustände | Erforderlichen Barrierefreiheitsabschnitt hinzufügen; Bewegung mit Text/Icon kombinieren |
| Logo animiert überall anders | Keine Logoregeln | Einen Signaturaufbau + eine explizite "Niemals"-Liste angeben |
| Token-Werte ständig umbenannt | Namen sind literal (duration-250) | Nach Zweck benennen (duration-base), sodass Werte geändert werden können |
Lieferumfang – was ein gutes Bewegungsrichtlinien-Dokument enthält
Die Ausgabe ist ein strukturiertes Dokument (Template in references/full-template.md), kein Code. Ein vollständiges Dokument hat alle sieben Teile und:
- 3-5 benannte Prinzipien, jedes mit einer Einzeiler-Regel (keine Adjektive).
- Dauer- und Easing-Tokens mit Werten/Kurven – der implementierbare Kern.
- Eine Bewegungsbibliothek, die jedes Muster Tokens zuordnet.
- Explizite Logo-erlaubt/niemals-Regeln.
- Feedback-/Zustands-Bewegung (Laden, Erfolg, Fehler, Hover, Fokus).
- Einen erforderlichen Barrierefreiheitsabschnitt (reduzierte Bewegung, Lichtempfindlichkeit, Fokus, keine Bedeutung durch Farbe allein).
- Konkrete Do's/Don'ts-Paare, die Mehrdeutigkeit beseitigen.
Bevor Sie fertig sind – Checkliste
- 3-5 Prinzipien, jedes benannt und mit einer Einzeiler-Regel.
- Dauer-Tokens mit Werten definiert; Easing-Tokens mit cubic-bezier-Kurven.
- Jedes Bibliotheksmuster benennt die verwendeten Tokens.
- Eintritte verlangsamen, Austritte beschleunigen und sind kürzer; linear nur für Schleifen.
- Logoregeln geben sowohl erlaubt als auch niemals an.
- Feedback-Zustände kombinieren Bewegung mit Text/Icon (niemals Farbe allein).
- Barrierefreiheitsabschnitt vorhanden: reduzierte Bewegung, Lichtempfindlichkeit, Fokus, Kontrast.
- Do's/Don'ts-Paare sind konkret (mit Werten), keine Vibes.
- Token-Namen sind semantisch (Zweck), nicht literal.
Verwandte Skills
Dieses Dokument ist das System-of-Record für die Bewegung einer Marke; zwei Schwester-Skills liefern die übergeordnete Theorie und das projektspezifische Gefühl – referenzieren und anwenden Sie sie, duplizieren Sie nicht deren Tabellen:
animation-principles– Ihr Prinzipienabschnitt sollte die Drei Säulen (Absicht → Ton → Handwerk) kodieren; die Primäre/Sekundäre/Umgebungs-Bewegungsschichten erklären warum eine Heldenbewegung und eine Umgebungsdrift verschiedene Tokens erhalten; die 1/3-Regel begründet Staffelungsgrenzen (nicht alles auf einmal bewegen). Zitieren Sie diese; bewahren Sie die kanonischen Tabellen dort.motion-art-direction– für eine Marke über Produkt + Marketing + Broadcast wählen Sie ein benanntes Bewegungs-Persönlichkeits-Preset und geben es am Anfang des Dokuments an, leiten Sie dann Token-Werte ab, die dazu passen (schnelleres Preset → kürzere Dauern; Premium-Preset → länger, geschmeidiger). Die Bewegungssprachspezifikation lebt dort.
Kurzreferenz
| Entscheidung | Standard |
|---|---|
| Standard-UI-Dauer | duration-base 250ms |
| Eintritt-Easing | decelerate (ease-out) |
| Austritt-Easing | accelerate (ease-in), kürzer als Eintritt |
| Lineares Easing | nur für Schleifen (Spinner/Fortschritt) |
| Staffelungsversatz | 30-50ms pro Element |
| Logo-Animation | reserviert, konsistent, niemals verzerren |
| Zustands-Feedback | Bewegung + Label/Icon, niemals Farbe allein |
| Reduzierte Bewegung | Transformationen durch Einblendungen/sofortig ersetzen |
Referenzdateien
references/full-template.md— das vollständige, ausfüllbare Bewegungsrichtlinien-Dokument mit jedem erweiterten Abschnitt und Beispieltext.references/token-reference.md— vollständige Dauer- und Easing-Token-Tabellen mit Werten, cubic-bezier-Kurven und Verwendungshinweisen.references/dos-and-donts.md— eine Bibliothek konkreter Do's/Don'ts-Paare und ausgearbeiteter Prinzipienbeispiele (Slack/IBM/Material-Stil).