什么是运动系统？ UI 团队实用指南
运动系统是决定产品如何运动的共享规则、令牌和组件。合一属于什么，如何管理，以及 ExodeUI 适合什么地方。
核心要点
运动系统是决定产品如何运动的共享规则、令牌、组件和代码集。它涵盖了持续时间、缓动、弹簧、编排和交互状态，因此团队可以重复使用批准的动作，而不是逐个屏幕地重建它。运动系统既是一个设计问题，也是一个管理问题：它需要一个所有者、一个事实来源和一条生产路径。
什么是运动系统？
运动系统是设计系统中描述运动的一部分。它回答了静态组件库无法解决的问题：菜单打开的速度有多快，按钮按下时如何反应，用户中断转换时会发生什么，以及哪些弹簧值属于哪个表面。输出不是样式指南页面。输出是一小组可重用的决策，设计人员和开发人员可以应用这些决策，而无需每次都发明新的动画。
运动系统属于什么
一个有用的运动系统有五个部分。跳过一个，系统就会变成一个没有人使用的文件文件夹。
Principles
解释产品个性的简短规则。例如：运动确认第一帧上的输入，或者大表面移动得比小表面少。
代币
持续时间、缓动和弹簧的命名值，例如motion.enter.fast或motion.spring.snappy。令牌使动议可审查并保持价值观一致。
图案
常见作业的可重用行为：输入、退出、展开、重新排序、拖动、关闭、成功和错误。
成分
已经使用这些模式的实时构建块，因此团队可以放入一个而不是阅读文档并重建它。
治理
谁可以更改系统、如何审核更改以及如何停用已弃用的动议。
运动系统 vs 设计系统 vs 运动代币
设计系统涵盖颜色、类型、间距、组件和使用规则。运动系统是其内部的运动层，它通常有自己的所有者，因为运动变化的原因与颜色不同。运动令牌是该层的最小单元：计时和物理的命名值。令牌库是必要的，但还不够。如果没有模式和实时组件，标记就变成了设计师在每个屏幕上以不同方式解释的数字列表。
为什么运动系统会失败
大多数运动系统的失败都是由于操作原因，而不是美观原因。令牌存在于与组件断开连接的文档中。批准的动议仅存在于开发人员无法运行的原型中。一个团队采用了该系统，而另一个团队则继续提供硬编码的持续时间。该系统没有所有者，因此它会漂移。解决这个问题意味着将系统放在已经发生工作的地方：设计文件中、组件库中和代码审查中。
如何管理运动系统
从一个小的、自有的表面开始，使系统成为简单的路径。
- 为令牌选择一个真实来源并从设计文件和代码库链接到它
- 按意图而不是按值命名标记：motion.exit.fast 比 Motion.200ms 更有用
- 在添加更多令牌之前发送一小组模式
- 通过前后记录查看运动更改（例如代码更改）
- 跟踪重用：有多少新组件使用批准的模式而不是自定义计时
- 按计划淘汰旧值，以便系统不会累积重复项
ExodeUI 适合的地方
ExodeUI 将运动保持在打开的 .exode 文件内，而不是在单独的规范中。布局、状态、时间线、弹簧物理、逻辑和输入一起存在，运行时包以 React、Vue、Svelte、Angular、Solid、React Native、SwiftUI 和 Flutter 播放文件。这为运动系统提供了工作参考：设计人员可以打开批准的组件，开发人员可以检查相同的文件，AI编码工具可以通过MCP服务器对其进行编辑。该文件不能替代治理。它只是为治理提供了一些具体的指向。
如何在一次冲刺中启动运动系统
审核您最常用的十个组件，并列出其中的每个持续时间、曲线和弹簧。将执行相同工作的值分组并命名组。选择涵盖大多数交互的五种模式。为每个模式构建一个参考组件，记录何时使用它，并将标记添加到您的设计和代码库中。然后通过新系统运行单个功能并测量它仍然需要多少自定义值。该数字是您下一个冲刺的基线。
生产实施片段
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()}
/>
);
}要记住的关键 Principle
- 运动系统是设计系统的运动层，而不是原型视频的文件夹
- 它需要原则、代币、模式、实时组件和治理
- 没有使用规则的代币会变成每个团队都有不同解释的数字
- 应像代码更改一样审查运动更改
- ExodeUI 将运动、状态和逻辑保存在一个运行时可以播放的打开文件中