輕松看懂規(guī)范！詳解組件控件結(jié)構(gòu)系統(tǒng)之空數(shù)據(jù)類

Echo ：設(shè)計師或產(chǎn)品經(jīng)理在設(shè)計產(chǎn)品原型時，大部分情況都是先設(shè)計主流程的主界面，然后設(shè)計其他各個場景的界面，最后設(shè)計非常界面、空數(shù)據(jù)界面等等。那么，空數(shù)據(jù)界面一共有哪幾種類型呢？這篇文章我們來看一下設(shè)計規(guī)范中的空數(shù)據(jù)類型。

系列文章： 

空數(shù)據(jù)類型一共有三類：

• 初始狀況
• 清空狀況
• 出錯狀況

仍舊附上一張腦圖，組件控件分類（假如單純通過組件控件，難以知足功能劃分的需求，所以我將這個范圍擴大，分類里面不僅僅含有組件和控件，所以請不要在意細(xì)節(jié)。）

初始狀況

定義：初始化狀況，沒有任何內(nèi)容，必要用戶進(jìn)行某種操作才能產(chǎn)生內(nèi)容的界面。

用途：提醒用戶必要進(jìn)行某種操作才會出現(xiàn)內(nèi)容，并不是沒有內(nèi)容。

例如京東App，當(dāng)用戶沒有把商品加入購物車時，進(jìn)入購物車界面，會給出提醒購物車界面為空，給出用戶提醒后，給出相對應(yīng)的入口按鈕，指導(dǎo)用戶操作。假如直接給出一個空白界面，那樣的話用戶可能以為該界面出Bug了，不知所措。

Gmail直接用一個插畫提醒用戶收件箱為空。

初始狀況的組成部分：

• 相干插畫/圖片。
• 解說文案。
• 操作入口按鈕或可點擊筆墨（非必須）。

一樣平常對于初始狀況的設(shè)計，常規(guī)做法是簡單的插畫配合簡潔的文案，需要的時候給出指導(dǎo)用戶操作舉動的按鈕。

如今流行的設(shè)計趨勢是插畫越輕量越簡單越好，以免搶奪了文案信息。

清空狀況

定義：通過刪除或其他用戶操作，清空當(dāng)前的網(wǎng)頁內(nèi)容，產(chǎn)生了空界面，這時候必要有明確的提醒，且告知用戶該如何處理。

用途：提醒用戶該界面為空數(shù)據(jù)的緣故原由是用戶刪除了內(nèi)容。

清空狀況是對初始狀況的進(jìn)一步細(xì)化。清空狀況的界面和初始狀況設(shè)計很相似，唯一不同的是文案的提醒。

清空狀況的組成部分：

• 相干插畫/圖片
• 宣傳解說文案的
• 操作入口按鈕或可點擊筆墨（非必須）

有的產(chǎn)品設(shè)計直接把清空狀況的界面按照初始狀況來設(shè)計，如許也是可以的，瑕玷就是沒有告知用戶產(chǎn)生空狀況緣故原由是初始化照舊清空所致。

出錯狀況

定義：因為網(wǎng)絡(luò)、服務(wù)器或者沒有找他其他效果等緣故原由導(dǎo)致無法加載內(nèi)容，產(chǎn)生了空界面，這時候必要有明確的提醒，且告知用戶該如何處理。用戶操作反饋的無效果界面也可以用如許的思路來設(shè)計。

用途：告知用戶當(dāng)前產(chǎn)生的空界面是因為某些緣故原由出錯所致。

例如知乎在網(wǎng)絡(luò)非常時，網(wǎng)頁加載不出來，出現(xiàn)空數(shù)據(jù)網(wǎng)頁，給出文案提醒和點擊重試按鈕。微博國際版也給出文案提醒，小插畫和點擊按鈕。

在對信息進(jìn)行搜索，無法獲取數(shù)據(jù)時，產(chǎn)生的空數(shù)據(jù)界面。例如iOS原生郵件在搜索不到內(nèi)容時，產(chǎn)生的空數(shù)據(jù)狀況界面。而網(wǎng)易考拉在搜索無效果時，給出新的解決方案。

原有界面內(nèi)容被刪除時，用戶點擊進(jìn)入時出現(xiàn)的出錯狀況。例如QQ欣賞器，通過消息列表點擊，進(jìn)入消息詳情，因為文章被刪除，會出現(xiàn)出錯狀況的提醒。

迎接關(guān)注作者的微信公眾號：「UEDC」