本篇文章彙總了常見的異常情況及處理方式，趕緊來收藏學習！

在設計中，一些異常情況經常很容易被忽略，在後期的實踐過程才發現原來還有這種狀态……

一、快速了解異常是什麼？

異常在百度中的解釋是這樣的，異常，拼音：yì cháng，是一個漢語詞彙。釋義非正常的；不同于平常的。

在設計中異常指的是除了正常狀态之外的情況，舉個例子，假如你要設計一個下載按鈕，那麼下載按鈕需要有幾種狀态呢？

正常狀态下需要提供的下載按鈕的狀态應該有：

• 點擊下載（下載前）
• 正在下載（或者是下載中、已下載59%等描述）、
• 下載完成

如果你在設計中隻提供了這三種下載狀态是不夠的（其實有部分新手設計師，隻提供了點擊下載這種狀态）。

還應該考慮如果下載中出現了斷網，或者是用戶暫停下載等情況的時候應該怎麼處理呢？

這就是異常情況。

所以除了前面三種狀态，還需要提供繼續下載，下載失敗等狀态。

下載完成後，現在的設計一般是會自動安裝的，此時顯示安裝中，如果不自動安裝還需要提供安裝操作，安裝完成後提供打開的操作。

當然這裡面包含的異常狀态主要是暫停後的繼續下載、下載失敗等。

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

即使是這樣，這些應有的狀态無論是交互設計師還是視覺設計師都應該給出的，不然程序員會不知道哪一種情況用什麼形式的按鈕。

其實在一些登錄、支付、提交等按鈕，還有一種「不可用」的狀态，用戶未輸入信息時，登錄按鈕置灰，隻有當用戶輸入相應的信息後，按鈕才高亮。

二、異常情況的彙總

通過上面的例子，相信已經充分了解到設計中的異常是什麼，以及異常的處理方式，那麼接下來總結一下設計中常見的異常情況。

異常情況處理其實分為兩種情況。

兩種異常情況處理

1. 界面中有明顯的提示，需要用戶了解此情況的，并且影響用戶進行下一步操作的。

主要包含以下7種情況：

• 與網絡環境等有關的：下載失敗、服務器出錯、斷網，網速過慢、加載失敗、網絡連接失敗（wifi 密碼正确，連接不成功）；
• 空狀态：搜索結果為空、無浏覽記錄、無收藏、無購買記錄、無訂單記錄、無下載記錄等；
• 表單類異常：密碼錯誤、輸入字符太少，數量超額，賬号密碼等不符合相應規則、賬号過期、必填項未填寫（提示并定位）、必填項的輸入字符為空等；
• 時效性：二維碼/驗證碼的過期/失效處理，例如具有實效性的鍊接，二維碼等；
• 限定值：上傳文件超過限定大小、操作過于頻繁（刷新頻繁，點贊、抖一抖，戳一戳等，需給出友好提示）；
• 不可用：賬号不存在、賬号過期、選項不可選、按鈕置灰等；
• 其他：外接設備連接失敗（如遙控器、音響、手機等）、斷電/電量過低、安裝失敗；

2. 用戶在操作中是感受不到這種異常，并且對用戶的操作有較小影響的。

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

以上就是在設計中常見的一些異常情況彙總，看到這裡，可能很多朋友就要說了，這麼多，我怎麼記得住。

我個人的建議是：如果你熟悉上面的這些異常的話，其實在設計類似的模塊時就會考慮到相應的情況；如果你不熟悉這些，你可以把文章描述的異常情況當作一個檢查表，設計到相應的模塊時，可以參考是否會出現上方的情況。

三、異常處理

接下來分析一下這些異常情況的處理方式，按異常方式來處理。

與網絡環境等有關的：下載失敗、服務器出錯、斷網，網速過慢、加載失敗、網絡連接失敗（wifi 密碼正确，連接不成功）

1. 下載失敗

一般需要給出明确的下載失敗提示，可以通過彈窗、Toast、列表等提示。如下圖所示，然後給出用戶下一步的操作提示，例如重試、重新下載、删除等操作。

2. 服務器出錯

服務器出錯的頁面常見的500、501、502、503、504、505等5開頭的頁面。其中這些錯誤的解釋如下：

• 500 内部服務錯誤：顧名思義500錯誤一般是服務器遇到意外情況，而無法完成請求；
• 501 服務器不具備完成請求的功能；
• 502 Bad Gateway錯誤；
• 503 服務器目前無法使用（由于超載或停機維護）；
• 504 Bad Gateway timeout 網關超時；
• 505 服務器不支持請求中所用的 HTTP 協議版本。

服務器異常時，在網頁端的處理方式為提示 返回，在移動端的處理方式為提示 重試，下圖是一些普通的處理方式。

△ 注：單張圖片來源于網絡

近幾年，很多網站和應用将這種異常頁面設計的相對美觀和有故事性一些，提升了整體的趣味性，減少用戶的焦慮。例如網絡被外星人劫走了之類的，相信大家也看過很多。這裡就不舉例子了。

3. 網絡異常

斷網、網速過慢、網絡連接失敗（wifi 密碼正确，連接不成功）

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

如果網絡異常之前應用沒有緩存之前的頁面的内容，則整體提示用戶網絡異常，也可以提供一個操作指導用戶操作；

如果網絡異常之前頁面已經緩存則顯示之前的頁面，Toast 輕提示用戶網絡異常。

4. 空狀态

搜索結果為空、無浏覽記錄、無收藏、無購買記錄、無訂單記錄、無下載記錄等。

其實空狀态很好理解，就是頁面沒有内容時，空頁面一般會提示用戶當前頁面的空狀态，同時也可以做适當的引導。

△ 注：單張圖片來源于網絡

,

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

查看全部