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

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

系列文章： 

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

• 初始狀況
• 清空狀況
• 出錯(cuò)狀況

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

初始狀況

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

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

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

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

初始狀況的組成部分：

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

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

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

清空狀況

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

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

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

清空狀況的組成部分：

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

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

出錯(cuò)狀況

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

用途：告知用戶當(dāng)前產(chǎn)生的空界面是因?yàn)槟承┚壒试沙鲥e(cuò)所致。

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

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

原有界面內(nèi)容被刪除時(shí)，用戶點(diǎn)擊進(jìn)入時(shí)出現(xiàn)的出錯(cuò)狀況。例如QQ欣賞器，通過消息列表點(diǎn)擊，進(jìn)入消息詳情，因?yàn)槲恼卤粍h除，會(huì)出現(xiàn)出錯(cuò)狀況的提醒。

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