動畫加分還是扣分？網站動效的取捨原則

客戶看了別人的網站，常會問「我們也可以加那種滑動特效嗎？」可以，但先聊聊值不值得。動效是調味料——用得準畫龍點睛，倒太多整鍋壞掉。

動效的本質是「溝通」，不是「炫技」

好的動效在替介面說話：按鈕按下去微微下沉，是在告訴你「我收到了」；區塊隨捲動淡入，是在引導你的視線「接下來看這裡」；背景視差滾動，是在營造空間的層次感。每一個動效都應該回答得出「它幫使用者理解了什麼」——回答不出來的，就是純裝飾，而純裝飾是有代價的。

動效的三種代價

1. 效能代價：動畫觸發重排（reflow）會讓頁面卡頓，特別是在中低階手機上。只用 transform 和 opacity 做動畫是基本紀律，因為它們走 GPU 合成，不會卡住主執行緒
2. 等待代價：進場動畫每多 0.3 秒，訪客就多等 0.3 秒才能看到內容。首屏文字被動畫「扣住」超過半秒，就是本末倒置
3. 暈眩代價：大範圍的移動、縮放、視差對前庭敏感的使用者會造成不適。CSS 的 prefers-reduced-motion 可以偵測使用者是否在系統開了「減少動態效果」，這不是加分項，是基本尊重

我們的取捨清單

情境	建議
按鈕、連結的 hover 回饋	✅ 必做，100-200ms 短動效
區塊捲動淡入	✅ 適量，一頁 2-3 處、只播一次
背景視差	⚠️ 可做，幅度小於 20%，記得停用於 reduced-motion
自動輪播	⚠️ 慎用，多數人只看得到第一張
進站 Loading 動畫	❌ 除非內容真的需要預載

一個簡單的自我檢驗

把網站給沒看過的人用 30 秒，然後問他「有注意到什麼動畫嗎」。最理想的答案不是「哇那個特效好酷」，而是「嗯？好像有，但很順」——動效做到讓人感覺不到動效，就是做對了。