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

一、概念

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

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

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

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

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

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

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

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

1）403

含義：

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

對應(yīng)操作：

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

2）404

含義：

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

對應(yīng)操作：

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

3）500

含義：

服務(wù)器遇到了一個未曾預(yù)料的狀況，導(dǎo)致了它無法完成對請求的處理。一般來說，這個問題都會在服務(wù)器端的源代碼出現(xiàn)錯誤時出現(xiàn)。

對應(yīng)操作：

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

4）無結(jié)果

含義：

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

對應(yīng)操作：

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

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

含義：

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

對應(yīng)操作：

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

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

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

1. 純配圖、圖形

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

2. 純文案

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

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

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

如果你決定要使用插圖和文案，請確保它們要有層次感，不會相互影響。一個好的插圖能夠為頁面帶來足夠的樂趣和參與度，此時，你可以使用簡單且常用的文案。

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

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

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

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

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

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

3）是否包含人物插畫

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