起點課堂會員權益
職業體系課特權
線下行業大會特權
個人IP打造特權
30+門專項技能課
1300+專題課程
12場職場軟技能直播
12場求職輔導直播
12場專業技能直播
會員專屬社群
榮耀標識設計規范 | 詳解組件控件結構體系：空數據類
設計師或產品經理在設計產品原型時，大部分情況都是先設計主流程的主界面，然后設計其他各個場景的界面，最后設計異常界面、空數據界面等等。那么，空數據界面一共有哪幾種類型呢？這篇文章我們來看一下設計規范中的空數據類型。
空數據類型一共有三類：
- 初始狀態
- 清空狀態
- 出錯狀態
依舊附上一張腦圖，組件控件分類（如果單純通過組件控件，難以滿足功能劃分的需求，所以我將這個范圍擴大，分類里面不僅僅含有組件和控件，所以請不要在意細節。）
初始狀態
定義：初始化狀態，沒有任何內容，需要用戶進行某種操作才能產生內容的界面。
用途：提示用戶需要進行某種操作才會出現內容，并不是沒有內容。
例如京東App，當用戶沒有把商品加入購物車時，進入購物車界面，會給出提示購物車界面為空，給出用戶提示后，給出相對應的入口按鈕，引導用戶操作。如果直接給出一個空白界面，那樣的話用戶可能以為該界面出bug了，不知所措。
Gmail直接用一個插畫提示用戶收件箱為空。
初始狀態的組成部分：
- 相關插畫/圖片
- 解說文案
- 操作入口按鈕或可點擊文字（非必須）
一般對于初始狀態的設計，常規做法是簡單的插畫配合簡潔的文案，必要的時候給出引導用戶操作行為的按鈕。
現在流行的設計趨勢是插畫越輕量越簡單越好，以免搶奪了文案信息。
清空狀態
定義：通過刪除或其他用戶操作，清空當前的頁面內容，產生了空界面，這時候需要有明確的提示，且告知用戶該如何處理。
用途：提示用戶該界面為空數據的原因是用戶刪除了內容。
清空狀態是對初始狀態的進一步細化。清空狀態的界面和初始狀態設計很相似，唯一不同的是文案的提示。
清空狀態的組成部分：
- 相關插畫/圖片
- 宣傳解說文案的
- 操作入口按鈕或可點擊文字（非必須）
有的產品設計直接把清空狀態的界面按照初始狀態來設計，這樣也是可以的，缺點就是沒有告知用戶產生空狀態原因是初始化還是清空所致。
出錯狀態
定義：由于網絡、服務器或者沒有找他其他結果等原因導致無法加載內容，產生了空界面，這時候需要有明確的提示，且告知用戶該如何處理。用戶操作反饋的無結果界面也可以用這樣的思路來設計。
用途：告知用戶當前產生的空界面是由于某些原因出錯所致。
例如知乎在網絡異常時，頁面加載不出來，出現空數據頁面，給出文案提示和點擊重試按鈕。微博國際版也給出文案提示，小插畫和點擊按鈕
在對信息進行搜索，無法獲取數據時，產生的空數據界面。例如iOS原生郵件在搜索不到內容時，產生的空數據狀態界面。而網易考拉在搜索無結果時，給出新的解決方案。
原有界面內容被刪除時，用戶點擊進入時出現的出錯狀態。例如QQ瀏覽器，通過新聞列表點擊，進入新聞詳情，由于文章被刪除，會出現出錯狀態的提示。
相關閱讀
#專欄作家#
UX，微信公眾號：UEDC，人人都是產品經理專欄作家。華為ITUX交互組組長。
本文原創發布于人人都是產品經理。未經許可，禁止轉載
題圖來自 Pexels，基于 CC0 協議
- 目前還沒評論，等你發揮！
