SKILL.md
readonlyread-only
name
motion-design
description
Applies motion design principles to create emotionally-driven, technically sound animations and transitions. Provides timing, easing, choreography, and Disney animation principles adapted for UI. Use when creating animations, transitions, micro-interactions, loading states, page transitions, scroll-triggered effects, or any motion work. Works with CSS, Framer Motion, GSAP, Lottie, Spring, or any animation system.
動態設計技能
何時使用
使用此技能的時機：
- 建立 UI 動畫（按鈕、卡片、模態框、頁面轉場）
- 設計微互動與回饋動畫
- 建立載入、成功或錯誤狀態
- 為插圖或裝飾元素加入動畫
- 規劃滾動觸發或基於進度的動畫
- 建立品牌動態識別
- 編排多元素序列
決策樹：
- 是否具有功能目的（回饋、引導）？→ 使用回應性的時機規則
- 是否表達品牌個性？→ 使用動態個性原型
- 是否講述故事或引導注意力？→ 迪士尼原則 + 編排
- 是否為複雜的多元素場景？→ 1/3 規則 + 交錯模式
快速參考：8 步驟檢查清單
在建立任何動畫之前：
- 情感目標？ — 喜悅、平靜、急迫、優雅
- 動態個性？ — 活潑、高級、企業、活力
- 主要屬性？ — 位置、縮放、旋轉、透明度
- 持續時間？ — 參見下方持續時間表
- 緩動系列？ — 進入=減速，離開=加速
- 主角元素？ — 應用舞台原則
- 次要 + 環境層？ — 增加豐富度
- 1/3 規則？ — 動態距離、同時移動的元素
三大支柱（關鍵）
每個動畫在進行任何技術決策前，必須滿足三大支柱：
| 支柱 | 問題 | 驅動因素 |
|---|---|---|
| 情感意圖 | 觀眾應該感受到什麼？ | 緩動、時機、幅度 |
| 視覺敘事 | 微故事是什麼？ | 設定 → 動作 → 解決 |
| 動態工藝 | 如何讓它看起來可信？ | 物理、次要動作、路徑 |
三個動態層（平面動畫 = 缺少層次）：
- 主要：觀眾跟隨的主要動作
- 次要：支援的豐富度（陰影、圖示移動）
- 環境：背景生命力（漸層、微脈衝）
動態個性
每個專案選擇一個原型。保持一致。
| 原型 | 持續時間 | 緩動 | 超調 | 關鍵字 |
|---|---|---|---|---|
| 活潑 | 150-300ms | ease-out-back | 10-20% | 有趣、俏皮、彈性、可愛 |
| 高級 | 350-600ms | cubic-bezier(0.4,0,0.2,1) | 0% | 優雅、簡約、奢華、精緻 |
| 企業 | 200-400ms | cubic-bezier(0.2,0,0,1) | 0-3% | 乾淨、專業、商業、儀表板 |
| 活力 | 100-250ms | ease-out-expo | 15-30% | 動態、有活力、大膽、刺激 |
預設：UI 使用企業，插圖使用活潑。
品牌動態識別 — 定義三個常數：
- 簽名緩動：80% 動畫使用同一條曲線
- 持續時間調色盤：3 種持續時間（快速 / 標準 / 慢速）
- 進入模式：一種一致的進入風格
屬性選擇
| 效果目標 | 主要屬性 | 次要屬性 |
|---|---|---|
| 進入/離開 | 位置 | 透明度、縮放 |
| 強調/注意 | 縮放 | 旋轉（輕微）、透明度脈衝 |
| 狀態變更 | 透明度、顏色 | 縮放（按壓回饋） |
| 方向/流動 | 位置 | 旋轉（沿路徑） |
| 深度/3D 感 | 縮放 + 陰影 | 位置（視差） |
| 載入/進度 | 旋轉（旋轉器） | 縮放、透明度脈衝 |
| 成功 | 縮放（彈出） | 顏色、旋轉（勾選繪製） |
| 錯誤/警示 | 位置（抖動） | 顏色、旋轉（搖晃） |
簡潔門檻：使用最少必要屬性。一個 = 直接。兩個 = 精緻。三個以上 = 可能過於複雜。
持續時間表
| 元素類型 | 持續時間 | 理由 |
|---|---|---|
| 工具提示 / 微回饋 | 80-120ms | 必須感覺即時 |
| 按鈕按壓 / 切換 | 120-180ms | 回應性回饋 |
| 圖示轉換 | 150-250ms | 清晰的狀態變更 |
| 卡片進入 / 離開 | 200-350ms | 空間感知 |
| 模態框 / 對話框 | 300-400ms | 焦點轉移 |
| 頁面轉場 | 400-600ms | 情境切換 |
| 戲劇性揭示 | 600-1200ms | 戲劇性鋪陳 |
距離影響持續時間：100px = 基準。200px = 1.3 倍。400px = 1.6 倍。
進入 > 離開：進入時間比離開長 30-50%。使用者關心出現的內容。
互動回饋：
- 懸停：<100ms
- 按壓：<150ms
- 釋放/穩定：200-300ms
- 錯誤抖動：300-400ms（2-3 次振盪）
緩動選擇
方向規則：
- 進入 → 減速（快速開始，平穩著陸）：ease-out 系列
- 離開 → 加速（平穩開始，快速離開）：ease-in 系列
- 螢幕上 → 兩端平滑：ease-in-out 系列
- 循環環境 → 無縫：基於正弦的 ease-in-out
業界標準：
| 標準 | Cubic Bezier | 用途 |
|---|---|---|
| Material Design 3 | (0.2, 0, 0, 1) | 預設螢幕上 |
| MD3 Emphasized | (0.05, 0.7, 0.1, 1) | 進入、注意 |
| MD3 Accelerate | (0.3, 0, 1, 1) | 離開、關閉 |
| Apple HIG | (0.25, 0.1, 0.25, 1) | 標準 iOS |
| Snappy UI | (0.2, 0, 0, 1) | 快速、果斷 |
| Gentle float | (0.4, 0, 0.2, 1) | 環境、背景 |
| Bounce settle | (0.175, 0.885, 0.32, 1.275) | 超調、活潑 |
材質緩動：
| 材質 | 持續時間比例 | 超調 |
|---|---|---|
| 剛性（金屬、石頭） | 1.2x | 0% |
| 彈性（橡膠、凝膠） | 0.8x | 15-25% |
| 流體（水、顏料） | 1.5x | 5% |
| 紙張（卡片、紙張） | 1.0x | 3-5% |
| 氣體（煙、霧） | 2.0x | 0% |
| 玻璃（易碎） | 0.9x | 0% |
常見模式
按鈕按壓（活潑）
- 預期：縮放至 0.97（50ms，ease-out）
- 擠壓：縮放至 [1.04, 0.96]（100ms，ease-in）
- 跟隨：超調至 1.02，穩定至 1.0（彈簧，200ms）
- 次要：按壓時陰影縮小，圖示向下移動 2px
- 總計：~150ms 按壓 + 200ms 穩定
卡片進入（高級）
- 開始：目標下方 20px，透明度 0
- 路徑：輕微曲線（中點 X 偏移 10px）
- 緩動：ease-out-cubic 減速
- 跟隨：陰影在卡片後 50ms 到達
- 次要：內容在卡片落地後 100ms 淡入
- 舞台：其他卡片變暗至 80%
成功狀態（活潑）
- 主要：使用 ease-out-back 縮放彈出
- 次要：勾選繪製
- 環境：微粒子爆發
- 顏色：綠色填充
- 總計：300-400ms
錯誤抖動（企業）
- 主要：位置振盪 2-3 次，±10-15px 水平
- 緩動：ease-in-out 以達到銳利停止
- 顏色：紅色調
- 總計：300-400ms
- 無超調：錯誤感覺堅定
編排要點
協調進入：
- 以主角領頭 — 主要元素最先或最突出地進入
- 空間一致性 — 所有元素從同一方向進入
- 反向運動 — 主角向右移動 → 環境以 20-30% 速度向左移動
1/3 規則（距離）：沒有動作在沒有關鍵幀變化的情況下移動超過螢幕的 1/3。
1/3 規則（元素）：有 3 個以上元素時，同時處於活躍運動的元素不超過 1/3。
交錯預算：
| 模式 | 延遲 | 總預算 | 使用案例 |
|---|---|---|---|
| 微級聯 | 20-40ms | <200ms | 列表項目、網格單元格 |
| 標準 | 50-100ms | <400ms | 卡片、面板、導航 |
| 戲劇性 | 100-200ms | <600ms | 主角區塊 |
| 波浪 | 30-60ms | <500ms | 資料視覺化 |
關鍵：總交錯時間必須保持在 500ms 以下。
情感到動作對應表
| 情感 | 特徵 | 路徑 | 緩動 | 持續時間 |
|---|---|---|---|---|
| 喜悅 | 彈性、弧線 | 彎曲、向上 | ease-out-back | 200-400ms |
| 平靜 | 平滑、流暢 | 柔和曲線 | sine ease-in-out | 500-1000ms |
| 急迫 | 銳利、快速 | 直線 | ease-out | 100-200ms |
| 悲傷 | 緩慢、向下 | 下垂曲線 | cubic ease-in-out | 600-1200ms |
| 驚訝 | 突然、擴張 | 徑向向外 | ease-out-expo | 150-300ms |
| 優雅 | 緩慢、受控 | 長弧線 | (0.4,0,0.2,1) | 400-700ms |
| 活潑 | 彈性、不規則 | 弧線、波浪 | ease-out-back | 200-350ms |
路徑作為語言：角形 = 緊張。曲線 = 友好。螺旋 = 俏皮。對角線 = 有目的。垂直 = 成長/重量。水平 = 進度。
重量分類
| 重量 | 範例 | 持續時間 | 超調 | 緩動 |
|---|---|---|---|---|
| 重 | 模態框、覆蓋層 | 300-500ms | 0% | 溫和、高阻尼 |
| 中 | 卡片、面板 | 200-350ms | 3-5% | 適中 |
| 輕 | 工具提示、徽章、圖示 | 80-200ms | 5-15% | 回應性 |
品質規則
關鍵 — 絕不違反
- 空間移動絕不使用線性 — 務必使用緩動曲線（線性僅用於旋轉器、進度條）
- 重要狀態變更絕不只用透明度 — 結合位置或縮放
- 絕不超過螢幕 1/3 而無中間關鍵幀
- 永遠三個動態層 — 主要 + 次要 + 環境
高 — 強烈建議遵循
- 根據元素類型匹配持續時間（參見表格）
- 使用方向性緩動（ease-out 進入，ease-in 離開）
- 應用迪士尼原則（尤其是預期、跟隨）
- 在場景中保持一致個性
疑難排解快速參考
| 問題 | 可能原因 | 修正 |
|---|---|---|
| 看起來機械化 | 線性緩動或無弧線 | 加入緩動曲線 + 弧形路徑 |
| 感覺太慢 | 持續時間對元素類型過長 | 檢查持續時間表，使用 ease-out |
| 感覺廉價/平面 | 缺少次要 + 環境 | 加入陰影運動 + 背景生命力 |
| 太分散注意力 | 太多元素移動 | 應用 1/3 規則，降低幅度 |
| 無個性 | 到處都是通用緩動 | 一致應用個性原型 |
檔案參考
哲學（director/）：
- core-philosophy.md — 三大支柱深入探討
- decision-framework.md — 完整決策流程
- disney-principles.md — 12 原則，UI 適用
- motion-personality.md — 4 原型 + 品牌識別
- emotion-mapping.md — 情感 → 動作 + 色彩心理學
- choreography.md — 多元素協調
- narrative-structure.md — 微故事框架
- context-adaptation.md — 平台、無障礙、效能
參考（reference/）：
- timing-easing-tables.md — 持續時間 + 緩動查詢
- property-selection.md — 屬性溝通指南
- troubleshooting.md — 動畫問題 + 修正
- quality-checklist.md — 評估標準
模式（patterns/）：
- entrance-exit.md — 進入/離開配方
- state-feedback.md — 成功、錯誤、載入、懸停
- ambient-continuous.md — 循環、呼吸、視差
- multi-element.md — 交錯 + 編排配方
