最新消息 News

網頁的空白狀態也要精心安排,3大使用情境的空白設計

2017-01-31

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


1.第一次使用


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


2014-07-15_095003


2.清除


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

2014-07-15_095018


3.錯誤


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

 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認證

 

更多案例

 

online_tw6.gif

Top