Wat is een bewegingssysteem? Een praktische gids voor UI-teams
Een bewegingssysteem bestaat uit de gedeelde regels, tokens en componenten die bepalen hoe een product beweegt. Wat hoort er in één, hoe beheer je het en waar ExodeUI past.
Kern afhaalmaaltijd
Een bewegingssysteem is de gedeelde set regels, tokens, componenten en code die bepaalt hoe een product beweegt. Het omvat duur, versoepeling, vering, choreografie en interactietoestanden, zodat teams goedgekeurde bewegingen opnieuw kunnen gebruiken in plaats van deze scherm voor scherm opnieuw op te bouwen. Een bewegingssysteem is zowel een managementprobleem als een ontwerpprobleem: het heeft een eigenaar, een bron van waarheid en een pad naar productie nodig.
Wat is een bewegingssysteem?
Een bewegingssysteem is het deel van een ontwerpsysteem dat beweging beschrijft. Het geeft antwoord op vragen die een statische componentenbibliotheek niet kan beantwoorden: hoe snel een menu wordt geopend, hoe een knop reageert wanneer erop wordt gedrukt, wat er gebeurt als een gebruiker een overgang onderbreekt en welke veerwaarden bij welk oppervlak horen. De uitvoer is geen stijlgidspagina. De output is een kleine reeks herbruikbare beslissingen die ontwerpers en ontwikkelaars kunnen toepassen zonder elke keer een nieuwe animatie uit te vinden.
Wat thuishoort in een bewegingssysteem
Een handig bewegingssysteem bestaat uit vijf onderdelen. Sla er één over en het systeem wordt een map met bestanden die niemand gebruikt.
Principle's
Korte regels die de persoonlijkheid van het product verklaren. Bijvoorbeeld: beweging bevestigt invoer op het eerste frame, of grote oppervlakken bewegen minder dan kleine.
Tokens
Benoemde waarden voor duur, versoepeling en vering, zoals motion.enter.fast of motion.spring.snappy. Tokens maken bewegingen controleerbaar en houden de waarden consistent.
Patronen
Herbruikbaar gedrag voor veel voorkomende taken: binnenkomen, afsluiten, uitbreiden, opnieuw ordenen, slepen, negeren, succes en fouten.
Componenten
De live bouwstenen die de patronen al gebruiken, zodat een team er een kan plaatsen in plaats van een document te lezen en opnieuw op te bouwen.
Bestuur
Wie het systeem kan wijzigen, hoe wijzigingen worden beoordeeld en hoe verouderde bewegingen worden stopgezet.
Bewegingssysteem versus ontwerpsysteem versus bewegingstokens
Een ontwerpsysteem omvat kleur, type, spatiëring, componenten en gebruiksregels. Een bewegingssysteem is de bewegingslaag daarbinnen, en heeft vaak een eigen eigenaar, omdat beweging om andere redenen verandert dan kleur. Bewegingstokens zijn de kleinste eenheid van die laag: benoemde waarden voor timing en natuurkunde. Een tokenbibliotheek is noodzakelijk maar niet voldoende. Zonder patronen en live-componenten worden tokens een lijst met getallen die ontwerpers op elk scherm anders interpreteren.
Waarom bewegingssystemen falen
De meeste bewegingssystemen falen om operationele redenen, niet om esthetische redenen. De tokens bevinden zich in een document dat losgekoppeld is van de componenten. De goedgekeurde motie bestaat alleen in een prototype dat ontwikkelaars niet kunnen uitvoeren. Het ene team adopteert het systeem en het andere team blijft hardgecodeerde looptijden verzenden. Het systeem heeft geen eigenaar, dus het drijft af. Dit oplossen betekent dat het systeem ergens moet worden geplaatst waar het werk al gebeurt: in het ontwerpbestand, in de componentenbibliotheek en bij het beoordelen van de code.
Hoe een bewegingssysteem te beheren
Begin met een klein eigen oppervlak en maak het systeem de makkelijke weg.
- Kies één bron van waarheid voor tokens en link ernaar vanuit het ontwerpbestand en de codebase
- Geef tokens een naam op basis van intentie, niet op waarde: motion.exit.fast is nuttiger dan motion.200ms
- Verzend een kleine set patronen voordat u meer tokens toevoegt
- Bekijk bewegingsveranderingen, zoals codewijzigingen, met een voor-en-na-opname
- Hergebruik bijhouden: hoeveel nieuwe componenten gebruiken goedgekeurde patronen in plaats van aangepaste timing
- Oude waarden volgens een schema buiten gebruik stellen, zodat het systeem geen duplicaten ophoopt
Waar ExodeUI past
ExodeUI houdt beweging binnen een open .exode-bestand in plaats van in een afzonderlijke specificatie. Lay-out, toestanden, tijdlijnen, veerfysica, logica en invoer leven samen, en runtime-pakketten spelen het bestand af in React, Vue, Svelte, Angular, Solid, React Native, SwiftUI en Flutter. Dat geeft een bewegingssysteem een werkreferentie: een ontwerper kan het goedgekeurde onderdeel openen, een ontwikkelaar kan hetzelfde bestand inspecteren en een AI-coderingstool kan het bewerken via de MCP-server. Het bestand is geen vervanging voor governance. Het geeft het bestuur gewoon iets concreets om naar te verwijzen.
Hoe je in één sprint een bewegingssysteem start
Controleer tien van uw meest gebruikte componenten en noteer daarin elke duur, curve en veer. Groepeer de waarden die hetzelfde werk doen en geef de groepen een naam. Kies vijf patronen die de meeste interacties dekken. Bouw één referentiecomponent per patroon, documenteer wanneer u deze moet gebruiken en voeg de tokens toe aan uw ontwerp- en codebibliotheken. Voer vervolgens een enkele functie door het nieuwe systeem en meet hoeveel aangepaste waarden er nog nodig zijn. Dat getal is je basislijn voor de volgende sprint.
Productie-implementatiefragment
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()}
/>
);
}Toets Principles in om te onthouden
- Een bewegingssysteem is de bewegingslaag van een ontwerpsysteem, niet een map met prototypevideo's
- Het heeft principes, tokens, patronen, live componenten en bestuur nodig
- Tokens zonder gebruiksregels worden getallen die elk team anders interpreteert
- Bewegingswijzigingen moeten worden beoordeeld zoals codewijzigingen
- ExodeUI houdt beweging, statussen en logica bij in één open bestand dat runtimes kunnen afspelen