Pages Menu
TwitterRssFacebook
Categories Menu

Posted by on 七月 15, 2014 in 網頁設計 | 0 comments

如何設計網頁的空白狀態

如何設計網頁的空白狀態

空白狀態 ( 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

 

Ian Lin

喜歡學習,喜歡嘗試不同的事物及解決問題。對於軟體工程、專案管理、系統分析、網站管理及使用者經驗等 IT 類型知識有濃厚的興趣。

More Posts - Website

Post a Reply

你的電子郵件位址並不會被公開。 必要欄位標記為 *