當(dāng)遇到數(shù)據(jù)為空或異常狀態(tài)的時(shí)候，產(chǎn)品則會(huì)出現(xiàn)空白頁(yè)面，那么這個(gè)時(shí)候，空白頁(yè)面中需要設(shè)計(jì)些什么內(nèi)容呢？又有什么設(shè)計(jì)要點(diǎn)呢？

• 在什么場(chǎng)景下會(huì)碰到空白頁(yè)面？
• 空白頁(yè)面有通用的設(shè)計(jì)模式嗎？
• 你在過(guò)往項(xiàng)目中是否有對(duì)空白設(shè)計(jì)進(jìn)行經(jīng)驗(yàn)總結(jié)？
• … …

你是否有以上疑問(wèn)，下文將為你一一解答。

01 空白頁(yè)面為什么要設(shè)計(jì)？

對(duì)空白狀態(tài)的設(shè)計(jì)，主要有以下幾種原因：

• 用戶可以知道本頁(yè)面將放置什么內(nèi)容
• 安撫用戶疑惑或焦慮的情緒，解決用戶的困惑
• 可以刺激用戶創(chuàng)造內(nèi)容或提高點(diǎn)擊轉(zhuǎn)化

02 什么場(chǎng)景下會(huì)碰到空白頁(yè)面？

1.?數(shù)據(jù)為空

a 『用戶無(wú)權(quán)限』

指用戶無(wú)權(quán)限訪問(wèn)當(dāng)前頁(yè)面，但當(dāng)前頁(yè)面又不能對(duì)用戶進(jìn)行隱藏的場(chǎng)景。

b 『搜索無(wú)結(jié)果』

指搜索情況下無(wú)結(jié)果的場(chǎng)景。

c 『篩選無(wú)結(jié)果』

指篩選情況下無(wú)結(jié)果的場(chǎng)景。

d 『頁(yè)面無(wú)數(shù)據(jù)』

指當(dāng)前頁(yè)面無(wú)數(shù)據(jù)，該場(chǎng)景很常見(jiàn)，對(duì)于需要用戶操作、系統(tǒng)產(chǎn)生，隨著時(shí)間積累逐漸產(chǎn)生數(shù)據(jù)的頁(yè)面在App中比比皆是。

這些頁(yè)面在初次訪問(wèn)時(shí)都是無(wú)數(shù)據(jù)狀態(tài)，比如：系統(tǒng)通知列表、我的優(yōu)惠券頁(yè)面、我的賬單頁(yè)面等等。

還有一種情況就是若以上頁(yè)面支持用戶清空數(shù)據(jù)，那么清空之后也是恢復(fù)到了無(wú)數(shù)據(jù)的狀態(tài)。

2.?異常狀態(tài)

a 『網(wǎng)絡(luò)異?！?/p>

指因?yàn)榫W(wǎng)絡(luò)連接權(quán)限未開(kāi)啟、網(wǎng)絡(luò)連接狀態(tài)較差等原因?qū)е戮W(wǎng)絡(luò)異常而無(wú)法正常訪問(wèn)頁(yè)面內(nèi)容的場(chǎng)景。

b 『服務(wù)器異?！?/p>

指因?yàn)榉?wù)器異常（服務(wù)器中斷、服務(wù)器過(guò)載等）導(dǎo)致數(shù)據(jù)加載失敗無(wú)法正常傳輸?shù)角岸苏故镜膱?chǎng)景。

c 『加載失敗』

在數(shù)據(jù)加載過(guò)程中，導(dǎo)致異常的原因可能是：

• 網(wǎng)絡(luò)異常導(dǎo)致加載失敗
• 服務(wù)器請(qǐng)求數(shù)據(jù)失敗導(dǎo)致加載失敗

所以該場(chǎng)景的對(duì)應(yīng)設(shè)計(jì)策略視導(dǎo)致加載失敗的原因而定，不用單獨(dú)將『加載失敗』當(dāng)作一個(gè)獨(dú)立的場(chǎng)景來(lái)設(shè)計(jì)相應(yīng)的空白頁(yè)面。

03 空白頁(yè)面設(shè)計(jì)模式

1.?圖案(可選)+文案

適用場(chǎng)景：『用戶無(wú)權(quán)限』、『搜索無(wú)結(jié)果』、『篩選無(wú)結(jié)果』、『頁(yè)面無(wú)數(shù)據(jù)』

指通過(guò)缺省頁(yè)占位空白區(qū)域，缺省頁(yè)包含的元素有圖案及文案，文案必選，圖案則根據(jù)需要看是否設(shè)計(jì)。

舉例1：普通員工訪問(wèn)企業(yè)App的管理頁(yè)面，提示『用戶無(wú)權(quán)限』。

舉例2：去哪兒酒店『搜索無(wú)結(jié)果』。

舉例3-1：滴答清單安排任務(wù)流程，對(duì)已有清單進(jìn)行篩選，『篩選無(wú)結(jié)果』顯示如下：

舉例3-2：去哪兒對(duì)某旅游地的游玩攻略進(jìn)行篩選，『篩選無(wú)結(jié)果』顯示如下：

舉例4：去哪兒我的點(diǎn)評(píng)『頁(yè)面無(wú)數(shù)據(jù)』。

2.?圖案(可選)+文案+引導(dǎo)操作

主要通過(guò)“創(chuàng)建操作、功能說(shuō)明、點(diǎn)擊重試、反饋操作”等幾種方式來(lái)引導(dǎo)用戶操作。

a 創(chuàng)建操作

常用場(chǎng)景：『搜索無(wú)結(jié)果』、『頁(yè)面無(wú)數(shù)據(jù)』

缺省頁(yè)中除了圖案(可選)和文案元素，還附上添加/創(chuàng)建數(shù)據(jù)的功能入口，用戶點(diǎn)擊后去到可以“創(chuàng)建”數(shù)據(jù)的頁(yè)面，比如瀏覽商品添加到購(gòu)物車(chē)，比如去書(shū)城將喜歡的書(shū)加入書(shū)架等。

舉例1：去哪兒某城市搜索某地點(diǎn)『搜索無(wú)結(jié)果』，為用戶提供創(chuàng)建地點(diǎn)的操作入口，可借助用戶已知的信息豐富地點(diǎn)庫(kù)。

舉例2-1：Booking未登錄狀態(tài)進(jìn)入“我的訂單”列表，因無(wú)法讀取用戶信息，故此時(shí)『頁(yè)面無(wú)數(shù)據(jù)』，頁(yè)面中提供登錄或?qū)胗唵伟粹o用戶操作以讀取相關(guān)的訂單信息。

舉例2-2：Booking進(jìn)入消息列表頁(yè)面，消息列表『頁(yè)面無(wú)數(shù)據(jù)』展示如下，同時(shí)附上了預(yù)定酒店的按鈕，用戶點(diǎn)擊后即跳轉(zhuǎn)到酒店預(yù)定頁(yè)面。

b 功能說(shuō)明

常用場(chǎng)景：『頁(yè)面無(wú)數(shù)據(jù)』

缺省頁(yè)中除了圖案(可選)和文案元素，通過(guò)附上功能說(shuō)明的形式告知用戶如何去“創(chuàng)造”數(shù)據(jù)，在缺省頁(yè)中無(wú)法加功能入口的情況下，可以選擇該設(shè)計(jì)模式。

舉例：滴答清單某日任務(wù)『頁(yè)面無(wú)數(shù)據(jù)』狀態(tài)提示用戶點(diǎn)擊+按鈕添加。

c 點(diǎn)擊重試

常用場(chǎng)景：『網(wǎng)絡(luò)異?！弧ⅰ悍?wù)器異?！?、『加載失敗』

缺省頁(yè)中除了圖案(可選)和文案元素，因?yàn)樵摽瞻谞顟B(tài)是“暫時(shí)”的，所以給用戶提供點(diǎn)擊重試的按鈕。

舉例1：去哪兒機(jī)票查詢因『網(wǎng)絡(luò)異?！粚?dǎo)致查詢失敗。

舉例2：小米金融貸，進(jìn)入貸款頁(yè)面『服務(wù)器異常』。

d 反饋操作

常用場(chǎng)景：『搜索無(wú)結(jié)果』

缺省頁(yè)中除了圖案(可選)和文案元素，還附上用戶反饋的功能入口，基于用戶反饋數(shù)據(jù)，在優(yōu)化搜索的同時(shí)也提供了用戶反饋訴求的入口。

舉例：微信讀書(shū)『搜索無(wú)結(jié)果』頁(yè)面的底部提供一個(gè)入口讓用戶填寫(xiě)書(shū)籍名稱和作者，基于用戶的反饋數(shù)據(jù)，微信讀書(shū)在后續(xù)書(shū)城書(shū)目的收錄工作中，就可以優(yōu)先收錄用戶反饋率較高的書(shū)籍了。

3.?圖案(可選)+文案+推薦內(nèi)容

常用場(chǎng)景：『搜索無(wú)結(jié)果』、『頁(yè)面無(wú)數(shù)據(jù)』

舉例1-1：Booking酒店某旅游景點(diǎn)關(guān)鍵詞『搜索無(wú)結(jié)果』場(chǎng)景下，會(huì)推薦其他景點(diǎn)的相關(guān)搜索結(jié)果。

舉例1-2：微信讀書(shū)書(shū)架搜索某關(guān)鍵詞『搜索無(wú)結(jié)果』，為用戶推薦書(shū)城中的搜索結(jié)果。

舉例2-1：去哪兒我的作品模塊關(guān)注的人『頁(yè)面無(wú)數(shù)據(jù)』的話，會(huì)為我推薦一些大v用戶。

舉例2-2：去哪兒我的作品模塊喜歡的作品『頁(yè)面無(wú)數(shù)據(jù)』的話，會(huì)為我推薦一些廣受好評(píng)的作品。

4.?預(yù)置內(nèi)容

預(yù)置內(nèi)容指事先準(zhǔn)備好一批真實(shí)案例的數(shù)據(jù)，而不是以缺省頁(yè)的形式呈現(xiàn)給用戶。

常用場(chǎng)景：工具型App的『頁(yè)面無(wú)數(shù)據(jù)』

舉例：滴答清單初次使用者，還沒(méi)有自己創(chuàng)建的數(shù)據(jù)，進(jìn)入App看到的是示例數(shù)據(jù)，同時(shí)結(jié)合使用說(shuō)明在示例清單中呈現(xiàn)出來(lái)，用戶既知道真實(shí)數(shù)據(jù)是這樣的，也能夠按教程快速上手。

04 空白頁(yè)面設(shè)計(jì)策略

從設(shè)計(jì)模式來(lái)看，除了“預(yù)置內(nèi)容”模式，另外3種設(shè)計(jì)模式均包含圖案和文案元素，不管是圖案設(shè)計(jì)還是文案設(shè)計(jì)，均有一定的設(shè)計(jì)策略可循。

1.?圖案篇

在空白頁(yè)面設(shè)計(jì)中，圖案的重要性最低，可以選擇沒(méi)有，有的話也可以錦上添花，起到向用戶傳達(dá)情緒或增強(qiáng)App視覺(jué)特色的作用。

若選擇有，圖案的設(shè)計(jì)要和文案?jìng)鬟_(dá)的意思保持一致，不能圖案表達(dá)的是一種意思，文案表達(dá)的是另外一種意思。

圖案可以Icon化，同時(shí)也可以結(jié)合App品牌形象進(jìn)行插畫(huà)設(shè)計(jì)。

2.?文案篇

文案是必選項(xiàng)，不同空白場(chǎng)景下的文案設(shè)計(jì)有所不同。

a 數(shù)據(jù)為空

『用戶無(wú)權(quán)限』要告知用戶無(wú)權(quán)限訪問(wèn)的原因和解決方案，比如B端產(chǎn)品常用的解決方案就是聯(lián)系管理員添加權(quán)限。

『搜索無(wú)結(jié)果』告知用戶搜索無(wú)數(shù)據(jù)的結(jié)果，如有必要可推薦相關(guān)內(nèi)容，或?yàn)橛脩籼峁﹦?chuàng)建或反饋數(shù)據(jù)的入口。

『篩選無(wú)結(jié)果』一般直接告知篩選無(wú)結(jié)果。

『頁(yè)面無(wú)數(shù)據(jù)』文案設(shè)計(jì)有幾個(gè)方向：

• 告訴用戶這里將會(huì)存放什么數(shù)據(jù)
• 給用戶一個(gè)主動(dòng)創(chuàng)造數(shù)據(jù)的理由，比如通過(guò)話術(shù)引起用戶心理共鳴
• 若頁(yè)面無(wú)數(shù)據(jù)會(huì)給用戶造成困惑，則可以說(shuō)明原因打消用戶的困惑

b 異常狀態(tài)

『網(wǎng)絡(luò)異常』指出當(dāng)前狀態(tài)為網(wǎng)絡(luò)異常，并給出解決方案，注意這里不需要詳細(xì)告知因?yàn)槭裁淳唧w原因?qū)е戮W(wǎng)絡(luò)異常的，原因的告知對(duì)用戶無(wú)太大意義，甚至可能給用戶造成困惑。

『服務(wù)器異?！恢赋霎?dāng)前狀態(tài)為服務(wù)器異常，并給出解決方案，同理，無(wú)需描述詳細(xì)的原因。

『加載失敗』加載失敗主要會(huì)由網(wǎng)絡(luò)異?；蚍?wù)器異常造成，所以文案設(shè)計(jì)可依以下而定：

• 由網(wǎng)絡(luò)異常引起加載失敗，同『網(wǎng)絡(luò)異?！晃陌冈O(shè)計(jì)策略
• 由服務(wù)器異常引起加載失敗，同『服務(wù)器異?！晃陌冈O(shè)計(jì)策略

總結(jié)

以上，我在空白頁(yè)面設(shè)計(jì)中會(huì)先將碰到的場(chǎng)景進(jìn)行對(duì)應(yīng)，然后結(jié)合“設(shè)計(jì)策略”選擇適合的“設(shè)計(jì)模式”，不要完全照搬（不要誤以為某設(shè)計(jì)模式只適用于上文中提到的空白場(chǎng)景），可以根據(jù)功能和業(yè)務(wù)需求進(jìn)行調(diào)整或創(chuàng)新。

相關(guān)閱讀

《關(guān)于異常狀態(tài)的設(shè)計(jì)總結(jié)》

作者：辛小仲；一名正在成長(zhǎng)的交互設(shè)計(jì)師，公眾號(hào)：辛小仲。

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

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