介面動畫系統 是做什麼的？
目的
介面動畫系統提供一套設計「功能性動畫」的方法論——那些在使用者介面中具有特定目的的動作。它超越純裝飾性的動畫，建立一套包含時長、緩動曲線與編排的系統，幫助使用者理解空間關係、提供操作回饋，並在情境轉換時降低認知負擔。
使用案例
- 為 UI 元件庫定義標準的轉場時長與曲線。
- 設計複雜的佈局變化（例如將卡片擴展為全螢幕）。
- 為使用者動作建立回饋動畫（例如成功勾選記號、載入旋轉器）。
- 編排 UI 層（模態框、抽屜、提示訊息）的進入與離開。
- 利用動畫將注意力引導至特定元素或變化。
何時不該使用
- 純靜態品牌美學： 視覺風格刻意避免動作以傳達特定調性（例如極簡、粗獷或「紙質」設計）。
- 純裝飾「炫技」： 沒有增加任何功能價值且干擾使用者主要任務的動畫（例如背景元素無互動地移動）。
- 高延遲環境： 當渲染動畫的效能成本超過 UX 效益時，導致「卡頓」或延遲。
輸入
- 品牌個性： 動畫是「敏捷/高效」（快速、線性）還是「自然/流暢」（彈性、柔和、有機）？
- 互動情境： 移動的是什麼？（原子元素、容器或整個頁面）
- 觸發類型： 動畫是由系統（載入）、使用者（點擊/懸停）還是環境（捲動）觸發？
- 平台能力： 目標瀏覽器或裝置的技術限制。
輸出
- 時長尺度： 一組標準化的時間記號（例如
motion-fast、motion-standard、motion-slow）。 - 緩動調色盤： 為不同動畫意圖定義的貝茲曲線集（例如
ease-in、ease-out、emphasized）。 - 編排規則： 元素如何進入、離開以及彼此相對移動的標準。
- 動畫記號規格書： 提供給開發者的動畫變數文件。
工作流程
1. 建立時長尺度
根據變化的大小建立合理的時間進程：
- 快 (100–150ms)： 微互動與原子狀態（懸停、切換、啟用）。
- 標準 (200–300ms)： 中等大小的轉場（下拉選單、工具提示、小型展開）。
- 慢 (350–500ms)： 大型佈局變化或沉浸式轉場（模態框、頁面級變化）。
2. 定義緩動曲線
為不同的貝茲曲線賦予語義：
- 標準 (Ease-in-out)： 用於元素在視口內從一點移動到另一點。
- 進入 (Ease-out)： 用於元素出現或進入視口（開始快，結束慢，感覺靈敏）。
- 離開 (Ease-in)： 用於元素消失或離開視口（開始慢，結束快，感覺有目的性）。
- 強調 (複雜)： 用於需要高品質感受的主要轉場的自訂曲線（例如
cubic-bezier(0.4, 0, 0.2, 1)）。
3. 為空間心智模型設計
利用動畫來說明元素從何而來以及將往何處：
- 方向連續性： 如果抽屜從右側滑入，就必須從右側離開。
- 父-子關係： 子元素（例如選單）理想情況下應從其父元素（按鈕）出發。
4. 編排序列（錯開效果）
當多個元素同時出現時，避免「彈入」效果：
- 錯開效果： 在每個元素之間加入微小的延遲 (20–50ms) 來引導視線按特定順序移動。
- 方向性錯開： 按照閱讀方向（從上到下或從左到右）錯開項目。
5. 規劃無障礙（減少動畫）
動畫必須具有包容性：
- 「起飛前」檢查： 始終為在作業系統層級啟用「減少動畫」的使用者定義降級方案。
- 替代視覺效果： 當
prefers-reduced-motion啟用時，用透明度淡入或完全無動畫來取代動畫。
決策規則
- 「功能優先」規則： 如果你無法解釋某個動畫告訴使用者什麼，就移除它。
- 響應式時長： 在小螢幕（手機）上時長應更短，因為元素移動的物理距離較小。
- 動作回應速度優先於流暢度： 互動回饋（例如按鈕點擊）應感覺瞬間完成 (<100ms)，即使後續的轉場較長也沒關係。
- 無無限循環： 避免不停循環的動畫（旋轉器、脈衝），除非它們代表一個活動中的、封鎖背景的狀態。
限制
- 無障礙： 必須遵守
prefers-reduced-motion。動畫不得引發癲癇（避免快速閃爍或大規模高頻模式）。 - 效能： 堅持只使用「合成器專用」屬性（
transform和opacity）以確保 60fps 效能。避免對width、height或margin進行動畫。 - 一致性： 在整個網站中，對同一元件類型使用相同的時長和緩動。
常見失敗模式
- 「暈車」陷阱： 使用大規模、大範圍的動作（例如整個頁面滑動），導致前庭不適。
- 介面遲緩： 設定過長的時長（例如選單用了1秒），讓使用者等待，讓網站感覺故障。
- 線性動畫： 使用「線性」緩動，與現實世界中的加速/減速相比，感覺機械且不自然。
- 方向混淆： 模態框從中心「展開」但從底部「滑出」，破壞了使用者的空間模型。
- 「抖動」效果： 錯開元素時延遲過長，使頁面感覺載入緩慢。
驗證標準
- 每個轉場都有定義的時長和緩動記號。
- 時長與轉場的大小成比例（變化小則快，變化大則慢）。
- 動畫支援清晰的空間心智模型（符合邏輯的進入/離開）。
- 使用錯開效果來揭示多元素，以引導視線。
- 無障礙：已針對
prefers-reduced-motion提出明確的簡化策略。 - 效能：頻繁動畫僅使用
transform和opacity。 - 回饋動畫（例如按鈕點擊）在 <100ms 內開始。