什麼是運動系統？ 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 將運動、狀態和邏輯保存在一個運行時可以播放的開啟檔案中