網站不可能每一次都瞬間回應：查庫存、算運費、送出訂單，總有 1 到 5 秒的空白。這段空白怎麼呈現，決定使用者覺得網站「很快」還是「當掉了」。多數專案把載入狀態留給工程師臨時補一個轉圈圈，結果同一個網站裡有四種不同的等待畫面。等待也是介面的一部分，而且可以寫成規格。
5 個真實案例
- LinkedIn：動態牆載入時先出現灰色的卡片輪廓，頭像、標題、內文的位置跟真實內容一致，讓使用者在資料到達前就知道版面長什麼樣子。
- YouTube：切換影片頁時，頂端出現一條細長的紅色進度條，不擋住畫面，只告訴你「正在前進」。
- Instagram：按下愛心立刻變紅，不等伺服器回應；萬一失敗才悄悄退回。這就是樂觀更新。
- Slack：開啟時顯示一句輪替的小語，把幾秒鐘的等待變成品牌語氣的一部分。
- Stripe Checkout：付款按鈕按下後變成載入狀態並鎖住，完成後轉為勾勾，避免使用者重複扣款。
設計背後的邏輯
Nielsen Norman Group 整理的三個反應時間門檻是起點：0.1 秒內感覺即時、1 秒內思緒不中斷、超過 10 秒注意力就會離開。NN/g 的進度指示研究進一步建議：2 到 10 秒用循環動畫，超過 10 秒要顯示進度百分比。骨架屏有效，是因為它把「空白等待」變成「內容正在逐步出現」，降低不確定感。樂觀更新則把等待直接移除，前提是失敗率很低。
技術成本與限制
- 版面位移：骨架尺寸若和真實內容不同，內容到達時會跳動，直接拉高 CLS（累計版面位移），Google 建議維持在 0.1 以下。
- 工時：每種頁面版型的骨架元件約 4–8 小時；樂觀更新因為要處理失敗回滾，每個動作約多 1–2 天。
- 檔案大小：CSS 做的骨架與進度條不到 1KB；用 Lottie 做的品牌載入動畫常見 30–100KB，還要載入播放器。
- SEO：若商品內容全靠前端載入，爬蟲可能只看到骨架。重要內容應由伺服器端先輸出，骨架只用在次要區塊。
- 互動回應：按下按鈕到畫面出現回饋的時間計入 INP，即時切換按鈕狀態能改善體感與分數。
適合 vs 不適合的產業
| 適合重點投資 | 不需要過度設計 |
|---|---|
| 電商：商品列表、購物車、結帳 | 內容很少更新的形象官網 |
| 會員與預約系統：查時段、送出預約 | 幾乎沒有動態資料的單頁活動網站 |
| SaaS 後台與報表：大量資料查詢 | 以 PDF 下載為主的型錄網站 |
| App：社群、點餐、訂票 | 金融交易結果：不適合樂觀更新，必須等確認 |
怎麼套用到你的網站
- 盤點等待點：列出所有會等超過 0.5 秒的操作，用 Chrome DevTools 的網路節流實際量秒數。
- 依秒數選元件：1 秒內只改按鈕狀態；1–3 秒用骨架屏；3–10 秒用頂端進度條加文字；超過 10 秒顯示百分比或改成背景處理、完成後通知。
- 判斷能否樂觀更新：收藏、按讚、加入購物車可以；付款、下單、退款不行。
- 寫成元件規格：在 Figma 與程式碼裡各建一組載入元件，規定尺寸與動畫時間，並支援 prefers-reduced-motion。
- 上線後驗證：用 PageSpeed Insights 看 CLS 與 INP，並觀察結帳與預約的放棄率是否下降。
常見錯誤 × 怎麼避開
- 全站只有一個轉圈圈 → 依等待秒數分級，不同情境用不同元件。
- 骨架和真實版面不一致 → 骨架直接由真實元件加上佔位樣式產生，尺寸不會跑掉。
- 付款按鈕沒有鎖定 → 按下後立即停用並顯示處理中，避免重複送出。
- 0.3 秒就閃一下載入畫面 → 設定約 300 毫秒延遲，太快完成就不顯示。
延伸資源
- NN/g：Skeleton Screens 101，骨架屏使用時機。
- React useOptimistic，樂觀更新的官方寫法。
- Flutter skeletonizer，用現有元件自動產生骨架。
- LottieFiles：品牌載入動畫素材與檔案大小檢查。
常見問題 FAQ
骨架屏和轉圈圈哪個比較好？
看等待時間與版面。整頁或列表載入 1 到 3 秒時，骨架屏能讓使用者先看到版面；單一按鈕或小區塊的短暫等待，用按鈕內的載入狀態即可。
骨架屏會影響 SEO 嗎？
骨架本身不會，但如果重要內容完全靠前端載入，爬蟲可能只看到骨架。商品名稱、價格等內容建議由伺服器端先輸出。
什麼操作不適合樂觀更新？
付款、下單、退款、庫存扣減等失敗後果嚴重的操作，應等伺服器確認後再顯示成功。
做一套載入狀態元件要多久？
一般網站約需 3 到 5 個工作天，涵蓋骨架屏、進度條、按鈕狀態與減少動態設定；若含多個樂觀更新動作，每個約再加 1 到 2 天。
行動呼籲
想知道你的網站在哪幾個等待點流失客戶？ScriptWalker 可以協助盤點載入狀態、建立 Figma 與程式碼共用的元件規格，並實測 CLS 與 INP。歡迎預約諮詢：
- Email：[email protected]
- 電話：0916-224-047
- LINE：@ufv9089p