空狀態(tài)是空白的狀態(tài)，是對(duì)沒(méi)有數(shù)據(jù)頁(yè)面的補(bǔ)充，一種對(duì)零數(shù)據(jù)的設(shè)計(jì)形式。良好的空狀態(tài)頁(yè)面設(shè)計(jì)，能夠給用戶帶來(lái)更好的交互體驗(yàn)。本文作者對(duì)此進(jìn)行了分析，希望對(duì)你有幫助。

一、概念

很多新手設(shè)計(jì)師在設(shè)計(jì)產(chǎn)品界面的時(shí)候很容易忽略空狀態(tài)的頁(yè)面設(shè)計(jì)，但如果我們的產(chǎn)品擁有良好的空狀態(tài)設(shè)計(jì)，那么它就可以幫助呈現(xiàn)出更加引人注目的用戶體驗(yàn)，同時(shí)進(jìn)行更有效的交互。

空狀態(tài)是空白的狀態(tài)，是對(duì)沒(méi)有數(shù)據(jù)頁(yè)面的補(bǔ)充，一種對(duì)零數(shù)據(jù)的設(shè)計(jì)形式。

空狀態(tài)是B端產(chǎn)品中不可缺少的一部部分undefined以網(wǎng)購(gòu)為例，回想一下常見(jiàn)的空狀態(tài)情況：

• 搜索商品卻沒(méi)有找到的狀態(tài)
• 查看商品時(shí)加載不出來(lái)或出錯(cuò)的狀態(tài)
• 購(gòu)物車?yán)餂](méi)有商品時(shí)的狀態(tài)
• 地址管理頁(yè)面中收貨地址為空的狀態(tài)
• 提交訂單后的狀態(tài)

良好的空狀態(tài)能夠讓用戶感知當(dāng)前系統(tǒng)的真實(shí)狀態(tài)undefined明確下一步的操作。例如，當(dāng)用戶在表格中進(jìn)行篩選的時(shí)候輸入對(duì)應(yīng)的篩選內(nèi)容，無(wú)匹配結(jié)果需要反饋一個(gè)空狀態(tài)告知用戶，讓用戶感知系統(tǒng)狀態(tài)是在執(zhí)行篩選后的無(wú)匹配項(xiàng)，而不是系統(tǒng)不工作，并且此時(shí)可以告知用戶的下一步操作，如更改關(guān)鍵詞等。

1. 異常狀態(tài)類型

最常見(jiàn)的空狀態(tài)類型有：

• 首次使用——新產(chǎn)品沒(méi)有內(nèi)容可以顯示時(shí)，例如打開新注冊(cè)的印象筆記時(shí)會(huì)遇到這種情況。
• 內(nèi)容被清除——當(dāng)用戶完成類似清空消息或收件箱等操作后，會(huì)出現(xiàn)一個(gè)空白的屏幕。
• 出現(xiàn)錯(cuò)誤——產(chǎn)品由于網(wǎng)絡(luò)問(wèn)題造成離線時(shí)，會(huì)出現(xiàn)空狀態(tài)的使用。
• 無(wú)結(jié)果——如果用戶進(jìn)行搜索，但是查詢內(nèi)容為空時(shí)會(huì)發(fā)生這種情況。
• 由于B端產(chǎn)品使用場(chǎng)景是在工作中進(jìn)行，對(duì)于B端的業(yè)務(wù)產(chǎn)品來(lái)說(shuō)，會(huì)多一些異常狀態(tài)。B端產(chǎn)品常見(jiàn)的異常狀態(tài)有：

1）403

含義：

通常指沒(méi)有權(quán)限訪問(wèn)此頁(yè)面。在B端產(chǎn)品中，由于用戶角色的權(quán)限關(guān)系，導(dǎo)致一個(gè)頁(yè)面部分用戶可以看到操作，部分用戶無(wú)法打開。當(dāng)沒(méi)有權(quán)限的用戶打開鏈接后就會(huì)提示403。

對(duì)應(yīng)操作：

由于是權(quán)限關(guān)系，表示此用戶無(wú)權(quán)限操作或查看該頁(yè)面，并且這種場(chǎng)景出現(xiàn)概率極低，通常給返回首頁(yè)按鈕即可，用戶點(diǎn)擊可返回首頁(yè)或工作臺(tái)。

2）404

含義：

404是一種http狀態(tài)碼，意思是：所請(qǐng)求的頁(yè)面不存在或已被刪除。

對(duì)應(yīng)操作：

該頁(yè)面不存在或者被刪除，可以給返回首頁(yè)按鈕，引導(dǎo)用戶返回首頁(yè)進(jìn)行其他業(yè)務(wù)操作。

3）500

含義：

服務(wù)器遇到了一個(gè)未曾預(yù)料的狀況，導(dǎo)致了它無(wú)法完成對(duì)請(qǐng)求的處理。一般來(lái)說(shuō)，這個(gè)問(wèn)題都會(huì)在服務(wù)器端的源代碼出現(xiàn)錯(cuò)誤時(shí)出現(xiàn)。

對(duì)應(yīng)操作：

對(duì)于服務(wù)器出現(xiàn)的故障，可以給用戶一個(gè)刷新的按鈕或者關(guān)閉按鈕。這種情況下頁(yè)面無(wú)法進(jìn)行其他操作。

4）無(wú)結(jié)果

含義：

最常出現(xiàn)在B端查詢界面中，輸入查詢條件后，無(wú)匹配的結(jié)果

對(duì)應(yīng)操作：

可以提醒用戶重新輸入查詢條件試試

5）數(shù)據(jù)為空

含義：

數(shù)據(jù)為空更多出現(xiàn)在新用戶剛進(jìn)入系統(tǒng)的場(chǎng)景，沒(méi)有新的數(shù)據(jù)產(chǎn)生，會(huì)出現(xiàn)數(shù)據(jù)為空的表格、詳情等。

對(duì)應(yīng)操作：

數(shù)據(jù)為空的情況下在B端產(chǎn)品中比較少見(jiàn)，也需要區(qū)分情況。任務(wù)型的數(shù)據(jù)為空可以給予用戶一個(gè)贊或者鼓勵(lì)的正向反饋，讓用戶的本能層感知到產(chǎn)品的情感化。

二、如何設(shè)計(jì)B端異常狀態(tài)頁(yè)面

我總結(jié)了B端異常狀態(tài)的頁(yè)面，大概是五種設(shè)計(jì)類型：

1. 純配圖、圖形

此形式在商業(yè)產(chǎn)品中使用較少，多見(jiàn)于飛機(jī)稿及一些小眾產(chǎn)品。一圖勝千言是理想的情況，真實(shí)場(chǎng)景下，孤零零的一張配圖無(wú)法闡述當(dāng)前發(fā)生了什么以及應(yīng)該如何擺脫困境。不建議使用。

2. 純文案

純文案能夠簡(jiǎn)潔清晰描述問(wèn)題或狀態(tài)，幫助用戶快速定位問(wèn)題點(diǎn)。適用于極簡(jiǎn)產(chǎn)品、對(duì)視覺(jué)沒(méi)有極致要求的B端產(chǎn)品，有個(gè)性設(shè)計(jì)語(yǔ)言的小眾產(chǎn)品等。缺點(diǎn)是略顯單調(diào)，無(wú)法進(jìn)一步觸發(fā)場(chǎng)景，產(chǎn)生共鳴。創(chuàng)造更多價(jià)值。

3. 插畫+文案標(biāo)題

比較主流的空狀態(tài)內(nèi)容形式，通過(guò)精心設(shè)計(jì)的插畫陳述產(chǎn)品狀態(tài)，引導(dǎo)體驗(yàn)路徑甚至傳達(dá)品牌價(jià)值，輔之對(duì)應(yīng)的精確文案。從傳達(dá)信息的角度幫助用戶理解當(dāng)前所處的狀態(tài)，遇到的問(wèn)題，以及解決方案。

如果你決定要使用插圖和文案，請(qǐng)確保它們要有層次感，不會(huì)相互影響。一個(gè)好的插圖能夠?yàn)轫?yè)面帶來(lái)足夠的樂(lè)趣和參與度，此時(shí)，你可以使用簡(jiǎn)單且常用的文案。

4. 插畫+文案標(biāo)題+按鈕

按鈕有更強(qiáng)的操作指引效果，強(qiáng)引導(dǎo)用戶去點(diǎn)擊操作按鈕，此時(shí)操作按鈕的跳轉(zhuǎn)邏輯很重要，需要能夠在異常狀態(tài)的場(chǎng)景下真正幫助用戶解決問(wèn)題或緩解焦慮。

5. 動(dòng)畫+文案標(biāo)題+描述文字

在空狀態(tài)設(shè)計(jì)中，使用友好且合適的文案內(nèi)容能夠帶來(lái)意想不到的效果。搭配上特別設(shè)計(jì)的插畫，可以幫助你設(shè)計(jì)出一個(gè)成功的空狀態(tài)。所以空狀態(tài)的設(shè)計(jì)我們應(yīng)該不容忽略！

常見(jiàn)的設(shè)計(jì)形式：
1）線性、面性、2.5D、3D

2）中性色、中性色+彩色、彩色

3）是否包含人物插畫

異常狀態(tài)頁(yè)面的視覺(jué)設(shè)計(jì)使用中性或幽默的語(yǔ)氣；與產(chǎn)品的品牌風(fēng)格保持一致。文案需要遵循的規(guī)則：文案?jìng)鬟_(dá)出有用的信息；在不需要操作的情況下，告訴用戶頁(yè)面的作用。