60 秒決策
先確認使用者要完成的事。
適合使用
- 初次載入已有固定結構的資料表、卡片或清單,使用者能先理解內容將出現的位置。
- 載入只持續數秒,骨架能避免版面突然跳動。
不適合使用
- 按鈕、輸入欄位、選單、對話框或 Toast 本身;這些互動控制項不該用假的骨架取代。
- 資料形狀完全未知,或載入時間很長卻沒有其他說明;應加入更明確的處理文字與等待策略。
畫面要說清楚的事
不要只交代外觀,也要交代資料與輸入規則。
骨架要像接下來的版面
資料列、標題和日期欄位用相近比例預留,讓內容出現時不會大幅跳動。
只留結構,不偽裝真資料
使用中性區塊與輕微動態,避免畫出讓人誤以為是真姓名或真狀態的假內容。
出現時間要短
骨架的責任是過場;幾秒後應換成資料、空狀態或可重試的錯誤訊息。
必要狀態與回應
每個狀態都要讓使用者知道下一步。
原本內容
可重新載入前仍保留上一版排程,避免畫面突然歸零。
骨架載入
以預期資料列結構取代內容;相關清單標示為忙碌。
資料就緒
以真實排程列取代骨架,不留下會持續閃動的灰色區塊。
沒有資料或失敗
骨架停止後切換到對應的 Empty 或 Error State,不能永遠停在載入中。
操作 Demo
先知道要觀察什麼,再動手操作。
操作前先知道
載入專案排程
先觀察:Skeleton 是否保留資料列結構,而非把所有按鈕與控制項都變成灰色方塊。
操作:點選「載入排程」。
預期結果:排程清單暫時顯示三筆結構化骨架列;完成後換成可讀的排程內容。
Skeleton Demo
已有版型的初次載入,先讓結構留在原地專案排程
本週交付項目新版元件規格確認產品設計週二
家長入口 QA平台工程週四
八月權限盤點系統管理週五
尚未開始這項載入示範。
告訴 AI
把任務、規則、狀態與操作條件一次寫清楚。
在 LumenDesk 的專案排程初次載入時,以 Skeleton 呈現預期的資料列、標題與日期欄位。骨架要跟即將出現的清單結構接近,只持續幾秒並保留適度動態,讓人知道畫面沒有卡住。不要把按鈕、下拉選單、對話框或整個頁面都畫成骨架;載入完成後以真實排程列取代骨架,失敗狀態另用可重試的錯誤訊息處理。驗收清單
不要只確認欄位能不能點。
- 骨架是否對應即將出現的結構?
- 是否只用在資料導向容器,而不是互動控制項?
- 內容出現時版面是否穩定?
- 是否有忙碌狀態與可理解的等待文字?
- 是否會在短時間內換成資料、空狀態或錯誤狀態?
- 是否避免永遠閃動的骨架?