骨架屏什麼時候用？骨架屏、轉圈與進度條該怎麼選？完整判斷指南

三者怎麼選？骨架屏適合等待整頁或內容區塊首次載入的情境；單一模組的短等待用轉圈，超過 10 秒且能估算進度就改用進度條。

三種載入元件的差別，不在哪一個比較現代，而在使用者當下需要知道什麼。等內容的人想知道「畫面會長什麼樣」，等動作的人想知道「系統有沒有收到」，等長任務的人想知道「還要多久」。選錯元件時，使用者可能以為畫面壞了，或重複送出操作。本文用官方設計規範與易用性研究，整理判斷方式與前後比較。更多互動決策可見互動設計分類。

使用者等待時到底需要什麼資訊？

Jakob Nielsen 在 1993 年提出的三個回應時間門檻，至今仍常被引用：0.1 秒內感覺即時，1 秒內思緒不中斷，超過 10 秒則注意力難以維持，需要顯示完成百分比之類的回饋。Nielsen Norman Group 於 2014 年更新時表示，這組門檻同樣適用於網頁應用。

Apple 的人機介面指南也從同一個行為出發：如果要等載入完成才顯示畫面，使用者可能把「沒有內容」解讀成 App 出了問題，所以應該盡快顯示東西，內容到位再替換佔位元素。

回饋本身也有效果。NN/g 引述內布拉斯加大學林肯分校的研究指出，看到循環進度動畫的使用者，滿意度較高，平均願意等待的時間是沒有指示器者的 3 倍。這個結果說明等待時有回饋很重要，但不代表動畫可以取代效能改善。

骨架屏、轉圈、進度條差在哪？

元件	傳達的訊息	適合情境	不適合情境
骨架屏	頁面結構與內容位置	首次載入的列表、卡片、資料表	按鈕、輸入框、下拉選單、上傳與下載
轉圈（不定進度）	系統正在處理	單一模組載入、儲存、送出表單	超過 10 秒，或進度可以計算的任務
進度條（確定進度）	已完成多少、還剩多少	上傳、下載、轉檔、批次處理	無法估算進度的流程，或不到一秒的動作

Carbon 設計系統的規則很好記：骨架狀態用在首次載入時的容器與資料型元件，例如磚塊、結構化清單、資料表和卡片；按鈕、核取方塊這類操作元件不要用。需要處理動作但不用顯示進度時用載入指示器；處理時間超過片刻，就改用進度指示器。

要等幾秒才換元件？

這裡要注意，各家的門檻並不相同，不要把單一數字當成定律：

等待時間	NN/g 建議	Material Design 3 建議
極短	不到 1 秒：不顯示指示器，避免閃爍	200ms 以下：不顯示指示器
中等	約 2～10 秒：轉圈或骨架屏	200ms～5 秒：載入指示器
較長	10 秒以上：完成百分比，並提供時間預估	超過 5 秒：進度指示器

差異的原因並不難理解：這兩組都是經驗準則，不是同一個實驗的結論。實務上，團隊可以先選定一套標準寫進設計系統，再用產品實際載入時間的資料校準。NN/g 也提到，如果延遲時間波動很大，應該把門檻降低，讓更多長等待能看到百分比。

實際介面要怎麼改？前後比較

以下三組是常見介面的示意情境，不是特定產品的數據，重點在於判斷的過程：

情境	修改前	使用者行為風險	修改後
訂單列表首次開啟，整頁資料需要數秒	頁面正中央一個轉圈	看不出會出現什麼，容易以為頁面卡住	依實際欄位顯示列表骨架，載入後原位替換
送出表單	按鈕沒有變化，等待結果	不確定是否成功，可能重複點擊	在元件旁顯示行內載入狀態，完成後回報結果
匯入 50 筆聯絡人	全頁骨架屏	骨架屏暗示的是頁面載入，不是處理任務，使用者無法判斷進度	顯示「正在更新第 3／50 筆」的確定進度，並提供停止方式

第三組的文字格式來自 NN/g 的建議：進度指示器不只適合長時間任務，也適合處理一連串資料的短任務。NN/g 也明確指出，上傳、下載、轉檔這類非頁面載入的流程，用骨架屏會造成混淆。

骨架屏最常犯哪些錯誤？

只畫頁首和頁尾。NN/g 不建議這種 frame-display 骨架，因為它沒有傳達頁面結構，效果和轉圈差不多。
載入不到一秒也要顯示。內容一閃而過，只會增加閃爍感。
灰塊和實際內容差很多。NN/g 定義的骨架屏是用來暗示版面與資訊層級；形狀不符，就失去提示結構的意義。
動畫過度。NN/g 提醒，閃動效果可能分散注意力，也可能造成無障礙問題。
用來掩蓋效能問題。NN/g 明確表示骨架屏不能取代效能最佳化，等待太久時，使用者仍可能認為頁面壞了。
每個項目各放一個指示器。Material Design 3 建議多個項目同時載入時，以單一指示器呈現整組進度。

團隊可以怎麼做決策？

判斷任務類型。是等內容出現，還是等系統完成動作？
量測實際時間。用產品資料看典型與較慢情況，不要只看開發環境。
判斷能否計算進度。能算就用確定進度。Material Design 3 建議，一開始未知、後來能估算時，可從不定進度轉為確定進度。
寫進設計系統。同一種流程要用同一種元件。Material Design 3 也要求同一流程在整個產品內使用相同類型的指示器。
用任務測試驗證。觀察使用者是否重複點擊、離開頁面或誤判失敗，方法可參考易用性測試實務指南。

如果要在原型中呈現載入狀態與轉場，可以延伸閱讀 Figma 微互動原型教學。

常見問題

骨架屏一定比轉圈好嗎？

不一定。NN/g 的建議是整頁載入用骨架屏，單一模組用轉圈。如果只有一張卡片在載入，轉圈就夠了。

骨架屏要加閃動動畫嗎？

可以但要節制。動畫能表示系統仍在運作，但也可能分散注意力或造成無障礙問題，靜態版本同樣是常見做法。

長時間任務可以讓使用者先離開嗎？

建議提供。Material Design 3 提到等待很長時可讓人先離開頁面，Carbon 則建議幾分鐘級的流程考慮加上通知，Apple 也建議讓人在等待時能做其他事。

沒有辦法估算進度時怎麼辦？

使用不定進度的指示器，並加上說明文字，例如「正在載入留言…」。等系統取得更多資訊，再切換成確定進度。