2019-11-7 資深UI設計者
本文對幾種常見的異常狀態進行設計總結，其中介紹了不同異常狀態的表現形式以及我們應展現的設計狀態與規范。
異常狀態多在特殊場景下出現，比如服務器異常、網絡異常等，因為異常狀態出現的概率是較低的，所以異常狀態也常常會被忽略，等到實際碰到的時候才會意識到原來還有這種狀態……
作為交互設計師，在完成主流程設計后，也應該考慮到異常場景。
從全局性出發，我們可以預先考慮到產品將會碰到的異常狀態，針對不同的異常狀態制定相應的設計規范，在后續的設計需求中直接復用即可。
下面對幾種常見的異常狀態進行設計總結。
網絡異常的原因主要有以下兩種原因：
（1）網絡連接權限
針對某App的網絡連接權限可以通過手機進行設置，可設置為關閉應用使用數據，或者只允許應用在WLAN下使用，或者允許應用在WLAN與蜂窩網絡下均可使用。
所以以下均屬于網絡異常的情況：
（2）網絡連接狀況
在斷網（打開飛行模式）、弱網（手機信號差）的情況下， 也無法正常獲取數據。
當網絡異常時，用戶點擊進入新頁面或在當前頁進行操作時，App會通過異常狀態缺省頁或交互反饋來告知用戶當前異常狀態和解決方案。主要分為兩種情況：
（1）當用戶操作進入App新的頁面時，常以缺省頁的形式提醒用戶當前網絡異常。當應用檢測到有可用網絡時，缺省頁將自動刷新頁面內容。
比如網易云音樂在無網絡連接下，進入新頁面時，缺省頁以簡單的文案告知無網絡的基礎原因，通過查看詳情來告知用戶解決方案以及引導如何解決問題。
美團、騰訊視頻等，引導用戶檢查網絡權限設置和稍后再嘗試刷新頁面，稍后再試是因為弱網環境是暫時的，比如在地鐵上高鐵上或者某處手機信號接收較差的地方。
（2）當用戶點擊操作當前頁面時，比如上拉加載頁面、下拉刷新頁面，點贊、關注等操作時，常以toast或對話框的形式提示用戶。
比如網易云音樂，網絡異常情況下下拉刷新或上拉加載頁面均進行對話框提示，并引導用戶檢查網絡權限設置。
美團外賣，無網絡連接環境下，在我的訂單頁面進行評價操作，會進行toast提示。
前面說完網絡異常的設計規范，接下來就不得不提到流量警告的場景。
對于需要消耗大量流量的應用：
（1）在流量環境下進行需要消耗大流量的操作，比如播放/下載音視頻等，頁面會進行流量警告。比如網易云音樂在流量環境下打開MV。
（2）在WI-FI環境下切換到流量環境時通常應用會主動暫停進程并進行流量警告，并在頁面上告知用戶原因，讓用戶選擇是否繼續進程。
比如網易云音樂、愛奇藝、芒果TV、BiliBili等音視頻娛樂App，在以上2種場景下，在視頻畫布上進行告知讓用自己選擇是否繼續播放，同時也提供按鈕入口讓用戶辦理業務可免流量進行播放。其中，芒果TV和BiliBili的繼續播放按鈕還貼心地告知了用戶將要消耗的流量值。
對以上兩種場景的處理方式進行歸納，均為流量警告方式。
總結完網絡異常和流量警告的設計規范，我們知道其中影響因素包含：網絡連接權限、網絡連接狀況以及網絡環境的變化，下面做一個小總結，以便快速查詢。
在總結之前強調一下，網絡權限設置是針對某App，連接Wi-Fi和流量是針對手機（所有應用）。以iOS為例，設置截圖如下：
針對以上情況，表現狀態為“網絡異常”，則參照網絡異常的設計規范；表現狀態為“流量警告”，則參照流量警告的設計規范。
服務器出錯的情況是較少出現的，若出現服務器異常，其異常的時間也較為短暫。
一般不提示具體原因，處理方式為進入新頁面的話則以缺省頁（文案或是文案+插畫）的形式進行提示+重試按鈕，例如，進入小米金融貸頁面時服務器出現異常，缺省頁提示錯誤原因同時提供重試按鈕。
點擊操作的話則以toast或對話框的形式進行提示并重試，比如下圖的段友app，服務器出錯，刷新頁面后進行toast提示；前段時間超級火的zao應用，朋友圈火爆傳播，一度造成服務器訪問過載，制作視頻的時候應用給出了對話框提示。
在數據加載過程中，導致異常的原因可能是：
1、網絡異常導致加載失敗
2、服務器請求數據失敗導致加載失敗
1、如果是因為網絡異常導致加載失敗，處理方式參照網絡異常的設計規范。
2、如果是服務器請求數據失敗，處理方式參照服務器異常的設計規范。
空狀態就是指頁面當前無內容，主要在以下場景下會出現空狀態的情況：
當前頁面為空一般會提示用戶當前頁面為空狀態，同時也可能會做適當的引導。
針對空狀態的場景，主要采取以下幾種設計原則：
（1）用戶無權限
一般在B端產品中會碰到這種場景，通常來說，若用戶無權限訪問某功能模塊的話，處理方式一般是將該功能模塊對用戶進行隱藏。
若有其他原因不能隱藏對應功能模塊，處理方式為缺省頁面（文案或是文案+插畫），但文案要足夠明確，告知無權限的用戶該如何處理才能訪問，一般是聯系管理員添加權限。
（2）搜索無結果
搜索無結果的處理方式一般有兩種處理方式，一種是缺省頁面（文案或是文案+插畫），另一種是在第一種的基礎上加上相關推薦。具體用哪一種根據設計目標來決定。
比如網易云音樂搜索音樂無結果直接用文案告知。豆瓣搜索書影單無結果以插畫+文案的形式展示結果。美團搜索不到相應的內容，應用直接推薦其他商家刺激用戶購買。
另外也有應用會添加一些引導操作收集用戶數據來優化搜索，比如微信讀書找不到相關的數據，在頁面的底部提供一個入口讓用戶填寫書籍名稱和作者，基于用戶的反饋數據，微信讀書在后續書城書目的收錄工作中，就可以優先收錄用戶搜索率較高的書籍了，在優化搜索的同時也提供了用戶反饋訴求的入口。
（3）初始內容為空
需要用戶進行操作產生內容的頁面，初始狀態一般為空，和搜索無結果的處理方式類似，有2種處理方式，一種是缺省頁面（文案或是文案+插畫），另一種是在第一種的基礎上加上快捷入口或推薦內容，其目的都是在于引導用戶進行操作從而產生數據。具體用哪一種還是根據設計目標來決定。
直接用缺省頁面告知方式上，例如網易云音樂，個人未發布相關動態，該動態頁面直接用簡短的文案告知用戶暫無相關動態。
提供快捷入口上，比如微信讀書，用戶未加入書籍到書架時，進入書架頁面，會有一句話文案引起用戶共鳴，另外附上找書按鈕方便用戶快捷進入書城進行找書。
如果通過用戶瀏覽記錄和搜索行為等能夠分析出用戶的興趣愛好，進行精準推送，那在空狀態頁面進行推薦引導也不乏是一種很好的嘗試。比如網易云音樂、騰訊視頻和美團均有采取該方式。
網易云音樂里頭我從未購買或領取過數字專輯，該頁面也是無數據的，網易云音樂在頁面底部進行了數據專輯的推薦，具體的推薦算法不太清楚，我覺得可以是銷售量較大的專輯，或者根據我個人的搜索和瀏覽記錄進行相關推薦，最后通過埋點數據分析通過推薦引導購買是否提高了專輯購買率。
（4）內容被刪除
頁面內容被刪除區分場景說明。
第一種是需要用戶操作產生內容的頁面，用戶也可以通過刪除將頁面內容清空。
對于該場景，當頁面內容被用戶清空后，頁面內容為空，處理方式和初始狀態為空類似，以缺省頁（文案或是文案+插畫）的形式告知或在此基礎上加上快捷入口或用戶推薦。
比如清空網易云音樂中我的下載列表所有單曲、清空騰訊視頻我的緩存視頻，清空微信讀書的書架，清空后的狀態和初始狀態是一致的。
另一種場景是的頁面入口依然存在，但二級頁面內容已經被刪除了，二級空頁面的設計處理方式是以缺省頁（文案或是文案+插畫）的形式告知，文案信息告知用戶內容已被刪除。
例如某微信訂閱號的文章發布記錄中的某篇文章已經被刪除，點擊進入二級頁面后的提示如下：
功能已上線，后期進行產品升級或迭代功能正在開發中，功能入口沒有進行關閉還是允許用戶訪問，通常會在用戶進入該頁面之后進行對話對話框提示，告知原因。
以上對幾種常見異常狀態的設計規范進行了總結，相對正常狀態，異常狀態較為少見，容易忽略，大家可以參照以上規范進行異常狀態設計和優化調整。后面碰到其他異常狀態，我會繼續補充。
文章來源：人人都是產品經理