Figma 載入動畫教學：流動效果 Loading 原型

畫面漂亮、流程順暢的 Figma 原型，為什麼 demo 時還是被客戶嫌「點下去好像當機了」？問題多半不在流程，而在你漏掉了那零點幾秒的【等待體驗】。載入動畫（Loading Animation）從來不是裝飾品，它是你跟使用者之間的一份【感知契約】，告訴對方「我還在跑，請給我一下」。這篇教學會帶你從零開始，用 Figma 的 Smart Animate 做出真正會流動的 Loading 原型，跳脫那種轉兩圈就停的死板 spinner。

先說結論。一個好的 Figma 載入動畫，要同時滿足三件事：讓使用者感覺到進度、符合真實等待時間、而且能在 demo 時無限循環跑給客戶看。這三件事對應到三個不同的技術挑戰：選對 Loading 形式、用 Smart Animate 控制轉場、以及處理迴圈與無障礙。接著把這三塊一次講清楚，並附上三支可以直接抄走的原型拆解。

載入動畫不是裝飾，是感知效能工程

很多人把 Loading 動畫當成視覺糖衣，覺得「轉圈圈嘛，隨便放一個就好」。這是誤解。載入動畫真正的任務，是操控使用者對時間的感知。同樣是等兩秒，一個空白畫面會讓人焦慮到想跳出，一個有節奏的骨架屏（Skeleton Screen）會讓大腦誤以為「內容快來了」。這不是玄學，是已被驗證的人因工程。

Nielsen Norman Group 那篇被引用到爛的〈Response Times: The 3 Important Limits〉給了三個經典門檻：0.1 秒是「瞬間」的感覺上限，1 秒是「連續對話」的上限，10 秒是「注意力斷裂」的上限（2026）。換句話說，你的 Loading 動畫該長什麼樣，幾乎完全由「使用者要等多久」這一個變數決定。這樣看來，這裡不會一上來就教你畫 spinner，而是先教你【判斷】。

在各種 prototype review 裡，最常見的錯就是把同一種 spinner 套用在所有等待場景。0.3 秒的按鈕回饋放一個轉圈、3 秒的資料抓取也放同一個轉圈、10 秒的檔案上傳還是同一個轉圈。結果就是使用者完全得不到任何「進度」資訊，只能盯著畫面猜。這不是載入動畫，這是【焦慮產生器】。Figma 原型的價值，正是在上線前把這種問題先抓出來。

先決定「等多久」：五個等待區間決定你該做哪一種 Loading

在打開 Figma 開始拉形狀之前，先問自己一個問題：這個動作真實上線後，使用者要等多久？這個答案直接決定你要做哪一種原型。下面這張決策表，是每一次原型規劃時第一個該打開的東西。

真實等待時間	使用者心理狀態	推薦的 Loading 形式	核心任務
0.1 秒以內	感覺是瞬間	不需要動畫，或只做按鈕狀態切換	維持直接操控感
0.1 到 1 秒	感覺到一點延遲，但能接受	極簡 spinner、按鈕內 loading	確認系統有回應
1 到 4 秒	開始不耐煩，眼睛找進度	骨架屏 Skeleton、漸層 Shimmer	預告內容結構
4 到 10 秒	注意力快要斷裂	明確進度條 + 百分比 + 文字提示	給出具體預期
超過 10 秒	準備離開	進度條 + 可中斷 + 分階段說明	留住注意力

這張表背後的邏輯只有一句話：等待越久，動畫要給的資訊就要越具體。短等待用 spinner 安撫就好，因為大腦還來不及焦慮；長等待則可用進度條或骨架屏告訴使用者「跑到哪了、還要多久」，降低使用者直接離開的機率。這點在後面 SEO 那段會細講。

所以你發現了嗎？「流動效果」這四個字，其實是三件事的集合：旋轉的流動（Spinner）、漸層位移的流動（Shimmer）、進度推進的流動（Progress Bar）。它們對應不同的等待區間，不能混用。接下來會分別拆解這幾種原型各自的戰場。

流動效果的四種原型：Spinner、Skeleton、Progress、Shimmer 的戰場

這四種原型不是隨便挑的，它們各自解決一種特定的認知問題。下面先快速定義，再帶你看什麼時候用哪一個。

Spinner（旋轉載入圖）是最古老的形式，一個旋轉的圓圈或圖示。它的優點是通用、面積小、實作成本最低。缺點是它完全不告訴你要等多久，只是一再保證「我還活著」。Spinner 適合 1 秒上下的短等待，例如送出表單後的那一瞬間。超過 3 秒還在轉，使用者就會開始懷疑系統是不是死了。

Skeleton Screen（骨架屏）是用灰階區塊預先佔住即將出現的內容位置，例如一篇文章的標題、圖片、段落各放一個灰塊。它的殺手鐧是預告內容結構，讓大腦先建立預期，等真實內容填入時會覺得「更快」。骨架屏適合 1 到 4 秒、而且內容版型固定的場景，例如文章頁、商品頁、列表載入。

Progress Bar（進度條）是明確顯示百分比的橫條，0% 一路推進到 100%。它給使用者最珍貴的東西：具體預期。進度條適合較長、而且系統能估算進度的等待，例如檔案上傳、影片處理、大型報表生成。它的進度應盡量反映真實狀態，否則一旦長時間停在 99%，信任感很快就會消耗掉。

Shimmer（流光效果）通常跟骨架屏搭配，是一道半透明的漸層光帶從左掃到右，讓灰階區塊看起來像「正在載入」。它的任務不是給進度資訊，而是消除靜止感。一個完全不動的骨架屏會讓使用者懷疑卡住了，加一道 shimmer 立刻有了生命感。Shimmer 是流動效果裡最細膩的一種，也是 Figma 原型裡最容易做壞的一種，後面會專門拆解給你看。

記住一個原則：資訊量少的等待用 Spinner，資訊量多的等待用 Skeleton + Shimmer，時間長的等待用 Progress Bar。把這句話貼在你的 Figma 檔案封面，你會少走很多冤枉路。

什麼時候根本不該用載入動畫：能消除等待就不要安撫等待

這個小節要講一個反直覺的觀念：最好的載入動畫，是根本不需要出現的載入動畫。很多設計師花一整個下午打磨一個漂亮的 shimmer，卻從來沒問過一個更根本的問題：「這個等待，能不能直接不要存在？」

載入動畫本質上是在【補救】一個已經發生的延遲。它再漂亮，也是一種次好的體驗。真正最好的體驗，是讓使用者在點下去的那一刻就拿到內容，連等待都不發生。這在實務上有三個常見手法。第一是預載（prefetch）：當使用者還在上一頁瀏覽時，系統就默默把下一頁的資料抓回來，等他真的點過去，內容瞬間出現。第二是快取（cache）：已經載過的資料暫存在本地，第二次進入直接讀快取，不再打伺服器。第三是樂觀更新（optimistic UI）：使用者送出一個動作（按讚、留言、加入購物車），畫面立刻顯示成功狀態，不等伺服器確認，背後再慢慢同步。這三個手法有一個共通點：它們對付的其實是「等待的感覺」這一層，把等待從使用者感知裡抹掉。

所以你在 Figma 規劃原型的時候，建議加一個儀式：每畫好一個 Loading 畫面，就問自己一句「這個等待能不能被預載、快取、或樂觀更新消掉？」。如果能，去跟工程師談怎麼消掉它；把力氣花在美化一個本可消失的等待，從來都不划算。這個判斷會幫你的產品省下大量的使用者耐心預算。只有當等待【真的無法消除】的時候，才輪到載入動畫上場。這個優先順序，其實來自一個常見的教訓：動畫做得很美，使用者還是抱怨慢。

換句話說，載入動畫是體驗設計的備援手段，不是第一反應。把這個觀念放進你的設計流程，你會發現很多原本要做 Loading 的地方，根本用不到。如果你正在系統性重新思考整個產品的體驗節奏，UI 原型設計的完整脈絡能幫你把「互動、狀態、回饋」這三件事拉到更高的層級來看。

在 Figma 打造會跑的 Loading：Smart Animate 的核心機制

講了這麼多判斷，現在進入實作。Figma 做載入動畫的核心引擎只有一個名字：Smart Animate。它是 Figma 原型模式裡的一種轉場類型，會自動比對兩個 Frame 之間的圖層，把相同的部分做平滑過渡。官方文件寫得很清楚，Smart Animate 會根據圖層名稱、圖層類型、屬性差異來決定怎麼補間（2026）。這一句話裡藏著三個你要記住的關鍵。

命名一致是 Smart Animate 的命根子

Smart Animate 怎麼知道 Frame A 的那個圓圈和 Frame B 的那個圓圈是「同一個東西」？答案是圖層名稱必須完全一樣。如果一個叫「Circle 1」、另一個叫「Circle 2」，Smart Animate 會把它們當成兩個不同的圖層，於是變成淡入淡出，你要的旋轉完全不見蹤影。這是新手最常踩、也最難 debug 的雷。

實務上的習慣是這樣：所有參與動畫的圖層，用一致的命名規則並加上序號，例如 loader-ring-01、loader-ring-02。建立好第一個 Frame 的圖層結構後，直接複製整個 Frame 再改屬性，名稱與階層就不容易跑掉。如果你還不熟悉 Figma 的基礎操作，這篇 Figma 中文完整教學可以幫你把底子打穩，再回來做動畫會順很多。

除了命名，還有一件事跟 Smart Animate 的轉場類型選擇有關。Figma 原型模式裡轉場分成兩大類：動畫式轉場（Smart Animate、Move、Dissolve、Push 等）與瞬間轉場（Instant）。做載入動畫時你幾乎只會用到 Smart Animate 跟 Instant 兩種，但它們各自的角色很清楚。下面這張表能幫你避開「該用 Instant 卻用了 Smart Animate」這種讓動畫卡頓的烏龍。

轉場類型	做什麼	載入動畫裡的用途
Smart Animate	自動補間相同圖層的屬性差異	Spinner 的旋轉、Shimmer 的位移、Progress 的增長
Instant	瞬間切換，不補間	迴圈接點的縫合、完成態的瞬切
Move	只補間位置，不管其他屬性	少用，通常 Smart Animate 已涵蓋
Dissolve	淡入淡出	用在沒有對應圖層時的退路方案

這張表裡最容易被錯過的是 Instant。很多人以為載入動畫全程都用 Smart Animate，結果在迴圈接點用 Smart Animate 接，造成每一圈都頓一下。Instant 是無縫迴圈的幕後功臣，它讓肉眼察覺不到那一格的切換。記住這個分工：有對應圖層的漸進變化交給 Smart Animate，不要補間的瞬間切換交給 Instant，你的動畫質感會立刻提升一個檔次。

Easing 與 duration：把「機械感」修成「流動感」

Smart Animate 預設的轉場時間是 300ms、Easing 是 Default。這個預設值對按鈕轉場很合理（你可以參考Figma 動態按鈕設計裡的處理），但對載入動畫幾乎一定不夠。載入動畫的核心是無限循環，而無限循環最怕的就是線性、機械、呆板。

調整的邏輯是這樣：Spinner 用 Linear（線性）讓它勻速旋轉；Shimmer 用 Ease-in-out，讓光帶進場慢、中間快、出場慢，模仿光線掃過；Progress Bar 可以用 Ease-out，讓前段推進較快、後段放慢。不過這類原型只是在展示等待感，正式產品仍要由真實任務狀態驅動進度。這些微調看起來不起眼，卻是「看起來像成品」跟「看起來像草稿」的分水嶺。

三支實戰原型逐步拆解

接下來把三種最常用的載入原型，拆成可以直接在 Figma 裡照做的步驟。建議你開一個新檔案，跟著拉一遍，比看十遍文字都有用。

旋轉 Loader：拼出無限迴圈

旋轉 Loader 是入門款，但它藏著一個很多人不知道的關鍵：Figma 的 Smart Animate 沒有內建無限循環。你要用「末端 Frame 接回第一個 Frame」的方式做出迴圈。具體做法如下。

第一步，畫一個圓環（用 Ring 或兩個同心圓相減），命名 loader-ring，放在 Frame 1 的正中央。第二步，複製 Frame 1 得到 Frame 2，在 Frame 2 裡把 loader-ring 旋轉 120 度（不是 360 度，因為你要做三段補間，每段 120 度拼出一圈）。第三步，再複製出 Frame 3、Frame 4，分別旋轉 240 度、360 度。第四步，進原型模式，Frame 1 用 Smart Animate 連到 Frame 2，Frame 2 連 Frame 3，Frame 3 連 Frame 4，Frame 4 再連回 Frame 1。這個回連就是迴圈的靈魂。

每一段的 duration 設 0.4 秒、Easing 設 Linear、Trigger 設 After delay，再用很短的延遲讓轉場自動接續。關鍵在於 Frame 4 的圓環角度是 360 度，視覺上跟 0 度一樣，所以接回 Frame 1 時不會有明顯跳動。如果你要更進階，把圓環改成半圓、把三段改成六段，原理相同。

骨架屏 Shimmer：漸層位移才是流動感來源

骨架屏本身不難，難的是那一道掃過的流光。很多人做 Shimmer 的方法是把灰塊的填色做透明度閃爍，0.5 秒變亮、0.5 秒變暗。這樣只會像閃爍，不像流動。Shimmer 的流動感來自「漸層的位移」，不是「亮度的變化」。下面把做法拆解給你看。

第一步，畫好你的骨架區塊（標題塊、圖片塊、段落塊），全部用同一個中性灰填色，例如 #E5E7EB。第二步，在每個區塊上方疊一個等寬的漸層圖層，命名 shimmer-sweep，漸層從「透明 → 白半透明 → 透明」，中間的白色用 40% 左右的透明度，太亮會像閃光燈。第三步，這是重點：不要動透明度，要動 X 軸位置。在 Frame 1 把 shimmer-sweep 放在區塊左側外面（X 為負的區塊寬度），在 Frame 2 把它移到區塊右側外面（X 為正的區塊寬度）。第四步，Smart Animate 連接兩個 Frame，duration 1.2 秒，Easing Ease-in-out。

播放看看，你會看到一道光從左掃到右，而且因為走的是位置位移，跟單純的透明度變化不同。接著讓 Frame 2 接回 Frame 1 形成迴圈；接回時若出現光帶瞬移，可把這一段設為 Instant（瞬間）轉場，再檢查跳動是否仍明顯。

進度條 Loop：用假進度降低焦慮

進度條原型最容易犯的錯，是讓它從 0% 勻速跑到 100%。勻速的進度條會讓使用者在 70% 以後開始焦躁，因為大腦會預期「應該快好了」，結果後面那段特別漫長。正確做法是前快後慢的假進度。設計方法如下。

把進度條分成五段：Frame 1 是 0%、Frame 2 是 35%、Frame 3 是 60%、Frame 4 是 80%、Frame 5 是 92%。注意這裡故意停在 92%，不要跑到 100%，因為這是「等待中」的原型，跑到 100% 就變成「完成」了。每一段的 duration 不要一樣：0 到 35% 用 0.5 秒、35% 到 60% 用 0.8 秒、60% 到 80% 用 1.2 秒、80% 到 92% 用 2 秒。越後面越慢，前段快速建立進度感，後段則吸收不確定的等待。

停在 92% 之後，可以讓它在小範圍內緩慢變化，模擬「仍在收尾」的感覺，直到真實資料回來再推到 100%。這是一種原型展示技巧；正式產品若能取得真實進度，仍應優先顯示真實狀態，避免用假百分比誤導使用者。

Figma 原型裡最常踩的四個雷

實作原型時，有幾個坑特別容易踩。這裡逐一列出來，讓你少花幾個晚上的 debug 時間。

第一個雷，把 After delay 的延遲時間和動畫 duration 混在一起。Figma 的自動循環原型要用 After delay 觸發，再由 Smart Animate 的 duration 控制轉場速度。延遲設得太長，轉場之間就會停頓；每一個 Frame 也要接好下一個 Frame，並從末端連回起點。

第二個雷，在迴圈的接點用了 Ease。剛剛講旋轉 Loader 的 Frame 4 接回 Frame 1，如果這一段你用了 Ease-in-out，轉場的開頭會減速、尾巴又減速，結果迴圈每一圈都會「頓一下」。迴圈的接點一律用 Linear，只有 Frame 內部的轉場才考慮 Ease。這個規則反過來記最牢：線性負責無縫，緩動負責質感。

第三個雷，動了不該動的屬性。Smart Animate 會補間它看得到的屬性差異。如果你在 Frame 2 不小心改了圖層的顏色、或是不小心多包了一層 Group，Smart Animate 會把那個圖層當成「不是同一個東西」，於是變成淡入淡出，你要的旋轉或位移直接消失。每次動畫跑起來怪怪的，第一步就是去檢查兩個 Frame 的圖層結構是不是完全對稱，連 Group 嵌套的層數都要一樣。

第四個雷，沒有設 Fixed size 與 Clip content。做 Shimmer 的時候，光帶要跑到區塊「外面」，如果你的 Frame 沒有勾 Clip content，光帶會溢出到整個畫面，看起來像故障。記得把骨架區塊的 Frame 勾選 Clip content，這樣光帶掃出區塊邊界時會被裁掉，視覺上才是「光在區塊內流動」。這個小勾選，決定了你的 shimmer 是專業還是穿幫。

這四個雷的共同特徵是：它們都不會讓 Figma 報錯，只會讓動畫「看起來怪怪的」。所以如果你沒有系統地排查，會在一個小 bug 上耗掉兩小時。把這四點列成檢查表，每次動畫不對就照著走一遍，八成的問題都在裡面。

載入動畫的色彩與品牌：讓等待也長得像你的產品

很多人做載入動畫時，色彩這一關是完全放生的。骨架屏一律用預設的淺灰、spinner 一律用黑色、進度條一律用藍色，跟產品的品牌色毫無關係。這錯失了一個很重要的機會：載入動畫是使用者每次造訪都會看到的重複元素，它是品牌曝光成本最低的版位。把品牌色精準地放進 Loading，等於在使用者每一次等待時，都在強化他對你產品的視覺記憶。

實作上有三個拿捏。第一，spinner 與進度條的主色用品牌重點色（accent color），跳過預設的黑或藍。但要注意品牌色如果是高飽和的黃、綠，在白底上對比不足會看不清楚，這時要稍微調深或加描邊。第二，骨架屏的灰階不是隨便挑的：底色建議用品牌色去飽和後的淺灰（例如把品牌藍降到 10% 飽和度），取代慣用的中性灰。這樣灰階區塊隱隱透出品牌色溫，不搶眼但一致。第三，shimmer 的流光用品牌色加白，取代純白，這道光掃過時會帶一點品牌色的折射感，質感立刻不同。

這幾個調整都很小，但加起來會讓你的 Loading 從「任何產品都適用的通用件」變成「只屬於你這個產品的識別件」。如果你想更系統地建立品牌色的使用規範，品牌色彩挑選與應用那篇講了怎麼定義主色、輔助色、中性色階的階層，把那套階層套到載入動畫上，色彩的一致性就有了依據。一致性這件事，是業餘設計跟專業設計最明顯的分野，而它通常就藏在 Loading 這種沒人盯的小地方。

把原型 demo 給客戶看的三個訣竅

原型做好不等於 demo 成功。載入動畫的 demo 特別容易翻車，因為它【會動】，而會動的東西在客戶眼裡有時候會被誤讀成「這個畫面是不是壞了」。這裡整理三個 demo 訣竅，都是實務上容易翻車的地方。

第一個訣竅，永遠在 demo 開頭先說一句「接下來你會看到畫面在跑載入動畫，這是故意的」。這句話聽起來像廢話，但它會幫客戶的腦袋切換到「我在看動態設計」的模式，避免他誤以為自己在用一個當機的產品。你看過太多次demo 裡客戶盯著轉圈的 spinner 三秒鐘，然後問「所以它是卡住嗎」。一句預告就能避免。

第二個訣竅，把 Loading 的 duration 在 demo 時拉長。真實產品的等待可能是 1.5 秒，但 demo 時 1.5 秒一閃即逝，客戶根本來不及看到你的動畫細節。實務上習慣把 demo 用的原型複製一份，把 duration 全部乘以 2 到 3，讓客戶看清楚每一幀。細節解釋完之後，再切回真實速度的原型，讓他感受實際節奏。兩個版本準備好，demo 的節奏就掌控在你手上。

第三個訣竅，準備一個「完成態」Frame 截圖放在旁邊。客戶看 Loading 的時候，腦袋裡其實在問「那載入完會長怎？」。你口頭描述不如直接放一張完成態的靜態圖當對照。這個對照會讓客戶理解「這個等待是為了換取這個結果」，於是等待從「成本」變成「投資」，他對動畫的接受度會立刻提高。這三個訣竅都不花什麼時間，但會讓你的 demo 從「被客戶質疑」變成「被客戶信任」。

從 Figma 原型到上線：Lottie、CSS、GIF 怎麼選

Figma 原型跑得再漂亮，仍要交給工程師實作。這裡的關鍵問題是：用什麼格式交付，才能讓上線版本跟原型一致。常見的選項有三個，各有戰場。

GIF是歷史最久的方案，相容性最好，到處都能放。但 GIF 的致命傷是檔案大、不支援透明背景要做 hack、而且一旦要做調整就要重匯。實務上現在幾乎不建議用 GIF 做載入動畫，唯一合理的場景是Email 裡的占位圖，因為 Email 客戶端對其他格式的支援很差。

CSS 動畫是工程師最愛的方案，因為它零檔案、純程式碼、可被瀏覽器原生加速。Spinner、骨架屏、Shimmer 這三種都非常適合用 CSS 實作，關鍵影格（keyframes）加上 transform 與 opacity 幾行就能搞定。CSS 動畫的缺點是複雜的路徑動畫做不出來，但對載入動畫這個場景綽綽有餘。如果你設計的就是標準 Spinner 或 Shimmer，直接跟工程師說「用 CSS 做」通常是最省成本的選擇。

Lottie是常見的複雜動畫交付方案，它可將動畫匯出成 JSON，再由前端播放器呈現。它適合向量圖形、多元素編排，以及需要控制播放速度或進度的場景；實際檔案大小與畫質仍取決於動畫內容，若包含點陣素材也不會自動變成純向量（見 Lottie 官方文件，2026）。複雜路徑變形可以考慮 Lottie，但也要依前端技術、效能與維護需求評估；要注意 Figma 原型沒辦法直接匯出成 Lottie 檔，正式的 Lottie 動畫多半在 After Effects 製作，Figma 原型在這條路上扮演的是視覺規格的參考。我們之前寫過一篇Lottie 動畫完全指南，把 JSON 產出、檔案大小、瀏覽器相容都講清楚了。

這裡補一個讓交付更順的實務技巧：Figma 有官方的 LottieFiles 外掛，可以直接在畫布裡預覽 Lottie 動畫，也能把社群上現成的免費 Loading 動畫插進來當參考。如果你不想從零刻一個 spinner，先去 LottieFiles 社群挑幾個風格接近的現成檔，插進 Figma 看跟你的介面搭不搭，再決定要直接用還是基於它再改。這比憑空想像動起來的樣子準確太多。挑現成素材這件事，跟你挑圖示外掛或圖庫外掛裡的素材是同一個邏輯：先用現成的校準風格方向，再決定要不要自己重刻。資源整理的部分，免費 UI/UX 學習資源那篇也列了幾個動畫靈感庫，值得收藏。

交付格式	檔案大小	適合的 Loading 類型	主要限制
GIF	大	簡單轉圈、Email 占位	不支援透明、難修改
CSS 動畫	零（純程式碼）	Spinner、Skeleton、Shimmer	複雜路徑做不到
Lottie（JSON）	小（向量）	複雜插畫型、品牌型 Loading	需載入函式庫

實務上的判斷很直接：能 CSS 就 CSS，不能 CSS 才 Lottie，GIF 除非 Email 否則不要用。這條判斷同時照顧了效能與維護成本，而這兩件事都會影響網站體驗；搜尋表現則還要綜合內容與其他技術因素判斷。

載入動畫的無障礙地雷：prefers-reduced-motion 不是選配

這一段是很多設計教學會略過、但不能省的部分。載入動畫對大多數人是「流動質感」，對前庭功能障礙、偏頭痛或光敏感的使用者，卻可能引發不適。WCAG 2.2 的 SC 2.3.3 是 AAA 級準則，要求由互動觸發的非必要動態效果可被停用；prefers-reduced-motion 是實作這項需求的常見方式之一。若自動播放的動態持續超過五秒，也要一併檢查暫停、停止或隱藏機制。

在 Figma 原型階段，你沒辦法直接測這個，但你可以做一件事：為每一個載入動畫準備一個【靜止版本】。也就是說，你的檔案裡除了會跑的原型 Frame，還要有一個完全靜止、只顯示最終狀態的 Frame，交給工程師時註明「這是 reduced-motion 的 fallback」。工程師實作時會用 CSS 的 @media (prefers-reduced-motion: reduce) 去偵測使用者設定，命中時改顯示靜止版本。

靜止版本不代表「什麼都沒有」。一個好的 reduced-motion fallback 會保留資訊、拿掉動態。例如會轉的 spinner 改成一個靜止的載入圖示加「載入中…」文字；會流光的骨架屏改成純灰階區塊，結構一樣、只是不動。這樣既有禮貌又給了資訊。把無障礙當成上線前的固定檢查項目，別推到「之後再補」，因為一旦你的原型被做成產品，這件事就會變成法規與商譽風險。

還有一個跟無障礙相關、但容易被遺忘的點：閃爍頻率。如果你的載入動畫有快速明暗交替（例如每秒閃爍超過三次），即使沒有達到癲癇觸發的門檻，也會讓敏感使用者感到不適。Spinner 勻速旋轉通常安全，但如果你做了實驗性的高對比閃爍 Loading，務必把頻率壓低，或在 reduced-motion 下一律關掉。實務上的底線是：任何會在 demo 時讓人皺眉頭的動畫，上線前都要重新檢視。設計的良善，往往就體現在這種「為少數人著想」的細節裡。

載入動畫與 SEO 的間接關係：別讓等待吃掉你的排名

很多人覺得載入動畫是純 UI 議題，跟 SEO 八竿子打不著。這是半對的。載入動畫不是直接的排名因素，Google 不會因為你的 spinner 轉得漂亮就給你加分。但載入動畫會透過兩條路徑，間接影響你的搜尋表現，而且影響可能比你想的大。

第一條路徑是使用者體驗。使用者點進頁面，如果第一眼看到的是空白或卡頓，更可能直接離開。骨架屏可以降低等待時的不確定感，但 Google 並未把 GA4 的跳出率列為直接排名因素，也不能把停留秒數解讀成 Google 對頁面價值的評分。這件事在降低跳出率與 SEO 的關係裡有更完整的討論。

第二條路徑是Core Web Vitals。Google 的排名系統會使用 Core Web Vitals，但它只是眾多訊號之一，分數好也不保證排名靠前。LCP（Largest Contentful Paint，最大內容繪製）衡量可視區域內最大內容元素的繪製時間；骨架屏是否成為候選元素取決於實際標記與呈現方式，也不能代表最終內容已經載入。骨架屏是感知等待的工具，不能取代真正的速度優化。web.dev（Google 官方）也把速度的主要價值放在使用者體驗與商業成果上（見 〈Why does speed matter?〉，2026）。想深入了解 Core Web Vitals 的排名機制，可以讀我們整理的Core Web Vitals 與 SEO 完整解析。

所以你要兩手抓：一方面用載入動畫優化【感知速度】（壓低跳出、提升停留），另一方面扎實做【真實速度】優化（伺服器回應、圖片壓縮、快取）。真實速度的實戰做法，推薦兩篇：網站速度優化完整指南給你系統化的排查流程，網站速度慢的修復步驟給你具體的修法。載入動畫是前端的感知武器，速度優化是後端的真功夫，兩者缺一不可。

現在就動手的五步行動方案

讀完不等於會做。這篇教學濃縮成五個你今天就能執行的具體動作，按順序走一遍，你就有一個可以 demo 的 Figma 載入動畫原型。這五步的順序是有意義的：先盤點、再選形式、做出完整原型、補上無障礙，再對齊交付，跳著做很容易卡在中間。建議你照著走完第一輪，實際做過會比只讀步驟更容易掌握「載入動畫」的設計判斷。

1. 盤點你現有原型的等待場景。打開你最常 demo 的那個 Figma 檔案，逐一列出每個會觸發載入的動作（送出表單、切換頁面、載入列表），標注每個的真實等待時間。這張清單是後續所有設計的依據。
2. 對照決策表挑選形式。用前面那張五區間決策表，幫每一個等待場景指定對應的 Loading 形式。1 秒內的用 spinner、1 到 4 秒的用骨架屏加 shimmer、4 秒以上的用進度條。不要全部套同一種。
3. 挑一個場景做一支完整原型。建議從骨架屏 shimmer 開始，因為它最容易做壞、也最考驗功力，學會它之後 spinner 跟 progress bar 都是降維打擊。照前面拆解的四步驟：畫骨架、疊漸層、做位置位移、設 Ease-in-out 1.2 秒。
4. 加上無限循環與 reduced-motion fallback。用 Frame 接回 Frame 的方式做出迴圈，並額外畫一個靜止版本標注為無障礙備案。這兩件事是「能 demo 的原型」與「能上線的規格」的分界。
5. 決定交付格式並跟工程師對齊。簡單形式走 CSS、複雜形式走 Lottie、Email 才用 GIF。把格式與 fallback 一起交付，不要讓工程師用猜的。

做完這五步，你手上的就不只是一個會轉的圖，而是一個有判斷、有策略、可上線的載入體驗設計。這才是 Figma 原型真正該有的樣子。如果你想再往互動更深的地方走，視差效果跟滑塊輪播互動會是好的下一站。

載入動畫看似是細節，但它卡在使用者與內容之間的那幾秒，是整個產品體驗最脆弱的接縫。把這個接縫打磨好，使用者會願意多等三秒；打磨不好，三秒就足夠讓他們永遠離開。這樣看來，實務上始終把載入動畫當成原型設計裡【最值得花時間的細節之一】，它投入小、影響大、而且每個使用者每天都會碰到。設計的功夫，從來都在這些被輕忽的零點幾秒裡。把這幾秒顧好，你的產品在無形之中就會比同類競品多出一份難以言說的【順手】，而那份順手，往往就是使用者選擇留下來的真正原因。