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

一、概念

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

空狀态是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）是否包含人物插畫

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

本文由 @晨屹 原創發布于人人都是産品經理。未經許可，禁止轉載

題圖來自Unsplash，基于CC0協議

該文觀點僅代表作者本人，人人都是産品經理平台僅提供信息存儲空間服務。

,

更多精彩资讯请关注tft每日頭條，我们将持续为您更新最新资讯!

查看全部