一、快(kuài)速了(le)解異常是什(shén)麽？異常在百度中的(de)解釋是這(zhè)樣的(de)，異常，拼音(yīn)：yì cháng，是一個(gè)漢語詞彙。釋義非正常的(de)；不同于平常的(de)。

在設計中異常指的(de)是除了(le)正常狀态之外的(de)情況，舉個(gè)例子，假如你要設計一個(gè)下(xià)載按鈕，那麽下(xià)載按鈕需要有幾種狀态呢(ne)？

正常狀态下(xià)需要提供的(de)下(xià)載按鈕的(de)狀态應該有：點擊下(xià)載（下(xià)載前）正在下(xià)載（或者是下(xià)載中、已下(xià)載59%等描述）下(xià)載完成如果你在設計中隻提供了(le)這(zhè)三種下(xià)載狀态是不夠的(de)（其實有部分(fēn)新手設計師，隻提供了(le)點擊下(xià)載這(zhè)種狀态）。

還(hái)應該考慮如果下(xià)載中出現了(le)斷網，或者是用(yòng)戶暫停下(xià)載等情況的(de)時(shí)候應該怎麽處理(lǐ)呢(ne)？

這(zhè)就是異常情況。

所以除了(le)前面三種狀态，還(hái)需要提供繼續下(xià)載，下(xià)載失敗等狀态。

下(xià)載完成後，現在的(de)設計一般是會自動安裝的(de)，此時(shí)顯示安裝中，如果不自動安裝還(hái)需要提供安裝操作，安裝完成後提供打開的(de)操作。

當然這(zhè)裏面包含的(de)異常狀态主要是暫停後的(de)繼續下(xià)載、下(xià)載失敗等。

下(xià)圖就是我做(zuò)的(de)下(xià)載按鈕，可(kě)以看到其實很多(duō)狀态如點擊下(xià)載、下(xià)載完成、安裝、打開等在視覺表現上是一樣，隻是文本不同。

即使是這(zhè)樣，這(zhè)些應有的(de)狀态無論是交互設計師還(hái)是視覺設計師都應該給出的(de)，不然程序員(yuán)會不知道哪一種情況用(yòng)什(shén)麽形式的(de)按鈕。

其實在一些登錄、支付、提交等按鈕，還(hái)有一種「不可(kě)用(yòng)」的(de)狀态，用(yòng)戶未輸入信息時(shí)，登錄按鈕置灰，隻有當用(yòng)戶輸入相應的(de)信息後，按鈕才高(gāo)亮。二、異常情況的(de)彙總通(tōng)過上面的(de)例子，相信已經充分(fēn)了(le)解到設計中的(de)異常是什(shén)麽，以及異常的(de)處理(lǐ)方式，那麽接下(xià)來(lái)總結一下(xià)設計中常見的(de)異常情況。

異常情況處理(lǐ)其實分(fēn)爲兩種情況。兩種異常情況處理(lǐ)1. 界面中有明(míng)顯的(de)提示，需要用(yòng)戶了(le)解此情況的(de)，并且影(yǐng)響用(yòng)戶進行下(xià)一步操作的(de)。

主要包含以下(xià) 7 種情況：與網絡環境等有關的(de)：下(xià)載失敗、服務器出錯、斷網，網速過慢(màn)、加載失敗、網絡連接失敗（wifi 密碼正确，連接不成功）；空狀态：搜索結果爲空、無浏覽記錄、無收藏、無購(gòu)買記錄、無訂單記錄、無下(xià)載記錄等；表單類異常：密碼錯誤、輸入字符太少，數量超額，賬号密碼等不符合相應規則、賬号過期、必填項未填寫（提示并定位）、必填項的(de)輸入字符爲空等；時(shí)效性：二維碼/驗證碼的(de)過期/失效處理(lǐ)，例如具有實效性的(de)鏈接，二維碼等；限定值：上傳文件超過限定大(dà)小、操作過于頻(pín)繁（刷新頻(pín)繁，點贊、抖一抖，戳一戳等，需給出友好提示）；不可(kě)用(yòng)：賬号不存在、賬号過期、選項不可(kě)選、按鈕置灰等；其他(tā)：外接設備連接失敗（如遙控器、音(yīn)響、手機等）、斷電/電量過低、安裝失敗；2. 用(yòng)戶在操作中是感受不到這(zhè)種異常，并且對(duì)用(yòng)戶的(de)操作有較小影(yǐng)響的(de)。

主要是用(yòng)戶切換任務引起的(de)異常：如按 home 鍵突然退出/切換應用(yòng)、返回鍵退出、下(xià)載過程退出等。

以上就是在設計中常見的(de)一些異常情況彙總，看到這(zhè)裏，可(kě)能很多(duō)朋友就要說了(le)，這(zhè)麽多(duō)，我怎麽記得(de)住。

我個(gè)人(rén)的(de)建議(yì)是：如果你熟悉上面的(de)這(zhè)些異常的(de)話(huà)，其實在設計類似的(de)模塊時(shí)就會考慮到相應的(de)情況；如果你不熟悉這(zhè)些，你可(kě)以把文章(zhāng)描述的(de)異常情況當作一個(gè)檢查表，設計到相應的(de)模塊時(shí)，可(kě)以參考是否會出現上方的(de)情況。三、異常處理(lǐ)接下(xià)來(lái)分(fēn)析一下(xià)這(zhè)些異常情況的(de)處理(lǐ)方式，按異常方式來(lái)處理(lǐ)。

與網絡環境等有關的(de)：下(xià)載失敗、服務器出錯、斷網，網速過慢(màn)、加載失敗、網絡連接失敗（wifi 密碼正确，連接不成功）1. 下(xià)載失敗一般需要給出明(míng)确的(de)下(xià)載失敗提示，可(kě)以通(tōng)過彈窗(chuāng)、Toast、列表等提示。如下(xià)圖所示，然後給出用(yòng)戶下(xià)一步的(de)操作提示，例如重試、重新下(xià)載、删除等操作。

2. 服務器出錯服務器出錯的(de)頁面常見的(de)500、501、502、503、504、 505 等 5 開頭的(de)頁面。其中這(zhè)些錯誤的(de)解釋如下(xià)：500 内部服務錯誤：顧名思義 500 錯誤一般是服務器遇到意外情況，而無法完成請求；501 服務器不具備完成請求的(de)功能；502 Bad Gateway錯誤；503 服務器目前無法使用(yòng)（由于超載或停機維護）；504 Bad Gateway timeout 網關超時(shí)；505 服務器不支持請求中所用(yòng)的(de) HTTP 協議(yì)版本。服務器異常時(shí)，在網頁端的(de)處理(lǐ)方式爲提示+返回，在移動端的(de)處理(lǐ)方式爲提示+重試，下(xià)圖是一些普通(tōng)的(de)處理(lǐ)方式。

近幾年，很多(duō)網站和(hé)應用(yòng)将這(zhè)種異常頁面設計的(de)相對(duì)美(měi)觀和(hé)有故事性一些，提升了(le)整體的(de)趣味性，減少用(yòng)戶的(de)焦慮。例如網絡被外星人(rén)劫走了(le)之類的(de)，相信大(dà)家也(yě)看過很多(duō)。這(zhè)裏就不舉例子了(le)。

3. 網絡異常斷網、網速過慢(màn)、網絡連接失敗（wifi 密碼正确，連接不成功）

其實都是屬于網絡異常的(de)情況，加載失敗有時(shí)是網絡速度慢(màn)造成的(de)，有時(shí)可(kě)能是IIS（Internet Information Services 互聯網信息服務）空間不足。下(xià)圖是一些網絡異常情況下(xià)的(de)處理(lǐ)方式。

如果網絡異常之前應用(yòng)沒有緩存之前的(de)頁面的(de)内容，則整體提示用(yòng)戶網絡異常，也(yě)可(kě)以提供一個(gè)操作指導用(yòng)戶操作；

如果網絡異常之前頁面已經緩存則顯示之前的(de)頁面，Toast 輕提示用(yòng)戶網絡異常

4. 空狀态搜索結果爲空、無浏覽記錄、無收藏、無購(gòu)買記錄、無訂單記錄、無下(xià)載記錄等。

其實空狀态很好理(lǐ)解，就是頁面沒有内容時(shí)，空頁面一般會提示用(yòng)戶當前頁面的(de)空狀态，同時(shí)也(yě)可(kě)以做(zuò)适當的(de)引導。

例如在影(yǐng)視類 App 中，如果觀看記錄爲空，則可(kě)以爲用(yòng)戶推薦影(yǐng)片，如熱(rè)播影(yǐng)片、猜您喜歡，其他(tā)人(rén)都在看等熱(rè)門推薦供用(yòng)戶選擇。

不過如果無法确定你推薦的(de)用(yòng)戶是否喜歡，不建議(yì)做(zuò)推薦。

5. 表單類異常密碼錯誤、輸入字符太少，數量超額，賬号密碼等不符合規則、賬号過期、必選項未填寫（提示并定位）、必填項的(de)輸入字符爲空等。

6. 時(shí)效性二維碼/驗證碼的(de)過期/失效處理(lǐ)，例如具有實效性的(de)鏈接，二維碼等。

實效性比較多(duō)的(de)體現在二維碼、付款碼、驗證碼等有時(shí)間限定的(de)情況下(xià)才有效的(de)情況，通(tōng)常失效之後需要重新刷新，手機的(de)篩選操作通(tōng)常是點擊或者是下(xià)拉刷新；PC 端的(de)通(tōng)常好似點擊，TV 端的(de)是按「OK」鍵刷新。

如下(xià)圖所示爲 QQ 的(de)掃碼登錄頁面和(hé) UC浏覽器的(de)手機登錄頁面。

7. 限定值上傳文件超過限定大(dà)小、操作過于頻(pín)繁（刷新頻(pín)繁，點贊、抖一抖，戳一戳等，需給出友好提示）

對(duì)于文件過大(dà)無法上傳、下(xià)載這(zhè)種建議(yì)都是采取彈窗(chuāng)的(de)方式告訴用(yòng)戶當前狀況，明(míng)确問題并且加上操作提示。如新媒體管家中的(de)導入的(de) word 的(de)文件不能超過10M的(de)提示如下(xià)左圖所示。

對(duì)于操作過于頻(pín)繁，比較常見于 QQ 中的(de)抖動窗(chuāng)口，其實在一些電視頁面的(de)手機截圖工具中，刷新太頻(pín)繁也(yě)會彈出 Toast 提示。

8. 不可(kě)用(yòng)賬号不存在、賬号過期、選項不可(kě)選、按鈕置灰等。

賬号不存在用(yòng)于登錄時(shí)，輸入的(de)賬号不在已注冊的(de)賬号中，則會提示此賬号不存在，是否立即注冊等。

9. 賬号過期APP 或網站中，登錄賬号後，如果太久不使用(yòng)，則會有過期的(de)期限，設計師需要根據 APP 的(de)具體情況設置登錄過期的(de)時(shí)間期限，此時(shí)需要提醒用(yòng)戶重新登錄。

主要有 Toast 和(hé)彈窗(chuāng)兩種方式提示，這(zhè)需要根據賬号過期對(duì)用(yòng)戶的(de)影(yǐng)響大(dà)小來(lái)決定用(yòng)哪一種方式。

如下(xià)方左圖所示，登錄賬号過期對(duì)用(yòng)戶使用(yòng)此應用(yòng)的(de)影(yǐng)響不大(dà)，則可(kě)以采用(yòng) Toast 輕提示的(de)方式處理(lǐ)；如下(xià)方右圖，如果不登錄賬号則無法使用(yòng)此應用(yòng)的(de)功能，則需要采用(yòng)彈窗(chuāng)強提示的(de)方式，提示用(yòng)戶去登錄。

10. 選項不可(kě)選主要包含當前的(de)選項中有不可(kě)選的(de)選項，還(hái)包括在不達到某種條件情況下(xià)，無法使用(yòng)此功能的(de)按鈕等。

11. 其他(tā)外接設備連接失敗（如遙控器、音(yīn)響、手機等）、斷電/電量過低、安裝失敗。外接設備連接失敗需要提示，如果知道連接失敗原因，建議(yì)給出原因。

斷電情況通(tōng)常用(yòng)于 PC 端和(hé) TV 端，斷電後需要爲用(yòng)戶恢複文件。很多(duō)設計軟件都有這(zhè)個(gè)功能，一旦軟件無響應或者其他(tā)異常情況導緻文件出問題，一般都會提供恢複文件。

安裝失敗後需要提供提示安裝失敗原因，如存儲空間不足、文件已損壞的(de)提示。

12. 用(yòng)戶切換任務引起的(de)異常較多(duō)如按 home 鍵突然退出/切換應用(yòng)、返回鍵退出、下(xià)載過程退出。

此類異常建議(yì)用(yòng)戶再次打開時(shí)，回到上次用(yòng)戶離開前的(de)狀态。如果數據被清理(lǐ)，則回到上次保存的(de)數據頁面中。四、總結文章(zhāng)主要總結了(le)設計中常用(yòng)的(de)異常情況，并且給出了(le)相應的(de)解決方案，最長(cháng)用(yòng)的(de)規則就是給出異常提示+下(xià)一步操作提示，既明(míng)确了(le)出錯原因，又指引用(yòng)戶下(xià)一步操作，用(yòng)戶是相對(duì)容易接受的(de)。