空白狀態和內容骨架怎麼選？
一句話做出判斷
空白狀態表示真的沒有內容。內容骨架表示資料還在載入，但版面形狀已經知道。
沒有內容，而且要告訴使用者下一步時，用空白狀態。短暫載入且知道版面形狀時，用內容骨架。
看看每個介面模式會做什麼
先試試每個例子，再看它適合處理什麼工作。
Empty, Error & Success State — Learning Bundle
↗ 空白、錯誤與成功狀態（教學組合）
這個教學組合包含三種不同的應用程式狀態。空白狀態（Empty）表示目前沒有內容，錯誤狀態（Error）表示事情失敗，成功狀態（Success）則確認已完成。每種狀態都需要自己的訊息和下一步。這個組合不是單一標準狀態術語。
空白、錯誤與成功狀態（教學組合）
尚無收藏指南
收藏指南，把團隊最常使用的模式放在隨手可得之處。
全新的專案清單會說明如何建立第一個項目；網路失敗時會顯示「重試」，並保留原本的篩選條件。
- 什麼時候用
- 把這個教學組合當成檢查清單，再為每個依賴資料的畫面分別設計各種狀態。
- 什麼時候不要用
- 不要留下空白畫面或死路，不要用玩笑掩蓋失敗，也不要完成後卻沒有任何成功確認。
- 程式裡的名稱
status state machine
Skeleton
↗ 骨架畫面
骨架畫面是簡單的佔位內容，形狀會接近正在載入的真正內容。
骨架畫面
個人頁會先保留頭像和文字的位置，資料載入後版面就不會突然跳動。
- 什麼時候用
- 已經知道版面長相，而且等待時間長到會被注意時，就使用骨架畫面。
- 什麼時候不要用
- 不要假造細節、讓閃動一直不停，也不要在內容幾乎立刻出現時使用骨架畫面。
- 程式裡的名稱
aria-busy="true"
快速比較
| 介面模式 | 最適合 | 不適合 | 程式裡的名稱 |
|---|---|---|---|
| 空白、錯誤與成功狀態（教學組合）Empty, Error & Success State — Learning Bundle | 把這個教學組合當成檢查清單，再為每個依賴資料的畫面分別設計各種狀態。 | 不要留下空白畫面或死路，不要用玩笑掩蓋失敗，也不要完成後卻沒有任何成功確認。 | status state machine |
| 骨架畫面Skeleton | 已經知道版面長相，而且等待時間長到會被注意時，就使用骨架畫面。 | 不要假造細節、讓閃動一直不停，也不要在內容幾乎立刻出現時使用骨架畫面。 | aria-busy="true" |
上線前檢查
- 01
先寫下使用者要完成什麼事。
- 02
測試鍵盤、焦點、觸控、縮放、載入、空白與錯誤狀態。
- 03
不用滑鼠停留或動畫，也要能取得相同資訊。
- 04
放入真實內容，並在小螢幕和大螢幕上測試。
04
可以直接複製的比較需求
團隊還不知道該選哪一種介面模式時，可以複製這段需求。
請在 空白、錯誤與成功狀態（教學組合）（Empty, Error & Success State — Learning Bundle）、骨架畫面（Skeleton） 中，為真實使用流程選出最合適的介面模式。判斷規則：空白狀態表示真的沒有內容。內容骨架表示資料還在載入，但版面形狀已經知道。。請寫下任務、內容量和打斷流程的代價，並檢查鍵盤、觸控、載入、錯誤與減少動態效果。說明選擇理由，再沿用專案的設計系統，做出最小且無障礙的版本。