微互動動畫設計完整指南

微互動動畫的三大功能

• 確認操作：讓使用者知道「按鈕按到了、操作成功了」
• 指引注意力：引導使用者看到該注意的地方（如新通知滑入）
• 增加愉悅感：讓互動有「回應」與「玩感」，提升好感度與品牌印象

七大關鍵動畫場景

• 1. 加入購物車：商品圖飛到右上角購物車，數字 +1 並彈跳（最重要）
• 2. 按鈕點擊回饋：按下時微縮放（scale 0.95）+ 顏色變化，讓使用者知道按到了
• 3. 表單驗證：輸入正確時綠勾號淡入；錯誤時欄位邊框輕微抖動
• 4. 收藏愛心：點愛心後爆破彈跳 + 顏色填充
• 5. 載入狀態：旋轉圖示或骨架載入（避免使用者以為當機）
• 6. 頁面轉場：淡入淡出（200-300ms）讓切換感更平順
• 7. 通知出現：從上方或右邊滑入，3-5 秒後自動淡出

加入購物車動畫的經典實作

加入購物車動畫是最值得做好的微互動。實作步驟：使用者點「加入購物車」→ 商品圖小縮圖出現在按鈕位置 → 沿著貝茲曲線「飛」到右上角購物車圖示 → 飛到時購物車圖示微縮放 + 數字 +1 + 短暫變色。總時長 500-700ms。這個動畫做對的好處：使用者明確知道操作成功；知道購物車在哪；不會懷疑「剛剛有按到嗎？」而重複加入。實測顯示有此動畫的網站，重複加入購物車的錯誤率降低 60%。

CSS Transform 與效能

動畫效能關鍵在於「動畫哪個屬性」：

• 高效能（GPU 加速）：transform（移動/縮放/旋轉）、opacity（透明度）
• 中等：filter（模糊/亮度）、background-color
• 低效能（避免）：width、height、top、left、margin、padding

範例：把元素往右移動 100px，用 transform: translateX(100px) 而非 left: 100px。前者瀏覽器用 GPU 加速幾乎無負擔，後者會觸發重新排版（reflow）拖累整頁效能。

動畫時長的黃金規則

不同類型動畫的合適時長：

• 按鈕點擊回饋：100-200ms（要即時感）
• 表單驗證：200-300ms
• 選單展開/收起：250-350ms
• 彈窗出現：300-400ms
• 頁面切換：300-500ms
• 加入購物車：500-700ms（要看得到飛的軌跡）

原則：超過 700ms 就會讓使用者感到拖延，盡量避免。

緩動函數（Easing）的選擇

動畫不要用 linear（線性等速），會顯得僵硬不自然。建議使用：ease-out（先快後慢，適合元素「出現」）；ease-in（先慢後快，適合元素「消失」）；ease-in-out（兩端慢中間快，適合穿插動畫）；cubic-bezier 自定義曲線（追求精緻品牌可微調）。最常用的是 ease-out，符合物理世界「物體減速停下」的直覺。

無障礙與「減少動畫」設定

部分使用者對動畫敏感（前庭功能失調、注意力缺失症等），需要設計考量：

• 使用 CSS @media (prefers-reduced-motion: reduce) 偵測作業系統偏好
• 偏好減少動畫的使用者，動畫改為瞬間切換或極短時長
• 提供使用者自選「關閉動畫」選項
• 避免閃爍快於 3 次/秒（可能誘發癲癇）
• 動畫不要是傳達關鍵資訊的唯一方式

過度動畫的反效果

動畫不是越多越好。常見的「動畫過剩」反效果：每個元素都會跳動讓人眼花撩亂；動畫太長拖延使用者操作；動畫太頻繁的彈窗讓人煩躁；行動版動畫太多會耗電影響電池壽命；動畫干擾使用者閱讀內容（如不停跑馬燈）。原則：一個頁面同時最多 2-3 個動畫，主要動畫在「主要操作點」，其他次要互動用簡單的視覺回饋即可。

常見問題解答