動效已成標配，但設計師「甩圖過牆」、工程師「通靈還原」的慘劇天天上演。本文結合設計師 @Akane_Lee 與三位資深工程師（邱政憲、Cateyes Lin、謝孟哲）實戰經驗，定義動效交付 6 大標準化交付物，並附工程師視角避坑指南，讓協作從「靠吼」變「靠譜」。

一、動效交付 6 大標準化交付物（缺一不可）

序號	交付物	說明	工程師最愛格式
1	起始狀態 / 結束狀態	動畫開始前、結束後的完整視圖（含所有圖層狀態）	Figma/Sketch 頁面或 PNG 序列
2	變化屬性	寬高、X/Y/Z 座標、旋轉角度、透明度、顏色、陰影、模糊等所有數值變化	標註文件/JSON/CSV，必須是具體數值，非「感覺」
3	時間腳本	關鍵幀時間軸：T0-T1 做什麼屬性變化，T1-T2 做什麼……	After Effects 時間軸截圖 / Lottie JSON / 自定義表格
4	漸變函數	Easing 曲線：ease-in/out/in-out/custom cubic-bezier	Ceaser 曲線編輯器導出參數 / CSS 參數
5	操作行為	觸發條件、可中斷/可逆轉/手勢綁定/狀態機邏輯	狀態機圖 / 邏輯流程圖 / 文字描述
6	參考範例	高保真原型、模擬視頻、Lottie/Principle/Hype3 可交互原型	.mp4/.mov + 可交互原型鏈接

二、工程師視角避坑指南（謝孟哲實戰經驗）

動畫分兩類，協作策略不同

• 通用 2D 動畫（平移/旋轉/縮放/透明度/顏色）：系統提供 API，給參數即可。
  • 對象參數變化（座標、透明度、角度）
  • 持續時間
  • 加減速曲線 f(x)=y —— 最難溝通點
• 特殊/3D 動畫（翻頁/丟垃圾桶/粒子/流體）：高成本，通常需專門特效團隊+研發團隊協作，靠視頻/口頭溝通。

關鍵痛點與解法

1. 動畫時長：新手常設 0.6-1s，體驗極差。無特殊敘事需求，0.3-0.5s 為宜。可中斷/可逆轉邏輯必須定義。
2. Easing 曲線精確描述：「漸減」如「黃色」一樣不精確。ease-out ≠ DecelerateInterpolator。最精確描述 = 數學方程式 / cubic-bezier(n,n,n,n)。工具推薦：Ceaser 可視化調參導出參數。
3. 高要求專案：自建內部動效溝通工具（如移動端 App 拉曲線即時預覽），設計師調參、工程師直取參數，零溝通成本。

三、設計師自我修養清單

• 學會輸出標註文件而非僅靜態圖（Figma DevMode / Zeplin / 蓝湖 / 自製 Markdown）。
• 理解平台差異：iOS/Android/Web/小程序/Flutter/React Native 動畫實現機制不同，提前溝通技術棧限制。
• 動效服務於體驗而非炫技：參考《Stop Gratuitous UI Animation》，克制無意義動態。
• 建立動效組件庫：通用轉場、載入、反饋、導航動效標準化，複用率 > 80%。

設計師負責「定義什麼樣」，工程師負責「實現怎麼動」。標準化交付物是連接兩者的橋樑，專業互信是橋樑的基石。