空白狀態( Empty State )通常出現在 APP 或是網頁上「第一次使用」、「清空」、「錯誤」的情況下。大多數的設計師專注如何設計顯示大量內容或數據的頁面。所以大多數的空白狀態多由開發人員處理，但這些空白狀態大多留下難以理解的文字或沒經過處理的基本樣式。良好的設計會花心思在空白狀態上，透過圖像或是文字告訴現在怎麼回事，並且引導使用者操作相關功能。


1.第一次使用


第一印象是很重要的，當你註冊或是登入第一次時，沒有任何的資料。透過空白狀態來向使用者說明你的功能，引導他們操作上的幫助。





2.清除


以信箱舉例，大多數的人習慣將信件內容閱讀完，每日花些時間清空未讀信件對每個人來講是例行公事。Sparrow 、Gmail 會透過簡單的圖像和文字向使用者傳達目前的確是沒有任何信件的，而不是空白頁面讓使用者不清楚現在是空信件還是連線錯誤。




3.錯誤


錯誤訊息最常見的情況通常在網路連線。你可以花一些時間設計，讓使用者知道這個異常狀況不是因他們產生。我們來比較一下各個瀏覽器如何處理這些空白狀態。


 Chrome瀏覽器有大量的文字，只有技術人員才看得懂，對於一般使用者來講根本懶得看，Opera Mini 卻過於簡潔，相對之下 Safari 看起來比較容易理解。


結論


慢慢的一些公司重視空白狀態，作為「引導使用者順利建立內容」不可或缺的角色，空白狀態必須簡單明瞭的文字、清楚標示這個位置需要放那些內容引導帶領使用者建立內容。
 


資料來源：Codrops – Tympanus
 
本文出自 WIS匯智部落格 

文章來源:http://www.bnext.com.tw/ext_rss/view/id/247674

Google 行動裝置相容性測試檢測

網址：https://www.google.com/webmasters/tools/mobile-friendly/

蘋果所規劃 網頁設計  http://www.cc-design.com.tw/ 完全符合 google認證

更多案例