筆者例舉了使用產品過程中容易出現的10種異常狀態，一起來看看吧~
在做設計的過程中，大部分設計師只專注於主操作流程、主頁面、分支流程、小頁面和頁面的不同狀態。卻容易忽略產品中容易出現的各種異常狀態。
當用戶停留任何一個界面，進行任何一個操作都可能發生異常狀態。
如果接到每個需求都去制定一次異常狀態，這樣的後果可能會使得產品的不同模塊、不同流程，異常狀態都不一致。全局規範性被破壞，同時設計師的效率也降低。
因此全局制定異常狀態規範，後續就不需要再設計，開發直接複用異常狀態的規範。省時省力、提高效率、設計規範、運行更流暢、減少代碼重複率、安裝包也會更小。
異常狀態一共有以下10類：
- 網絡異常
- 消耗大量流量時
- 空數據
- 加載失敗
- 操作失敗
- 服務器異常
- 搜索無結果
- 無權限
- 功能建設中
- 內容被刪除
01 網絡異常
當移動設備網絡異常時，導致無法上傳和下載數據，從而無法正常的使用產品。
網絡異常存在兩種場景：
- 網絡異常時，用戶打開App，這種情況App會出現異常狀態提示給用戶，這是App主動告知行為；
- 用戶點擊操作時，由於網絡異常，這時候通過交互反饋給用戶，這是App被動告知行為。
App主動行為
當無網絡時，用戶打開App，通常有三種方式提醒用戶當前網絡異常。
- tips提示，通過tips提示用戶當前網絡不可用，tips使用場景一般為用戶打開後，界面停留在首頁， 且首頁以列表形式展示，這樣的話，tips才能合理的融入到界面中，常見使用這種佈局方式的有微信、qq等。
- 使用toast提示用戶網絡異常，同時提示用戶可以去使用非數據影響的的操作。例如網易雲音樂，當無網絡時候，告知用戶可以去正常聽已下載的音樂。
- 使用對話框，引導用戶進入設置頁面，關閉飛行模式或者打開Wi-Fi，例如美團進入首頁後的對話框提示。
App被動行為
當前無網絡時，用戶點擊操作時，無法正常使用產品，這時候通常有兩種處理方式。
一種是操作當前界面出現toast提示。另一種是進入下一級界面，以缺省頁的形式提醒用戶當前網絡異常。
例如手機淘寶，沒有網絡用戶點擊，進入下一頁，出現缺省頁提示，告知用戶網絡異常，同時提供刷新按鈕。
美團在無網絡時，點擊其他tab bar時，出現toast提示用戶當前網絡異常，稍後重試。
總結：
- 個人覺得，當App打開進入列表頁面時，常見的如IM，則使用tips提示告知用戶，非列表的IM工具時，可使用toast告知用戶即可。
- 當用戶進行界面交互時，用戶點擊操作，通過toast告知用戶即可。
02 消耗大量流量時
當涉及需要消耗大量流量數據時，且非Wi-Fi情況下，這時候需要告知用戶。常見的例如：看視頻，聽/下載歌曲、視頻通話、下載上傳文件等。
例如B站，當使用移動數據看視頻時候，則通過提示語和對應按鈕上面當流量數告知用戶。
網易雲音樂在非Wi-Fi情況下，下載音樂時，通過對話框，告知用戶當前使用數據流量，同時提供操作可繼續下載，也提供通過辦理新業務解決數據流量的問題。
03 空數據
空數據一共分為兩種類型，分別為初始狀態和清空狀態
初始狀態
用戶首次使用，沒有任何內容數據時，需要用戶進行某種操作才能產生內容的界面，這時候需要提示用戶需要進行某種操作才會出現內容。
例如淘寶App，當用戶沒有把商品加入購物車時，進入購物車界面，會給出提示購物車界面為空，給出用戶提示後，給出相對應的入口按鈕，引導用戶操作。
如果初始狀態，無任何內容直接給出一個空白界面，那樣的話用戶可能以為該界面出bug了，不知所措。
Gmail直接用一個插畫提示用戶收件箱為空。
一般對於初始狀態的設計，常規做法是簡單的插畫配合簡潔的文案，必要的時候給出引導用戶操作行為的按鈕。
現在流行的設計趨勢是插畫越輕量越簡單越好，以免搶奪了文案信息。
清空狀態
當用戶清空當前的頁面內容，產生了空界面，這時候需要有明確的提示告知用戶出現當前頁面當原因，且告知用戶該如何處理。
清空狀態是對初始狀態的進一步細化。清空狀態的界面和初始狀態設計很相似，唯一不同的是文案的提示。
有的產品設計直接把清空狀態的界面按照初始狀態來設計，這樣也是可以的，缺點就是沒有告知用戶產生空狀態原因是初始化還是清空所致。
04 加載失敗
在加載過程中，App向服務器請求數據，如果是網絡原因導致，則使用網絡異常的設計規範。
如果非網絡異常原因，則可能因為服務器異常導致接口請求不到數據，從而導致加載失敗。
第一次請求失敗，有些場景可能重試2次例如微信支付寶，這種情況可使用toast告知用戶加載失敗的原因。
05 操作失敗
任何操作行為的交互界面都伴隨著操作失敗的概率。
當用戶操作失敗時，在當前頁面給予一個反饋，告知用戶操作失敗，最好告知用戶操作失敗的原因，讓用戶知道接下來如何避免操作失敗。
06 服務器異常
因為服務器異常是小概率事件，但是也會發生。
當服務器異常時，且用戶在操作過程中，出現這種情況，一般可設計為對話框提示，明確告知用戶，服務器出現問題，讓用戶稍後重試。
例如下圖的華為雲備份恢復界面。
07 搜索無結果
用戶在搜索過程中，除了出現正常的匹配結果，還存在無匹配結果的情況，針對搜索無結果的情況，要給予用戶操作無結果的提示。
幾乎搜索的搜索無結果狀態都是在內容區出現對應的提示（插圖）
例如iOS相冊，通過搜索關鍵詞，當沒有匹配照片時，則出現對應的提示，如下圖右側圖。
下圖淘寶買家版後臺，當用戶搜索關鍵詞無結果時，出現對應的提示語和插圖。
08 無權限
無權限的場景，通常適用b端產品，對於不同組織架構的企業員工，會存在不同的權限。
例如部分重要的內容，非同一組織架構的員工無權限觀看，這種情況，用戶點擊進入一般給出對應的提示。
當然最好的方案是在App上面過濾掉無法查看的內容，但是存在員工間的轉發行為，這時候無權限的員工，點擊進入，則顯示暫無權限查看的提示頁面。
09 功能建設中
一般App功能正在開發中，這種情況不會在App界面中展示出來，只有完全開發完畢並上線後才會出現在App上。
但是也有一些產品的特殊業務，會將一些未開發的功能展示出來，例如微信公眾號，長按微信文章，即出現對應的提示。
也有一些新聞頻道還沒有開發完畢上線，這時候用戶點擊進入進入下級界面，則出現對應的提示語/插圖提示，如下圖所示。
10 內容被刪除
有的時候，由於文件或者頁面內容被刪除，由於文件或者頁面內容的上一級頁面有緩存，所以當用戶點擊進入時，會出現文章/文件被刪除的情況。
已被刪除的異常狀態，常見的設計是用戶進入新頁面出現對應的插畫和標題提示。
例如下圖微信公眾號文章內容被作者刪除，讀者點擊進入，加載後的界面就出現內容被刪除的提示。
以上就是常見的10種異常狀態的簡單介紹和說明。
大家如果制定異常狀態的設計規範時，可以參考本篇文章。
當然也有公司特殊的業務導致存在很特殊的異常狀態，針對這種情況，可以適當的增加、刪除或者修改使其屬於自己公司項目的異常狀態的設計規範。
歡迎大家閱讀，如果覺得對你有用的話，歡迎傳播給更多朋友學習，同時歡迎大家在留言區交流。
#專欄作家#
UX，微信公眾號：Echo的設計筆記，人人都是產品經理專欄作家。前美團點評高級交互設計師。
題圖來自 Unsplash，基於 CC0 協議
閱讀更多 人人都是產品經理 的文章
