Echo ：設計師或產品經理在設計產品原型時，大部分情況都是先設計主流程的主界面，然后設計其他各個場景的界面，最后設計異常界面、空數據界面等等。那么，空數據界面一共有哪幾種類型呢？這篇文章我們來看一下設計規范中的空數據類型。
系列文章：?
空數據類型一共有三類：
- 初始狀態
- 清空狀態
- 出錯狀態
依舊附上一張腦圖，組件控件分類（如果單純通過組件控件，難以滿足功能劃分的需求，所以我將這個范圍擴大，分類里面不僅僅含有組件和控件，所以請不要在意細節。）
初始狀態
定義：初始化狀態，沒有任何內容，需要用戶進行某種操作才能產生內容的界面。
用途：提示用戶需要進行某種操作才會出現內容，并不是沒有內容。
例如京東App，當用戶沒有把商品加入購物車時，進入購物車界面，會給出提示購物車界面為空，給出用戶提示后，給出相對應的入口按鈕，引導用戶操作。如果直接給出一個空白界面，那樣的話用戶可能以為該界面出Bug了，不知所措。
Gmail直接用一個插畫提示用戶收件箱為空。
初始狀態的組成部分：
- 相關插畫/圖片。
- 解說文案。
- 操作入口按鈕或可點擊文字（非必須）。
一般對于初始狀態的設計，常規做法是簡單的插畫配合簡潔的文案，必要的時候給出引導用戶操作行為的按鈕。
現在流行的設計趨勢是插畫越輕量越簡單越好，以免搶奪了文案信息。
清空狀態
定義：通過刪除或其他用戶操作，清空當前的頁面內容，產生了空界面，這時候需要有明確的提示，且告知用戶該如何處理。
用途：提示用戶該界面為空數據的原因是用戶刪除了內容。
清空狀態是對初始狀態的進一步細化。清空狀態的界面和初始狀態設計很相似，唯一不同的是文案的提示。
清空狀態的組成部分：
- 相關插畫/圖片
- 宣傳解說文案的
- 操作入口按鈕或可點擊文字（非必須）
有的產品設計直接把清空狀態的界面按照初始狀態來設計，這樣也是可以的，缺點就是沒有告知用戶產生空狀態原因是初始化還是清空所致。
出錯狀態
定義：由于網絡、服務器或者沒有找他其他結果等原因導致無法加載內容，產生了空界面，這時候需要有明確的提示，且告知用戶該如何處理。用戶操作反饋的無結果界面也可以用這樣的思路來設計。
用途：告知用戶當前產生的空界面是由于某些原因出錯所致。
例如知乎在網絡異常時，頁面加載不出來，出現空數據頁面，給出文案提示和點擊重試按鈕。微博國際版也給出文案提示，小插畫和點擊按鈕。
在對信息進行搜索，無法獲取數據時，產生的空數據界面。例如iOS原生郵件在搜索不到內容時，產生的空數據狀態界面。而網易考拉在搜索無結果時，給出新的解決方案。
原有界面內容被刪除時，用戶點擊進入時出現的出錯狀態。例如QQ瀏覽器，通過新聞列表點擊，進入新聞詳情，由于文章被刪除，會出現出錯狀態的提示。
歡迎關注作者的微信公眾號：「UEDC」
「看高手如何化腐朽為神奇」
【優設網 原創文章 投稿郵箱：yuan@uisdc.com】
================明星欄目推薦================
優優教程網： UiiiUiii.com是優設旗下優質中文教程網站，分享了大量PS、AE、AI、C4D等中文教程，為零基礎設計愛好者也準備了貼心的知識樹專欄。開啟免費自學新篇章，按照我們的專欄一步步學習，一定可以迅速上手并制作出酷炫的視覺效果。
設計導航：國內人氣最高的設計網址導航，設計師必備：http://hao.uisdc.com
復制本文鏈接 文章為作者獨立觀點不代表優設網立場，未經允許不得轉載。
發評論！每天贏獎品
點擊 登錄 后，在評論區留言，系統會隨機派送獎品
2012年成立至今，是國內備受歡迎的設計師平臺，提供獎品贊助 聯系我們
標志設計標準教程
已累計誕生 729 位幸運星
發表評論
↓ 下方為您推薦了一些精彩有趣的文章熱評 ↓