Figma 視差效果教學：滑鼠追蹤互動，沉浸式體驗

排版乾淨、配色也對、圖也選得不錯，為什麼這個 Hero 區看起來還是那麼「平」？它沒有錯，可它也不會讓人多看一眼。這篇要談的，就是讓一個平凡畫面突然有呼吸感的那一招：滑鼠追蹤視差效果（mouse-tracking parallax）。

快速結論先給你。視差效果的原理，是讓畫面裡不同圖層以不同幅度移動，藉此騙大腦產生立體深度。在 Figma 裡，你沒有辦法做到真正意義上「讀取游標座標」的原型，但你可以用互動元件、變數、Smart Animate 與外掛，把這個效果模擬、展示、交給開發。真正會跟著滑鼠轉動的版本，仍要在瀏覽器裡用 JavaScript 實作。所以這篇不只是「按哪個按鈕」，而是把從設計到落地、從美感到手機效能的整條鏈一次講清楚。

想像一下你的 Hero 區會跟著滑鼠呼吸

一個靜態畫面，本質上是一張海報。海報沒有不好，但海報不會「回應」你。當你把滑鼠移過去，畫面裡的前景跟著游標微微偏左、中景幾乎不動、遠景往反方向飄，你的大腦會瞬間得到一個訊號：這個空間有深度，我是站在這個空間裡。這就是沉浸感（immersion）的來源。

我用一個比喻：靜態畫面像櫥窗裡的假人，視差畫面像一個會轉頭看你的店員。後者不一定比較漂亮，但更容易吸引注意。這也是為什麼品牌官網、作品集、活動 Landing Page 的 Hero 區常用這招。它能把「好看」變成「想互動」，但能不能改善轉換，仍要看內容、速度與操作是否符合情境。

但我要先潑一桶冷水。視差是調味料，不是主菜。一個內容空洞的頁面加上視差，只會讓訪客更快發現裡面沒料。如果你還在打底，先回頭把資訊架構與內容顧好；互動設計是加分題，不是救命的。對網頁設計的全局還不熟的讀者，可以先看這份網頁設計完整指南，再回來玩效果。

視差效果到底在騙大腦什麼

要做出好看的視差，你得先理解它在視知覺上到底做了什麼。人類判斷距離，靠的是運動視差（motion parallax）：當你的頭或視線移動時，近的東西跑得快、遠的東西跑得慢。你坐火車看窗外就會感覺到，電線桿咻一下過去，遠方的山卻幾乎不動。大腦把「移動速度的差」直接翻譯成「距離的差」。

視差效果做的事，就是在 2D 螢幕上偽造運動視差。你不用真的做 3D，只要讓不同圖層在游標移動時，用「符合真實物理直覺」的相對幅度位移，大腦就會自動腦補出前後關係。關鍵字是「相對幅度」。不是每一層都要動，也不是動越多越立體。

這裡藏著一個大多數教學不會講的秘密：視差的說服力，來自層與層之間的「比例」，而不是單層的位移量。你把前景設成移動 16px、中景 8px、背景 2px，跟全部都移動 16px，前者立體、後者只是整坨在晃。所以做視差的第一功課，不是學軟體，是訓練自己對「速度差」的敏感度。這跟學配色很像，配色做不好的人，問題通常不在工具，在還沒建立色彩判斷。視差也是同一回事。

先分清楚：滑鼠追蹤視差和滾動視差是兩件事

很多人把這兩個混在一起，做出來的東西就四不像。它們的互動邏輯、設計節奏、適合的頁面類型完全不同。

滾動視差（scroll parallax，也常被稱為視差滾動）是綁定頁面捲動的。你往下滑，背景慢慢走、前景正常走，產生一種「鏡頭往前推進」的電影感。它適合長頁面、故事性強的內容，例如品牌故事、產品介紹。在 WordPress 世界裡，Divi 主題對這類效果支援得很完整，想知道怎麼在實際網站上落地，可以參考Divi 視差滾動的實戰教學。

滑鼠追蹤視差（mouse-tracking parallax）則是綁定游標位置的。你不滾動，畫面也會跟著游標微微轉動，像一個 3D 物件在回應你。它適合的是靜止狀態下要抓住注意力的區塊，最典型的就是首屏 Hero、產品展示卡、互動式插畫。這篇要談的就是這一種。

判斷的標準很簡單：你想讓使用者在「不滾動」的瞬間就被吸引，用滑鼠追蹤；你想讓使用者在「往下探索」的過程中被帶著走，用滾動視差。兩者也能混用，但混用是高階操作，新手請先分開練。這張對照表幫你把兩者的差異一次分清楚。

維度	滑鼠追蹤視差	滾動視差
觸發來源	游標 X/Y 座標	頁面捲動位置
適合區塊	首屏 Hero、商品卡、互動插畫	品牌故事、長頁面敘事
行動裝置	幾乎失效（沒有游標）	可改用陀螺儀或捲動 fallback
主要風險	暈眩、效能、可及性	捲動卡頓、CLS
設計重點	分層比例與克制	節奏與停留點

Figma 沒有真正的「滑鼠座標追蹤」

這段是整篇最關鍵、也最容易被其他教學模糊掉的地方，我要講白。Figma 的原型功能，目前沒有辦法直接讀取游標的即時座標並驅動圖層移動。它有 hover、有點擊、有延遲、有 Smart Animate，但沒有一個「while mouse move」的事件節點。

所以當有人跟你說「在 Figma 裡做滑鼠追蹤視差」，嚴格說有三種可能的真相：

1. 模擬：用 hover 進入某個區域觸發一個位移變體，讓你看起來像游標靠近時畫面有反應。這是體感逼近，不是真的追蹤。
2. 展示：把游標位置切成幾個區塊（九宮格或更多），每一格對應一個不同的變體，hover 到哪一格就跳哪個狀態。切得夠細，Demo 時就有「跟著游標轉」的錯覺。
3. 交給開發：在 Figma 裡把分層、幅度、緩動曲線設計好並標註清楚，真正的 mousemove 監聽與 transform 是前端工程師在瀏覽器裡用 CSS 或 JavaScript 實作的。

換句話說，Figma 是你設計與溝通這個效果的地方，不是它最終跑起來的地方。這不是 Figma 的缺陷，這是設計工具與執行環境的分工。把這條邊界想清楚，你才不會在 Figma 裡死命追求一個做不到的「完美即時追蹤」，然後覺得是自己不會用。如果你想深入了解 Figma 原型能做什麼、不能做什麼，Figma 完整教學裡有更全面的整理。

三種在 Figma 裡逼近滑鼠追蹤效果的方法

既然沒有原生 mousemove，我們就用上面那三種真相，發展出三條實作路線。它們各有適用場景，不是誰高誰低。

方法一：用互動元件與變數模擬位移

這是最接近「真實互動」的做法，也是 Figma 加入 Variables 與進階互動元件之後才變得可行的路線。思路是這樣：把 Hero 的容器切成一個隱形的九宮格（或更多格），每格是一個透明的熱區，hover 到不同熱區時，透過互動元件切換到不同的「視角變體」。

具體拆解：

• 把你的 Hero 畫面裡需要動的圖層，依景深分成背景、中景、前景（下一節會詳細講這個架構）。
• 建立一個元件（Component），裡面放幾個變體（variants），每個變體代表「游標在某方位時」畫面該長怎樣。例如左上、正上、右上、左中、正中、右中、左下、正下、右下，共九個視角。
• 在每個變體裡，前景、中景、背景依各自的幅度規則偏移。前景偏最多，背景偏最少，方向要符合直覺（游標往左，前景往右偏，模擬你往左看、近物往右跑）。
• 把容器疊上九宮格熱區，每個熱區的 hover 事件指向對應的變體，搭配 Smart Animate 做補間。

這個做法的優點是可互動、可 Demo，客戶把游標移過去真的會看到反應。沒辦法當面示範時，把原型預覽錄成 MP4，或把畫面匯出成 SVG、GIF 當提案附件，也是常見的展示形式，只是這三種格式都屬於展示用，不等於可上線的互動成品。缺點是它畢竟是「跳變體」，不是連續追蹤，格數切太少會有頓挫感，切太多會做到瘋掉。實務上九到十六格是甜蜜點。

方法二：用 Smart Animate 做方向性補間

如果你不想搞九宮格，只想做一個「滑鼠進入時畫面輕輕一扭」的效果，這個方法最快。你只需要兩個畫面：預設狀態、與 hover 狀態。hover 狀態裡，前景往某個方向偏幾像素、背景往反方向偏一點，中間用 Smart Animate 補間。

它不是真的追蹤，但它傳達的訊號是一樣的：這個畫面有深度、會回應你。對很多品牌官網來說，這個等級的互動就夠了，而且實作成本極低。這跟你做按鈕動畫是同一個思路：用最小的動態傳遞最大的回饋感。

進階一點，你可以疊兩層 hover 熱區（左半邊、右半邊），這樣游標在左邊時畫面往右扭、在右邊時往左扭，就已經有「跟著游標」的雛形。再用 Smart Animate 的緩動曲線把補間拉到 300 到 500 毫秒，手感會相當自然。

方法三：靠外掛幫你把分層位移自動化

如果你不想手動搬每個變體裡的圖層，Figma 社群裡有專門處理視差與分層位移的外掛。它們的做法多半是：你選好哪些圖層屬於哪一層、設定每層的位移係數，外掛幫你算出每個變體該長怎樣，甚至直接產出一份可交給開發的規格。

用外掛的好處是快，而且係數算得比手動精確。壞處是你要先搞懂自己的分層邏輯，外掛才知道要算什麼。換句話說，外掛是幫你「執行」，沒辦法幫你「決定」。決定分層與幅度，永遠是設計師的功課。這跟用圖示外掛是一樣的道理，工具幫你省時間，但品味是你自己的。

挑外掛時我會看三件事：能不能匯出給開發的標註、支不支援響應式畫框、以及它的位移是寫死還是可調。會問這三個問題，你就不會被華麗的 Demo 影片騙去裝一個用不到兩次的外掛。同樣的篩選邏輯，在判斷外掛值不值得裝的四個標準裡有更完整的整理，剛開始建立自己的外掛工具箱時很值得對照。

景深三層架構（深度預算思維）

這節是整篇我最想留下來的東西。從各種畫面的實作經驗裡，可以歸納出一個簡單但好用的模型，稱為景深三層架構，背後的核心觀念是「深度預算」。

深度預算的意思是：一個畫面能負載的景深層次是有限的，就像一頁能塞的字數有限。你硬塞十層，大腦解析不過來，就會變成噪音。我自己的經驗法則是最多三層有意義的景深：遠景、中景、前景。偶爾加一層極前景（例如一片模糊的葉子貼在鏡頭前），那是電影手法，用一次是驚喜，用兩次是浮誇。另一個同樣在玩前景與背景模糊關係的效果是玻璃擬態，差別在於它糊的是玻璃後方的內容，想深入可以看Figma 玻璃材質的實作解析。

每一層的角色與位移規則我固定下來，這樣設計時不用每次重新想：

層級	內容舉例	位移幅度（相對游標）	額外處理
遠景	天空、漸層底、山形	約 1% 到 3%	可微幅模糊、降飽和
中景	主視覺主體、建築、商品	約 5% 到 8%	保持銳利、對焦點
前景	裝飾元素、光點、文字浮標	約 10% 到 16%	可加投影強化脫離感
極前景（慎用）	一片葉、玻璃反光	20% 以上	重度模糊，僅點綴

幅度是相對於游標移動量的百分比。游標從畫面中央移到邊緣是 50% 的位移，前景就乘上 0.10 到 0.16，等於位移 5% 到 8% 的畫面寬。這個數字不是鐵律，但是個安全的起點；初學者最常犯的錯，就是一上來就把前景設成 30%，結果整個畫面像在暈船。

還有兩個小原則不能漏。第一，主體（中景）盡量不動，或動得最少。因為主體是觀眾要看清楚的東西，它一晃，訊息就糊掉。視差的戲份交給前後景，主體穩住。第二，文字要特別小心。文字一旦跟著視差飄，可讀性會掉得很快。我的習慣是正文文字完全不參與視差，只有裝飾性大字（背景水印那種）才跟著前景動。

這套架構也跟排版紀律有關。你分層時要對齊、要留安全邊際，才不會位移時邊緣露餡。如果你還沒建立排版與網格的習慣，先花一個下午把Figma 的網格系統搞熟，視差做起來會順很多。

從零做一組會跟著游標轉動的 Hero：逐步拆解

觀念講完了，來實作。我用一個最常見的場景示範：品牌官網首屏，中間一個產品圖，背景是漸層與光暈，前景有幾個裝飾光點。走一遍完整流程。

第一步，準備分層素材。把畫面拆成三個明確的層次：背景漸層與光暈一層、產品圖一層、前景光點與裝飾一層。每一層在 Figma 裡用獨立的 Frame 或 Group 包好，命名清楚（background / subject / foreground）。這個命名不是潔癖，是後面交給開發時他們要靠這個對應位移係數。

第二步，決定畫框與安全邊際。位移會讓圖層偏移，如果你的圖層跟畫框一樣大，一偏移就露出空白。解法是每一層的素材都要比可見範圍大出一圈安全邊際。前景動最多，邊際留最多（我習慣留位移量的兩到三倍）。背景動最少，邊際留最少。這是新手最常翻車的地方，畫面邊緣突然出現一道白邊，就是沒留邊際。

第三步，建立元件與九宮格變體。把整組 Hero 包成元件，複製出九個變體，對應九個游標方位。在每個變體裡，依三層架構的幅度表，搬移前景與背景圖層。中景（產品圖）保持置中不動。搬的時候注意方向：游標在左上，前景往右下偏（與游標反向，模擬近物相對運動），背景往左上偏（與游標同向，模擬遠物幾乎不動甚至反向）。

這裡的物理直覺再強調一次。近的東西，當你視線（游標）往右移，它應該往左跑；遠的東西，幾乎不動，或微微往同方向。你坐火車看近處電線桿與遠山就是這樣。把這個直覺內化，你的變體位置就不會填錯。

如果你怕自己填錯方向，我整理一張九宮格對照表，直接把每個方位的游標位置、前景偏移、背景偏移寫死。這是每開新專案時可以照著抄的起點，數值是相對方向，不是絕對像素，你把前景幅度套上自己的係數就能用。

游標方位	前景偏移	背景偏移	視覺效果
左上	右下	左上（微量）	視線往左上，鏡頭像往右下傾
正上	正下	不動	抬頭感，前景被往下推
右上	左下	右上（微量）	視線往右上，鏡頭像往左下傾
左中	右	左（極微量）	側頭往左，近物往右讓
正中（預設）	不動	不動	基準狀態，回正時回到這格
右中	左	右（極微量）	側頭往右，近物往左讓
左下	右上	左下（微量）	低頭往左，鏡頭像往右上抬
正下	正上	不動	低頭感，前景被往上推
右下	左上	右下（微量）	低頭往右，鏡頭像往左上抬

有兩個細節值得記下來。其一，背景的位移幅度我標的是「微量」與「極微量」，因為背景一旦跟著跑太多，整個空間感會垮掉，變成背景也在晃。其二，正中那一格是回正的基準，所有偏移最終都要能回到這格的狀態，所以它的素材必須是構圖最完整、邊際最足的版本，當作其他八格的對齊錨點。

第四步，疊熱區與連結互動。在 Hero 容器上疊一層透明熱區，切成九宮格。每格設定 hover 事件，change to 對應的變體，transition 選 Smart Animate，緩動用 ease-out，時間設 200 到 350 毫秒。太短會跳、太長會黏，這個區間最自然。

第五步，預覽與微調。開原型預覽，把游標實際移過每一格，看轉場順不順、幅度會不會太大、有沒有露白邊。這階段我會反覆調兩件事：位移幅度與緩動時間。幅度通常要往下修，因為靜態設計時覺得剛好的量，動起來往往太誇張。

第六步，寫交件標註。這步很多人省略，結果開發做出來完全走樣。你要在 Figma 裡（或一份附帶文件）寫清楚：每一層是誰、位移係數多少、緩動曲線是什麼、行動裝置要不要關掉。第六步做完，這個效果才算真的「完成」，否則它只是 Figma 裡一個自爽的 Demo。

位移幅度怎麼抓才不會看起來廉價

視差效果之間，高雅與廉價的差別，八成在幅度。我整理幾個判斷原則，幫你避開最常見的過頭。

原則一：寧可無感，也不要浮誇。一個好的視差，是觀眾「感覺到深度」卻「說不出哪裡在動」。如果一打開就有人指著畫面說「這個在動」，那就是動太多。把幅度先設到你直覺的一半，通常才是對的量。

原則二：層與層的幅度比要拉開。前景 12%、中景 4%、背景 1%，這個比例關係比絕對數字重要。比例拉不開，看起來就是整坨平移，沒有立體感。我會建議前景與背景的幅度比至少五倍以上。

原則三：加一點旋轉會更逼真。純位移有時還是偏平。如果主體適合，給它加一點點（真的很小，1 到 2 度）的旋轉，模擬你側頭看物件的輕微角度變化，深度感會再上一個檔次。但旋轉非常容易過頭，加完一定要離開座位走兩步再回來看。

原則四：緩動曲線決定高級感。線性移動很機械，看起來廉價。用 ease-out 或更柔和的曲線（例如 cubic-bezier 接近 ease-in-out 的變體），讓移動有起手式與收尾，質感會差很多。這跟做載入動畫是一樣的道理，曲線就是動態的呼吸。

給你一個可以直接抄的起點：進場我用 cubic-bezier(0.22, 1, 0.36, 1) 這條偏 ease-out 的曲線，時間落在 280 毫秒上下；游標離開時的回正，則換成更柔的 cubic-bezier(0.4, 0, 0.2, 1)，時間稍微拉長到 400 毫秒左右，讓它像慢動鬆手。這組數字不是真理，而是實作上反覆驗證後「不會出大錯」的安全牌。你拿去改，但每次只動一個參數，才看得出差別出在哪。一次調整好幾個，等於把感覺混在一起，永遠學不到自己的手感。

原則五：永遠加一個回正。游標離開畫面時，所有圖層要緩緩回到正中。沒有回正的視差，會留下位移過的殘局，看起來像是壞掉。這個細節很多教學不講，但它是一個畫面「完成度高不高」的關鍵。

手機上視差幾乎一定會先死掉

這是最現實、也最常被漏掉的一段。滑鼠追蹤視差，顧名思義，要有一個滑鼠。手機沒有滑鼠，只有手指，而手指不 hover。所以一套桌面端做得漂亮的滑鼠追蹤視差，到了手機上完全不會觸發，畫面會退化成一個靜態構圖。

這本身不是壞事。一個會優雅退化的靜態構圖，其實是手機端最該有的樣子。怕的是兩種情況：一是有人硬要在手機上用 touchmove 模擬，手指滑一下畫面跟著晃一下，這個體感非常差，多數使用者會覺得網站壞了；二是有人把效果綁死，手機端連靜態版都跑不出來，整個 Hero 空白。

為什麼這件事不能輕忽？因為手機早就不是次要裝置。根據 Statista 的統計（2026 年 4 月），全球網站流量來自行動裝置的比例已經長期過半，而且持續上升。你設計的任何效果，預設要假設超過一半的人是在手機上看。如果一個效果在手機上會壞掉或變難用，那它就不能是核心體驗，只能是增強。

所以正確的做法是：行動裝置預設關閉滑鼠追蹤，退回靜態構圖。這個靜態構圖必須本身是成立的、好看的、訊息清楚的，不能是「少了視差就破功」的半成品。這也是為什麼前面我反覆強調，靜態排版要先顧好。想要把手機版的深度感救回來一點，可以用陀螺儀視差（裝置傾斜觸發微量位移），但那是另一套做法，而且要非常克制，否則會讓人暈。響應式的整體策略，可以一併參考響應式網頁設計的完整梳理。

陀螺儀視差要真的上線，有三個我一定會把關的點。第一，幅度要比桌面版再砍一半到三分之一，因為手持時的微小傾斜，經過感測器放大後會變成劇烈晃動。第二，要加一個明顯的死區，裝置在死區內的傾斜不觸發任何位移，否則使用者只是呼吸稍微動一下手，畫面就在抖，體感非常廉價。第三，尊重使用者作業系統的減少動態設定，偵測到就完全停用。這三點顧好，陀螺儀視差才會是加分而不是騷擾；顧不好，它會比完全不做更傷品牌觀感。

互動不能吃掉你的 Core Web Vitals

視差會動、會漂亮，但它也有代價。效能主要影響使用者體驗與留存，Google 的排名系統也會參考部分網頁體驗訊號，因此不能只把它當成美學問題。

先講排名這端。Google 早從 2018 年就把網頁速度納入行動搜尋的排名因素（見 官方部落格公告），後來進一步把速度、行動友善、HTTPS、無侵入性插頁等指標整合成「網頁體驗」（page experience）這個評估框架（見 2020 年 5 月的 〈Evaluating page experience〉）。這些訊號合在一起，傳遞的是同一件事：你的網站對真人好不好用，Google 在看。

視差效果如果在實作端沒處理好，可能傷害幾個關鍵指標。mousemove 觸發頻率很高，如果每一次移動都修改 DOM、讀取版面，主執行緒容易變忙，畫面也可能卡頓。CLS 也有風險：如果視差圖層沒有預留空間，或字型載入時版面仍在位移，畫面就會跳動。這些問題可能反映在Core Web Vitals與轉換表現上；排名仍由許多訊號共同決定，不能只看單一分數。

所以交給開發時，有幾個效能原則要一起講清楚：

• 位移優先用 transform。相較於頻繁修改 top 或 left，transform 通常更適合動畫，也較不容易反覆觸發版面重排；實際是否進入獨立合成層仍由瀏覽器與頁面狀態決定。
• 控制更新頻率，謹慎使用 will-change。用 requestAnimationFrame 合併畫面更新；will-change: transform 只放在確實會動、數量有限的圖層上，避免長時間大量宣告。
• 行動裝置直接停用。用手機就是關掉，別勉強。省下的效能與電力比那一點點深度感值錢太多。
• 圖片要壓。視差通常要多帶幾層大圖，這些圖是效能與流量的隱形殺手。務必做好壓縮與格式最佳化，相關工具可以參考圖片壓縮工具的整理。

另一個現實是，多數網站根本不是從零刻出來的，而是跑在 CMS 上。W3Techs 的長期追蹤（2026 年 6 月）顯示，WordPress 一直佔據全球網站 CMS 市佔的絕對多數。也就是說，你設計的視差效果，很可能要裝進一個 WordPress 佈景主題或頁面編輯器裡。這時候「設計稿能不能被這套工具實作」就是真問題。例如頁面編輯器對自訂 JavaScript 與分層結構的支援程度，會直接決定你的九宮格變體能不能落地。效能調校的全局觀念，載入速度優化全攻略有更系統化的整理，強烈建議配套讀。

哪些頁面值得用視差，哪些只是噪音

不是每個頁面都該加視差。一個判斷標準：這個頁面的主要任務是「讓人沉浸」還是「讓人讀完」？沉浸型適合視差，閱讀型反而可能被視差分散注意力。

適合用的：

• 品牌官網首屏：建立第一印象的關鍵三秒，深度感會大幅提升品牌高級感。這也是為什麼品牌網站設計特別重視 Hero 的互動層次。
• 作品集與攝影集：視差能把平面作品變成可探索的空間，這對作品集網站是很大的加分。
• 活動與產品 Landing Page：在轉換漏斗最上層抓住注意力，但仍要用實際數據確認視差是否幫助理解與操作。想知道 Hero 區怎麼跟轉換目標搭配，可以看Landing Page 轉換指南。
• 互動式插畫與節慶頁：本身就是為了「玩」而存在，視差是主菜不是配菜。

不該用的：

• 長篇內容與教學文章：讀者要專心讀字，畫面一直晃會讓人煩躁，甚至直接離開。這對跳出率是反效果。
• 表單與結帳流程：這種頁面要的是明確與快速，任何多餘的動態都是摩擦力。
• 資訊密集的儀表板或表格：視差會搶走視線焦點，讓人更難找到要的資料。

直白地說就一條：視差服務於情緒，不服務於任務。頁面要的是情緒，就用；頁面要的是效率，就別加。把這條想清楚，你不會在每個頁面都硬塞視差，也不會因為「別人都有」就焦慮。

常見翻車現場與修法

下面這張對照表把最常見的視差地雷列出來，每一項都附上修法，讓你有問題能直接對號入座。

症狀	原因	修法
畫面邊緣露出白邊或破圖	圖層沒留安全邊際	素材放大，邊際留位移量的二到三倍
動起來整坨平移、沒立體感	各層幅度比太接近	拉開前景與背景比例，至少五倍
畫面晃到讓人頭暈	前景幅度過大	幅度砍半，優先用直覺值的一半起跳
文字跟著飄、讀不清楚	正文參與了視差	正文不動，只有裝飾大字參與
手機上效果消失或變卡	硬把桌面邏輯帶到手機	行動裝置關閉，退回靜態構圖
頁面捲動與點擊變頓	mousemove 沒節流、改了 top/left	改用 transform + requestAnimationFrame
開發做出來跟設計完全不一樣	沒寫交件標註	標明分層、幅度、曲線、行為開關
游標離開後畫面停在偏移狀態	沒有回正機制	加滑鼠 leave 時的緩回正動畫

這張表不只幫你除錯，也幫你預防。實作視差時，幾乎可以對著這八條逐一勾稽，因為它們出現的頻率高到離譜。能避開這八條，你的視差基本就跨過了「能用」與「好用」的門檻。

把效果交給開發時要寫清楚什麼

設計師跟開發之間，最常在「互動細節」上雞同鴨講。視差尤其嚴重，因為它有很多沒講就以為是常識、其實人人做法不同的地方。我列一張交件清單，照著寫，來回會少很多。

1. 分層清單與命名：哪幾個圖層參與視差、各層命名、對應的素材檔。Figma 的圖層命名要跟程式裡的 class 對得起來。
2. 每層位移係數：前景、中景、背景各是多少（相對游標位移的百分比或像素）。用數字寫死，不要寫「適中」。
3. 方向規則：游標往左時，前景往哪、背景往哪。畫一張示意圖最清楚。
4. 緩動曲線與時間：用哪條曲線（cubic-bezier 值）、進場與回正各多少毫秒。
5. 回正行為：游標離開容器時要不要回正、多久內回正。
6. 斷點與開關：哪些螢幕寬度以下關閉效果、是否要支援陀螺儀 fallback、尊重 prefers-reduced-motion 的處理（這是無障礙的基本款，千萬別漏）。
7. 效能預期：目標 Core Web Vitals 分數、可接受的 frame budget。先講好，才不會上線後才發現誰也沒在顧效能。

prefers-reduced-motion 那條我要特別拉出來講。有些使用者因為前庭功能敏感，會對動態內容產生暈眩甚至噁心，作業系統因此提供了「減少動態」的設定。一份負責任的視差實作，必須偵測這個設定並提供靜態版本。這不是做功德，這是基本可及性，也是專業度的展現。關於原型階段怎麼把這些互動規格先想清楚，UI 原型設計有更系統的說明。

現在就動手：四步驟行動方案

觀念、實作、地雷都講完了，給你一組可以今天就開始的具體步驟。

第一步，挑一個你現有的 Hero 畫面。不要從零開始想，拿一個你已經做過、覺得「可以但就是不夠吸睛」的畫面來改。這樣你才有前後對比，才知道視差到底加了什麼價值。

第二步，把它拆成三層並標好命名。背景、中景、前景各一組，素材比可見範圍大一圈。這一步只做分層，不做任何動態，確保靜態構圖本身成立。

第三步，用方法二先做一個最小版本。兩個畫面、一個 hover、Smart Animate 補間，二十分鐘就能看到效果。先嚐到甜頭，你才有動力挑戰九宮格的完整版。

第四步，照交件清單寫一份標註。就算你暫時沒有開發配合，也強迫自己寫一次。這個動作會逼你把腦中模糊的「差不多這樣」變成明確的數字與規則，而那份明確，才是你下次做得更好的根基。

四步都做完之後，我會再做一件很小但很重要的事：把你的成品拿給一個完全沒看過這個專案的人看三十秒，然後問他一句話，畫面裡哪一個東西最先抓住他的眼睛。如果他的答案是你設計的主體，恭喜，你的視差服務於內容；如果他先注意到的是某個飄來飄去的裝飾光點，那就是視差搶了戲，幅度要再往下修。這個三十秒測試，比你在螢幕前自我感覺良好三十分鐘有用太多。

視差效果是很奇妙的一個領域。它技術門檻不高，但審美門檻很高；做對了，畫面像被賦予靈魂；做錯了，比不做還糟。關鍵永遠不在學會按哪個按鈕，而在於你對「深度」「節奏」「克制」的判斷。這份判斷沒有捷徑，就是多做、多看、多對著真實裝置檢驗。等你做出幾個自己滿意的版本，你會發現這個能力會回頭滋養你所有的設計，因為你開始用「空間」而不只是「平面」在想畫面。

現在，打開你的 Figma，挑那個你一直覺得差一口的 Hero，給它第一次呼吸。