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

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

1. 初始狀態(tài)
2. 清空狀態(tài)
3. 出錯(cuò)狀態(tài)

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

初始狀態(tài)

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

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

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

Gmail直接用一個(gè)插畫(huà)提示用戶(hù)收件箱為空。

初始狀態(tài)的組成部分：

• 相關(guān)插畫(huà)/圖片
• 解說(shuō)文案
• 操作入口按鈕或可點(diǎn)擊文字（非必須）

一般對(duì)于初始狀態(tài)的設(shè)計(jì)，常規(guī)做法是簡(jiǎn)單的插畫(huà)配合簡(jiǎn)潔的文案，必要的時(shí)候給出引導(dǎo)用戶(hù)操作行為的按鈕。

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

清空狀態(tài)

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

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

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

清空狀態(tài)的組成部分：

• 相關(guān)插畫(huà)/圖片
• 宣傳解說(shuō)文案的
• 操作入口按鈕或可點(diǎn)擊文字（非必須）

有的產(chǎn)品設(shè)計(jì)直接把清空狀態(tài)的界面按照初始狀態(tài)來(lái)設(shè)計(jì)，這樣也是可以的，缺點(diǎn)就是沒(méi)有告知用戶(hù)產(chǎn)生空狀態(tài)原因是初始化還是清空所致。

出錯(cuò)狀態(tài)

定義：由于網(wǎng)絡(luò)、服務(wù)器或者沒(méi)有找他其他結(jié)果等原因?qū)е聼o(wú)法加載內(nèi)容，產(chǎn)生了空界面，這時(shí)候需要有明確的提示，且告知用戶(hù)該如何處理。用戶(hù)操作反饋的無(wú)結(jié)果界面也可以用這樣的思路來(lái)設(shè)計(jì)。

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

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

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

原有界面內(nèi)容被刪除時(shí)，用戶(hù)點(diǎn)擊進(jìn)入時(shí)出現(xiàn)的出錯(cuò)狀態(tài)。例如QQ瀏覽器，通過(guò)新聞列表點(diǎn)擊，進(jìn)入新聞詳情，由于文章被刪除，會(huì)出現(xiàn)出錯(cuò)狀態(tài)的提示。

相關(guān)閱讀

設(shè)計(jì)規(guī)范 | 詳解組件控件結(jié)構(gòu)體系：導(dǎo)航類(lèi)

設(shè)計(jì)規(guī)范 | 詳解組件控件結(jié)構(gòu)體系：引導(dǎo)類(lèi)

設(shè)計(jì)規(guī)范 | 詳解組件控件結(jié)構(gòu)體系：加載類(lèi)

設(shè)計(jì)規(guī)范 | 詳解組件控件結(jié)構(gòu)體系：網(wǎng)絡(luò)異常類(lèi)

設(shè)計(jì)規(guī)范 | 詳解組件控件結(jié)構(gòu)體系：提示類(lèi)

設(shè)計(jì)規(guī)范 | 詳解組件控件結(jié)構(gòu)體系：操作類(lèi)

設(shè)計(jì)規(guī)范 | 詳解組件控件結(jié)構(gòu)體系：?jiǎn)卧丶?lèi)

#專(zhuān)欄作家#

UX，微信公眾號(hào)：UEDC，人人都是產(chǎn)品經(jīng)理專(zhuān)欄作家。華為ITUX交互組組長(zhǎng)。

本文原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載

題圖來(lái)自 Pexels，基于 CC0 協(xié)議