骨架螢幕：何時使用它們代替旋轉器

什麼是骨架屏

Nielsen Norman Group 將骨架螢幕定義為載入頁面的佔位符，該頁面透過類似線框的視覺效果來模仿佈局。它用於整頁載入並減少感知載入時間，因為人們看到的是即將到來的內容的結構而不是空白區域。

何時使用哪一個

將指示器與內容相匹配並等待：

• 骨架：佈局已知的頁面或清單加載，例如提要、卡片和設定檔。
• 旋轉器：小區域、按鈕或形狀無法預測的內容。
• 進度條：您可以衡量的長任務，例如上傳和匯出。
• 沒什麼：反應非常快，指示器只會閃爍。

設計一個好的骨架

使用真實的元件尺寸，以便內容到達時頁面不會移動，這也可以保護您的累積佈局移動分數。保持形狀簡單（圖像塊，文字條），使用低對比度灰色，並在準備好後立即用真實內容替換每個佔位符，而不是等待一切。

動畫骨骼

NN/g 指出，某些骨骼包含脈衝或閃爍動畫，以表示系統仍在運作。保持緩慢而微妙的動畫不透明度或變換而不是佈局屬性，並在減少運動時停止它。為載入區域提供可存取的標籤，例如「載入結果」。