Was ist ein Bewegungssystem? Ein praktischer Leitfaden für UI-Teams
Ein Bewegungssystem besteht aus gemeinsamen Regeln, Token und Komponenten, die entscheiden, wie sich ein Produkt bewegt. Was dazugehört, wie man es verwaltet und wo ExodeUI reinpasst.
Kernaussage
Ein Bewegungssystem ist der gemeinsame Satz von Regeln, Token, Komponenten und Code, der darüber entscheidet, wie sich ein Produkt bewegt. Es umfasst Dauer, Entspannung, Sprünge, Choreografie und Interaktionszustände, sodass Teams genehmigte Bewegungen wiederverwenden, anstatt sie Bildschirm für Bildschirm neu aufzubauen. Ein Bewegungssystem ist ebenso ein Managementproblem wie ein Designproblem: Es braucht einen Besitzer, eine Quelle der Wahrheit und einen Weg zur Produktion.
Was ist ein Bewegungssystem?
Ein Bewegungssystem ist der Teil eines Designsystems, der Bewegung beschreibt. Es beantwortet Fragen, die eine statische Komponentenbibliothek nicht beantworten kann: Wie schnell öffnet sich ein Menü, wie reagiert eine Taste beim Drücken, was passiert, wenn ein Benutzer einen Übergang unterbricht und welche Federwerte zu welcher Oberfläche gehören. Die Ausgabe ist keine Styleguide-Seite. Das Ergebnis ist ein kleiner Satz wiederverwendbarer Entscheidungen, die Designer und Entwickler anwenden können, ohne jedes Mal eine neue Animation zu erfinden.
Was in ein Bewegungssystem gehört
Ein nützliches Bewegungssystem besteht aus fünf Teilen. Wenn Sie einen überspringen, wird das System zu einem Ordner mit Dateien, die niemand verwendet.
Principles
Kurze Regeln, die die Persönlichkeit des Produkts erklären. Beispiel: Bewegung bestätigt die Eingabe im ersten Frame, oder große Flächen bewegen sich weniger als kleine.
Token
Benannte Werte für Dauer, Entspannung und Federn, z. B. „motion.enter.fast“ oder „motion.spring.snappy“. Token machen Anträge überprüfbar und sorgen für konsistente Werte.
Muster
Wiederverwendbare Verhaltensweisen für häufige Aufgaben: Eingeben, Beenden, Erweitern, Neuanordnen, Ziehen, Verwerfen, Erfolg und Fehler.
Komponenten
Die Live-Bausteine, die die Muster bereits verwenden, sodass ein Team eines hinzufügen kann, anstatt ein Dokument zu lesen und neu zu erstellen.
Regierungsführung
Wer kann das System ändern, wie werden Änderungen überprüft und wie veraltete Bewegungen zurückgezogen?
Bewegungssystem vs. Designsystem vs. Bewegungstoken
Ein Designsystem umfasst Farbe, Typ, Abstand, Komponenten und Nutzungsregeln. Ein Bewegungssystem ist die darin enthaltene Bewegungsebene und hat oft seinen eigenen Besitzer, da sich Bewegung aus anderen Gründen ändert als die Farbe. Bewegungstoken sind die kleinste Einheit dieser Ebene: benannte Werte für Timing und Physik. Eine Token-Bibliothek ist notwendig, aber nicht ausreichend. Ohne Muster und Live-Komponenten werden Token zu einer Liste von Zahlen, die Designer auf jedem Bildschirm anders interpretieren.
Warum Bewegungssysteme versagen
Die meisten Bewegungssysteme scheitern aus betrieblichen Gründen, nicht aus ästhetischen Gründen. Die Token befinden sich in einem Dokument, das von den Komponenten getrennt ist. Der genehmigte Antrag existiert nur in einem Prototyp, den Entwickler nicht ausführen können. Ein Team übernimmt das System und ein anderes liefert weiterhin fest codierte Dauern. Das System hat keinen Besitzer, daher driftet es. Um dies zu beheben, müssen Sie das System an einem Ort platzieren, an dem die Arbeit bereits stattfindet: in der Designdatei, in der Komponentenbibliothek und bei der Codeüberprüfung.
So verwalten Sie ein Bewegungssystem
Beginnen Sie mit einer kleinen, eigenen Fläche und machen Sie das System zum einfachen Weg.
- Wählen Sie eine Quelle der Wahrheit für Token aus und verlinken Sie sie aus der Designdatei und der Codebasis
- Benennen Sie Token nach Absicht, nicht nach Wert: „motion.exit.fast“ ist nützlicher als „motion.200ms“.
- Versenden Sie einen kleinen Satz Muster, bevor Sie weitere Token hinzufügen
- Überprüfen Sie Bewegungsänderungen wie Codeänderungen mit einer Vorher-Nachher-Aufzeichnung
- Verfolgen Sie die Wiederverwendung: Wie viele neue Komponenten verwenden genehmigte Muster anstelle von benutzerdefiniertem Timing?
- Löschen Sie alte Werte nach einem Zeitplan, damit das System keine Duplikate ansammelt
Wo ExodeUI passt
ExodeUI hält die Bewegung in einer geöffneten .exode-Datei und nicht in einer separaten Spezifikation. Layout, Zustände, Zeitleisten, Federphysik, Logik und Eingaben leben zusammen, und Laufzeitpakete spielen die Datei in React, Vue, Svelte, Angular, Solid, React Native, SwiftUI und Flutter ab. Dadurch erhält ein Bewegungssystem eine funktionierende Referenz: Ein Designer kann die genehmigte Komponente öffnen, ein Entwickler kann dieselbe Datei prüfen und ein KI-Codierungstool kann sie über den MCP-Server bearbeiten. Die Datei ist kein Ersatz für die Governance. Es gibt der Governance lediglich etwas Konkretes, auf das sie hinweisen kann.
So starten Sie ein Bewegungssystem in einem Sprint
Überprüfen Sie zehn Ihrer am häufigsten verwendeten Komponenten und listen Sie jede darin enthaltene Dauer, Kurve und Feder auf. Gruppieren Sie die Werte, die dieselbe Aufgabe erfüllen, und benennen Sie die Gruppen. Wählen Sie fünf Muster aus, die die meisten Interaktionen abdecken. Erstellen Sie eine Referenzkomponente pro Muster, dokumentieren Sie, wann Sie sie verwenden sollten, und fügen Sie die Token zu Ihren Design- und Codebibliotheken hinzu. Führen Sie dann eine einzelne Funktion durch das neue System und messen Sie, wie viele benutzerdefinierte Werte noch benötigt werden. Diese Zahl ist Ihre Basis für den nächsten Sprint.
Produktionsnahes Implementierungsbeispiel
import { ExodeUICanvas } from 'exodeui';
// The motion system lives in the .exode file. Your app supplies inputs
// and listens for events; it does not restate spring values in code.
export function SystemButton({ pressed, onConfirm }) {
return (
<ExodeUICanvas
src="/system_button.exode"
inputs={{ pressed }}
onTrigger={(name) => name === 'confirm' && onConfirm()}
/>
);
}Wichtige Prinzipien
- Ein Bewegungssystem ist die Bewegungsebene eines Designsystems, kein Ordner mit Prototypvideos
- Es braucht Prinzipien, Token, Muster, Live-Komponenten und Governance
- Token ohne Nutzungsregeln werden zu Zahlen, die jedes Team anders interpretiert
- Bewegungsänderungen sollten wie Codeänderungen überprüft werden
- ExodeUI speichert Bewegung, Zustände und Logik in einer offenen Datei, die von Laufzeiten abgespielt werden kann