載入與等待回饋

Skeleton|骨架載入

在初次載入已有結構的清單、卡片或資料表時預留版面,讓人知道內容會長在哪裡;它不適合取代所有控制項。

常見俗稱:骨架載入、骨架屏、版面預留、Skeleton、skeleton loading

60 秒決策

先確認使用者要完成的事。

適合使用

  • 初次載入已有固定結構的資料表、卡片或清單,使用者能先理解內容將出現的位置。
  • 載入只持續數秒,骨架能避免版面突然跳動。

不適合使用

  • 按鈕、輸入欄位、選單、對話框或 Toast 本身;這些互動控制項不該用假的骨架取代。
  • 資料形狀完全未知,或載入時間很長卻沒有其他說明;應加入更明確的處理文字與等待策略。

畫面要說清楚的事

不要只交代外觀,也要交代資料與輸入規則。

骨架要像接下來的版面

資料列、標題和日期欄位用相近比例預留,讓內容出現時不會大幅跳動。

只留結構,不偽裝真資料

使用中性區塊與輕微動態,避免畫出讓人誤以為是真姓名或真狀態的假內容。

出現時間要短

骨架的責任是過場;幾秒後應換成資料、空狀態或可重試的錯誤訊息。

必要狀態與回應

每個狀態都要讓使用者知道下一步。

原本內容

可重新載入前仍保留上一版排程,避免畫面突然歸零。

骨架載入

以預期資料列結構取代內容;相關清單標示為忙碌。

資料就緒

以真實排程列取代骨架,不留下會持續閃動的灰色區塊。

沒有資料或失敗

骨架停止後切換到對應的 Empty 或 Error State,不能永遠停在載入中。

操作 Demo

先知道要觀察什麼,再動手操作。

操作前先知道

  1. 載入專案排程

    先觀察:Skeleton 是否保留資料列結構,而非把所有按鈕與控制項都變成灰色方塊。

    操作:點選「載入排程」。

    預期結果:排程清單暫時顯示三筆結構化骨架列;完成後換成可讀的排程內容。

Skeleton Demo

已有版型的初次載入,先讓結構留在原地
情境:LumenDesk 管理後台

專案排程

本週交付項目
新版元件規格確認產品設計週二
家長入口 QA平台工程週四
八月權限盤點系統管理週五

尚未開始這項載入示範。

告訴 AI

把任務、規則、狀態與操作條件一次寫清楚。

在 LumenDesk 的專案排程初次載入時,以 Skeleton 呈現預期的資料列、標題與日期欄位。骨架要跟即將出現的清單結構接近,只持續幾秒並保留適度動態,讓人知道畫面沒有卡住。不要把按鈕、下拉選單、對話框或整個頁面都畫成骨架;載入完成後以真實排程列取代骨架,失敗狀態另用可重試的錯誤訊息處理。

驗收清單

不要只確認欄位能不能點。

  • 骨架是否對應即將出現的結構?
  • 是否只用在資料導向容器,而不是互動控制項?
  • 內容出現時版面是否穩定?
  • 是否有忙碌狀態與可理解的等待文字?
  • 是否會在短時間內換成資料、空狀態或錯誤狀態?
  • 是否避免永遠閃動的骨架?