常有人以為，一個網站的動態特效愈細緻、轉場愈滑順，就代表設計團隊愈用心。捲動時淡入的文字、滑鼠移過去跳出的微光、切換頁面時滑進滑出的轉場，看起來確實比什麼都不動的靜態頁面更像有花心思。但兩大官方設計系統對這件事的態度，恰好跟這個直覺相反。Google 的 Material Design 3 明訂，動態特效如果對體驗不是真的必要，就該避免；Apple 的人機介面指南也要求，App 就算完全不靠任何動畫，使用者仍然要能正常使用。
動態特效（Motion Design）在這裡指的是介面上任何會動的元素，淡入淡出、位移、縮放、轉場，凡是隨時間變化的視覺效果都算。門檻降低是這幾年最大的改變，過去要工程師手刻時長與緩動曲線才做得出來的效果，現在框架與網站建置工具內建的模板一鍵就能套用。做得出來變得容易，不代表這個動態特效值不值得存在的判斷也跟著變容易。
動態特效正在從加分選項變成預設配置
捲動觸發元素位移或淡入、滑鼠移過去出現的 hover 微動態特效、頁面切換的轉場、資料還沒回來前的載入動畫，這幾種動態特效幾乎出現在每一個新做的網站或 App 裡。它們原本是刻意做出差異化的設計選擇，現在變成沒有反而顯得沒做完的預設配備。
Framer Motion、GSAP、Lottie 這類前端動態特效框架，加上各家網站建置工具內建的動態特效模板，讓做出一個轉場或位移效果的技術門檻大幅降低。以前要工程師逐一設定時長與緩動曲線才做得到的效果，現在挑一個模板套用就有了。這個轉變本身就值得被檢視，套模板做出來的動態特效，跟真正經過判斷這裡該不該有動態特效的動態特效，看起來可能一模一樣，決策的份量卻完全不同。
Google 的 Material Design 3 把動態特效的時長與緩動曲線列進正式的設計規格，Apple 的人機介面指南也用獨立章節說明動態應該怎麼設計。兩者都把動態當成正式規格的一部分，代表動態特效已經被制度化為業界的標準配置。但制度化不等於每個場景都該套用。
工具門檻降低，卻沒人計算代價
過去做一個轉場動畫，工程師得手動設定時長是幾毫秒、緩動曲線該用哪一種，每一個決定都要花時間衡量。現在框架與建置工具的模板一鍵套用，這個決策成本幾乎被抹平了。只是抹平的只是做出來這件事的成本，不是這個動態特效值不值得做的成本，這兩件事完全是兩回事。
同業之間互相模仿、看起來比較精緻或比較有科技感這類直覺判斷，取代了對代價的實際評估。沒有人真正衡量過某個動態特效會拖慢載入速度多少、會不會讓某些使用者頭暈，它就已經跟著模板一起上線了。
這裡說的代價至少有三種：使用者的注意力會不會被錯的東西吸走、頁面效能會不會被拖慢、部分使用者的生理反應會不會被忽略。
動態特效真正站得住腳的理由只有三種
國際使用者體驗研究機構 Nielsen Norman Group（以下簡稱 NN/g）把動態特效在介面設計裡真正站得住腳的用途歸納成三種：提供回饋、傳達狀態改變、建立空間方向感。除了這三種之外，其餘的動態特效多半只是裝飾。
純粹用來填補等待時間、或是想討好與娛樂使用者的裝飾性動態特效，在可用性測試中反而常常令人反感。NN/g 觀察到，受測者對這類動態特效常見的反應是一開始覺得新奇，多看幾次之後就開始感到厭煩，光是好看，不足以讓一個動態特效被留下來。
更值得注意的是，NN/g 明確把用動態特效綁架使用者注意力、營造稀缺焦慮感這種做法定性為暗黑模式，是不道德地濫用使用者體驗原則。動態特效可以被用來服務使用者，也可以被用來操控使用者，差別只在設計者的意圖。
周邊視覺天生容易被動態捕捉
人類的周邊視覺，也就是視網膜裡的桿狀感光細胞，演化上負責偵測動態，這是為了在環境中察覺危險、及時反應而留下來的機制。任何在螢幕角落移動的元素都會被大腦優先注意到，這一點跟這個元素有沒有意義沒有關係。
這正是動態特效雙面刃的生理根源。一個真正傳達重要狀態改變的動態特效，因為這個機制而更容易被使用者注意到，是好事。但一個純粹用來炫技或填空的動態特效，同樣會因為這個機制搶走使用者的注意力，變成跟手邊任務無關的干擾。演化留下來的這套偵測系統，並不會分辨哪一種動態特效值得被注意。
回饋、狀態轉換與空間定向三種站得住腳的用途
回饋型的動態特效，最常見的例子是點擊加入購物車後，商品圖示飛進購物車圖示裡。這個動作要對抗的是一種叫 change blindness 的現象，使用者的視線可能根本沒有停在購物車數字上，靜態的數字從 2 變成 3，使用者未必會注意到，但一個飛入的動畫，幾乎不可能被錯過。狀態轉換型的動態特效，常見的例子是編輯圖示變形成儲存圖示，這種轉場比直接切換兩個不同的圖示，更能傳達模式已經改變這件事。如果圖示瞬間跳換，使用者容易漏看這一格切換，繼續用編輯模式的操作邏輯去按接下來的按鈕，直到跳出跟預期不同的結果才驚覺自己其實已經在另一個模式底下。
空間定向型的動態特效，最典型的是手機選單用滑入方式覆蓋整個畫面，讓使用者理解這是疊加在原本頁面上的東西，不是跳到了一個新頁面。這件事看似細節，卻直接影響使用者的下一個動作，如果覆蓋層瞬間出現而不是滑進來，使用者可能誤以為換了新頁面，按下返回鍵想離開選單，結果卻是離開了整個頁面。三種用途各有各的職責，回饋讓動作被注意到，狀態轉換讓模式改變被理解，空間定向讓使用者知道自己在哪裡，凡是不屬於這三種的動態特效，多半只是裝飾。
版面重排的瞬間，才是效能代價現形的時刻
動態特效拖慢網站這句話，聽起來像是在講一件事，實際上發生的機制取決於動的是哪一個 CSS 屬性。改變寬度、高度、位置這類屬性，會觸發瀏覽器重新計算整個版面配置，也就是排版重算，這個成本遠比想像中高，因為牽動的往往不只是那個元素本身，還包括頁面上其他跟著要重新排列的元素。
相對地，只改變 transform 和 opacity 這兩個屬性的動畫，可以完全交給瀏覽器的合成器執行緒處理，不需要驚動負責樣式計算、版面排版、畫面繪製與 JavaScript 執行的主執行緒。Google 官方的網頁效能文件把這件事講得很直接，能只動 transform 和 opacity，就盡量只動這兩個屬性。維持 60fps 是動畫不卡頓的門檻，低於這個幀率，使用者就會直接感受到畫面頓挫。
效能代價最終都會反映在使用者留不留得住上。Google 一份針對九十萬則行動廣告到達頁面的分析發現，七成的頁面，畫面上可視內容要將近 7 秒才顯示得出來，完整載入常常要超過 10 秒。同一份分析也指出，行動網頁的載入時間只要從 1 秒拖到 10 秒，訪客中途離開的機率就會上升 123%。動態特效如果拖慢了載入或互動的反應速度，付出的不是工程師才在意的抽象指標，是實際的流量。
前庭與癲癇使用者要承擔的生理代價
視差捲動、大範圍的縮放或位移動畫，會讓有前庭功能障礙的使用者頭暈、噁心，嚴重時還會誘發偏頭痛，得暫停手邊的事臥床休息。這不是誇張的說法，NN/g 的動態特效研究就直接點名視差效果、輪播式的強制滾動，是這類使用者常見的觸發因子。
更嚴重的是光敏性癲癇，閃爍的視覺內容可能誘發癲癇發作，而且大多數帶有這種體質的人，在第一次發作前根本不知道自己有這個狀況。W3C 的無障礙規範文件就引用過一起真實事件，1997 年日本一部電視卡通因為畫面高頻閃爍，導致超過 700 名兒童送醫，其中約 500 人出現癲癇發作，這起事件後來成為制定無障礙規範的背景依據之一。
這也是為什麼 WCAG 明訂，網頁內容在任一秒內閃爍不能超過 3 次，就算真的需要閃爍效果，亮度變化的幅度也被壓在很窄的門檻內。這不是少數人比較敏感的小眾問題，而是嚴重到官方無障礙規範必須正式介入的公共安全問題。
這個代價嚴重到 Windows、macOS、iOS、Android 這幾個主要作業系統，都內建了減少動態效果的系統設定，網頁則可以透過 prefers-reduced-motion 這個媒體查詢偵測使用者的選擇並跟著調整。iOS 會加上這個選項不是憑空而來，iOS 7 上線那年，不少使用者反映新版的縮放動畫讓他們像暈車一樣頭暈想吐，蘋果後來才把減少動態效果這個選項加進系統裡。部分使用者需要少一點動態特效，已經是官方層級正式承認的需求，不是單純的個人偏好。
留下的動態特效，必須是拿掉會讓人看不懂的那種
前面三種代價，注意力、效能、生理反應，收攏起來會變成一個很實際的判準，拿掉這個動態特效之後，使用者還能不能看懂介面在做什麼、還能不能完成手上的任務。答得出來，代表拿掉了也不影響，這個動態特效就是裝飾，該砍。答不出來，拿掉之後使用者會愣住、不知道發生了什麼事，這個動態特效才是必要的回饋或定向線索，該留下來。
就算是留下來的動態特效，也要付得起代價，這裡有三個底線可以當佐證。NN/g 建議的時長區間落在 100 毫秒到 500 毫秒之間，簡單的回饋動畫大約 100 毫秒就夠，牽涉比較大範圍畫面變化的動態特效可以拉到 200 到 300 毫秒，一旦拖到 500 毫秒，使用者就會開始覺得這個動態特效拖慢了節奏。Google 官方的網頁效能文件建議盡量只動 transform 和 opacity 這兩個屬性，把成本留給合成器執行緒，不要驚動負責版面計算的主執行緒。第三個底線是尊重使用者的 prefers-reduced-motion 系統偏好，這個設定的存在本身，就是產業對動態特效有代價這件事的正式承認。
動態特效退場不是設計上的退步，是把使用者的注意力還給內容本身。真正會被記住的網站，靠的是把內容講清楚，不是滑入滑出的次數。下一次想幫某個元素加上動態特效之前，不妨先問自己一句，拿掉它，使用者還看得懂嗎。答不出來，就代表這個動態特效還沒有資格留下來。