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

一、概念

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

空狀態是空白的狀態，是對沒有數據頁面的補充，一種對零數據的設計形式。

空狀態是B端產品中不可缺少的一部部分undefined以網購為例，回想一下常見的空狀態情況：

• 搜索商品卻沒有找到的狀態
• 查看商品時加載不出來或出錯的狀態
• 購物車里沒有商品時的狀態
• 地址管理頁面中收貨地址為空的狀態
• 提交訂單后的狀態

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

1. 異常狀態類型

最常見的空狀態類型有：

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

1）403

含義：

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

對應操作：

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

2）404

含義：

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

對應操作：

該頁面不存在或者被刪除，可以給返回首頁按鈕，引導用戶返回首頁進行其他業務操作。

3）500

含義：

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

對應操作：

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

4）無結果

含義：

最常出現在B端查詢界面中，輸入查詢條件后，無匹配的結果

對應操作：

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

5）數據為空

含義：

數據為空更多出現在新用戶剛進入系統的場景，沒有新的數據產生，會出現數據為空的表格、詳情等。

對應操作：

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

二、如何設計B端異常狀態頁面

我總結了B端異常狀態的頁面，大概是五種設計類型：

1. 純配圖、圖形

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

2. 純文案

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

3. 插畫+文案標題

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

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

4. 插畫+文案標題+按鈕

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

5. 動畫+文案標題+描述文字

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

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

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

3）是否包含人物插畫

異常狀態頁面的視覺設計使用中性或幽默的語氣；與產品的品牌風格保持一致。文案需要遵循的規則：文案傳達出有用的信息；在不需要操作的情況下，告訴用戶頁面的作用。