作者：月牙兒，微信公眾號：一戈何處
在設(shè)計中，一些異常情況經(jīng)常很容易被忽略，在后期的實踐過程才發(fā)現(xiàn)原來還有這種狀態(tài)……
異常在百度中的解釋是這樣的，異常，拼音：yì cháng，是一個漢語詞匯。釋義非正常的；不同于平常的。
在設(shè)計中異常指的是除了正常狀態(tài)之外的情況，舉個例子，假如你要設(shè)計一個下載按鈕，那么下載按鈕需要有幾種狀態(tài)呢？
正常狀態(tài)下需要提供的下載按鈕的狀態(tài)應(yīng)該有：
點擊下載（下載前）
正在下載（或者是下載中、已下載59%等描述）
下載完成
如果你在設(shè)計中只提供了這三種下載狀態(tài)是不夠的（其實有部分新手設(shè)計師，只提供了點擊下載這種狀態(tài)）。
還應(yīng)該考慮如果下載中出現(xiàn)了斷網(wǎng)，或者是用戶暫停下載等情況的時候應(yīng)該怎么處理呢？
這就是異常情況。
所以除了前面三種狀態(tài)，還需要提供繼續(xù)下載，下載失敗等狀態(tài)。
下載完成后，現(xiàn)在的設(shè)計一般是會自動安裝的，此時顯示安裝中，如果不自動安裝還需要提供安裝操作，安裝完成后提供打開的操作。
當(dāng)然這里面包含的異常狀態(tài)主要是暫停后的繼續(xù)下載、下載失敗等。
下圖就是我做的下載按鈕，可以看到其實很多狀態(tài)如點擊下載、下載完成、安裝、打開等在視覺表現(xiàn)上是一樣，只是文本不同。
即使是這樣，這些應(yīng)有的狀態(tài)無論是交互設(shè)計師還是視覺設(shè)計師都應(yīng)該給出的，不然程序員會不知道哪一種情況用什么形式的按鈕。
其實在一些登錄、支付、提交等按鈕，還有一種「不可用」的狀態(tài)，用戶未輸入信息時，登錄按鈕置灰，只有當(dāng)用戶輸入相應(yīng)的信息后，按鈕才高亮。
通過上面的例子，相信已經(jīng)充分了解到設(shè)計中的異常是什么，以及異常的處理方式，那么接下來總結(jié)一下設(shè)計中常見的異常情況。
異常情況處理其實分為兩種情況。
1. 界面中有明顯的提示，需要用戶了解此情況的，并且影響用戶進(jìn)行下一步操作的。
主要包含以下 7 種情況：
與網(wǎng)絡(luò)環(huán)境等有關(guān)的：下載失敗、服務(wù)器出錯、斷網(wǎng)，網(wǎng)速過慢、加載失敗、網(wǎng)絡(luò)連接失�。╳ifi 密碼正確，連接不成功）；
空狀態(tài)：搜索結(jié)果為空、無瀏覽記錄、無收藏、無購買記錄、無訂單記錄、無下載記錄等；
表單類異常：密碼錯誤、輸入字符太少，數(shù)量超額，賬號密碼等不符合相應(yīng)規(guī)則、賬號過期、必填項未填寫（提示并定位）、必填項的輸入字符為空等；
時效性：二維碼/驗證碼的過期/失效處理，例如具有實效性的鏈接，二維碼等；
限定值：上傳文件超過限定大小、操作過于頻繁（刷新頻繁，點贊、抖一抖，戳一戳等，需給出友好提示）；
不可用：賬號不存在、賬號過期、選項不可選、按鈕置灰等；
其他：外接設(shè)備連接失�。ㄈ邕b控器、音響、手機等）、斷電/電量過低、安裝失敗；
2. 用戶在操作中是感受不到這種異常，并且對用戶的操作有較小影響的。
主要是用戶切換任務(wù)引起的異常：如按 home 鍵突然退出/切換應(yīng)用、返回鍵退出、下載過程退出等。
以上就是在設(shè)計中常見的一些異常情況匯總，看到這里，可能很多朋友就要說了，這么多，我怎么記得住。
我個人的建議是：如果你熟悉上面的這些異常的話，其實在設(shè)計類似的模塊時就會考慮到相應(yīng)的情況；如果你不熟悉這些，你可以把文章描述的異常情況當(dāng)作一個檢查表，設(shè)計到相應(yīng)的模塊時，可以參考是否會出現(xiàn)上方的情況。
接下來分析一下這些異常情況的處理方式，按異常方式來處理。
與網(wǎng)絡(luò)環(huán)境等有關(guān)的：下載失敗、服務(wù)器出錯、斷網(wǎng)，網(wǎng)速過慢、加載失敗、網(wǎng)絡(luò)連接失�。╳ifi 密碼正確，連接不成功）
一般需要給出明確的下載失敗提示，可以通過彈窗、Toast、列表等提示。如下圖所示，然后給出用戶下一步的操作提示，例如重試、重新下載、刪除等操作。
△ 注：單張圖片來源于網(wǎng)絡(luò)截圖
服務(wù)器出錯的頁面常見的500、501、502、503、504、 505 等 5 開頭的頁面。其中這些錯誤的解釋如下：
500 內(nèi)部服務(wù)錯誤：顧名思義 500 錯誤一般是服務(wù)器遇到意外情況，而無法完成請求；
501 服務(wù)器不具備完成請求的功能；
502 Bad Gateway錯誤；
503 服務(wù)器目前無法使用（由于超載或停機維護）；
504 Bad Gateway timeout 網(wǎng)關(guān)超時；
505 服務(wù)器不支持請求中所用的 HTTP 協(xié)議版本。
服務(wù)器異常時，在網(wǎng)頁端的處理方式為提示+返回，在移動端的處理方式為提示+重試，下圖是一些普通的處理方式。
△ 注：單張圖片來源于網(wǎng)絡(luò)截圖
近幾年，很多網(wǎng)站和應(yīng)用將這種異常頁面設(shè)計的相對美觀和有故事性一些，提升了整體的趣味性，減少用戶的焦慮。例如網(wǎng)絡(luò)被外星人劫走了之類的，相信大家也看過很多。這里就不舉例子了。
斷網(wǎng)、網(wǎng)速過慢、網(wǎng)絡(luò)連接失�。╳ifi 密碼正確，連接不成功）
其實都是屬于網(wǎng)絡(luò)異常的情況，加載失敗有時是網(wǎng)絡(luò)速度慢造成的，有時可能是IIS（Internet Information Services 互聯(lián)網(wǎng)信息服務(wù)）空間不足。下圖是一些網(wǎng)絡(luò)異常情況下的處理方式。
如果網(wǎng)絡(luò)異常之前應(yīng)用沒有緩存之前的頁面的內(nèi)容，則整體提示用戶網(wǎng)絡(luò)異常，也可以提供一個操作指導(dǎo)用戶操作；
如果網(wǎng)絡(luò)異常之前頁面已經(jīng)緩存則顯示之前的頁面，Toast 輕提示用戶網(wǎng)絡(luò)異常。
QQ客服