一(yi)、快速了解異(yi)(yi)常(chang)是(shi)什么？異(yi)(yi)常(chang)在(zai)百度中(zhong)的解釋是(shi)這樣的，異(yi)(yi)常(chang)，拼音：yì cháng，是(shi)一(yi)個漢語詞匯。釋義非正常(chang)的；不(bu)同于平常(chang)的。

在設計中異常指的(de)是除(chu)了正常狀(zhuang)態之外的(de)情況，舉個(ge)例子，假如你要(yao)設計一(yi)個(ge)下載(zai)(zai)按(an)鈕，那么下載(zai)(zai)按(an)鈕需(xu)要(yao)有幾種狀(zhuang)態呢？

正(zheng)常狀(zhuang)態(tai)下(xia)(xia)(xia)需要提供的下(xia)(xia)(xia)載按(an)鈕(niu)的狀(zhuang)態(tai)應該有：點擊下(xia)(xia)(xia)載（下(xia)(xia)(xia)載前）正(zheng)在下(xia)(xia)(xia)載（或者是(shi)下(xia)(xia)(xia)載中、已下(xia)(xia)(xia)載59%等描述(shu)）下(xia)(xia)(xia)載完成如果(guo)你在設計中只提供了這(zhe)三種下(xia)(xia)(xia)載狀(zhuang)態(tai)是(shi)不夠的（其實有部(bu)分(fen)新手(shou)設計師，只提供了點擊下(xia)(xia)(xia)載這(zhe)種狀(zhuang)態(tai)）。

還應該考(kao)慮如果下載(zai)中出現了(le)斷網，或者(zhe)是用戶暫停下載(zai)等情況的時候應該怎(zen)么(me)處(chu)理呢？

這就(jiu)是異常情況。

所以除了前面三種狀(zhuang)態(tai)，還(huan)需要提供繼(ji)續下載，下載失(shi)敗等狀(zhuang)態(tai)。

下載完成后，現(xian)在的(de)設計一(yi)般是會自(zi)動(dong)安(an)(an)裝的(de)，此時顯(xian)示安(an)(an)裝中(zhong)，如果不(bu)自(zi)動(dong)安(an)(an)裝還需要(yao)提供安(an)(an)裝操(cao)作，安(an)(an)裝完成后提供打開的(de)操(cao)作。

當(dang)然這(zhe)里面包含的異常狀態主要(yao)是暫停(ting)后的繼(ji)續(xu)下(xia)載、下(xia)載失(shi)敗等(deng)。

下(xia)圖就是我做的下(xia)載(zai)按(an)鈕，可以(yi)看到(dao)其實很多狀態如點擊下(xia)載(zai)、下(xia)載(zai)完成、安裝、打開(kai)等在視覺表現上是一樣，只是文本不同。

即使是(shi)這樣，這些(xie)應(ying)有的(de)狀態(tai)無論是(shi)交互設(she)計師還(huan)是(shi)視(shi)覺(jue)設(she)計師都應(ying)該給(gei)出(chu)的(de)，不(bu)然程序員會不(bu)知道哪(na)一種(zhong)情況用什么(me)形式的(de)按鈕(niu)。

其實在一(yi)些登錄、支付、提交等按(an)鈕，還(huan)有一(yi)種「不可用」的(de)(de)狀(zhuang)態，用戶(hu)(hu)未輸入信(xin)息時，登錄按(an)鈕置灰，只有當(dang)用戶(hu)(hu)輸入相應的(de)(de)信(xin)息后，按(an)鈕才高亮。二、異(yi)常(chang)(chang)情況的(de)(de)匯(hui)總(zong)通過上面的(de)(de)例子，相信(xin)已經(jing)充分了解到設計(ji)中(zhong)(zhong)的(de)(de)異(yi)常(chang)(chang)是什么(me)，以及異(yi)常(chang)(chang)的(de)(de)處(chu)理方式，那(nei)么(me)接(jie)下來總(zong)結(jie)一(yi)下設計(ji)中(zhong)(zhong)常(chang)(chang)見的(de)(de)異(yi)常(chang)(chang)情況。

異(yi)常情況(kuang)(kuang)(kuang)處(chu)理其實分(fen)為兩(liang)種情況(kuang)(kuang)(kuang)。兩(liang)種異(yi)常情況(kuang)(kuang)(kuang)處(chu)理1. 界面中有明顯的(de)提(ti)示，需要用戶了解(jie)此(ci)情況(kuang)(kuang)(kuang)的(de)，并且(qie)影響用戶進行下一步操(cao)作(zuo)的(de)。

主要包含以(yi)下(xia)(xia) 7 種情況(kuang)：與(yu)網絡(luo)環境(jing)等(deng)有關的(de)：下(xia)(xia)載(zai)失(shi)敗(bai)(bai)、服務器出錯、斷網，網速過(guo)(guo)慢(man)、加載(zai)失(shi)敗(bai)(bai)、網絡(luo)連(lian)接(jie)失(shi)敗(bai)(bai)（wifi 密(mi)碼(ma)(ma)正(zheng)確，連(lian)接(jie)不(bu)(bu)成功）；空狀(zhuang)態：搜索結果為空、無(wu)瀏覽記(ji)(ji)錄、無(wu)收藏、無(wu)購買記(ji)(ji)錄、無(wu)訂單記(ji)(ji)錄、無(wu)下(xia)(xia)載(zai)記(ji)(ji)錄等(deng)；表單類異(yi)常：密(mi)碼(ma)(ma)錯誤、輸入字符太少，數(shu)量超額，賬(zhang)(zhang)號(hao)密(mi)碼(ma)(ma)等(deng)不(bu)(bu)符合相應(ying)規(gui)則、賬(zhang)(zhang)號(hao)過(guo)(guo)期、必填(tian)(tian)項(xiang)(xiang)(xiang)未填(tian)(tian)寫（提示并定位）、必填(tian)(tian)項(xiang)(xiang)(xiang)的(de)輸入字符為空等(deng)；時效(xiao)性：二維(wei)碼(ma)(ma)/驗(yan)證(zheng)碼(ma)(ma)的(de)過(guo)(guo)期/失(shi)效(xiao)處理，例如(ru)具有實(shi)效(xiao)性的(de)鏈接(jie)，二維(wei)碼(ma)(ma)等(deng)；限定值：上傳文(wen)件超過(guo)(guo)限定大小(xiao)、操(cao)作(zuo)過(guo)(guo)于頻(pin)繁（刷新頻(pin)繁，點贊(zan)、抖(dou)一抖(dou)，戳(chuo)一戳(chuo)等(deng)，需給出友好提示）；不(bu)(bu)可(ke)用：賬(zhang)(zhang)號(hao)不(bu)(bu)存在、賬(zhang)(zhang)號(hao)過(guo)(guo)期、選項(xiang)(xiang)(xiang)不(bu)(bu)可(ke)選、按(an)鈕(niu)置灰等(deng)；其他(ta)：外接(jie)設備連(lian)接(jie)失(shi)敗(bai)(bai)（如(ru)遙(yao)控器、音(yin)響、手機等(deng)）、斷電(dian)/電(dian)量過(guo)(guo)低(di)、安裝失(shi)敗(bai)(bai)；2. 用戶(hu)在操(cao)作(zuo)中是感受不(bu)(bu)到這種異(yi)常，并且對用戶(hu)的(de)操(cao)作(zuo)有較小(xiao)影響的(de)。

主(zhu)要是用(yong)戶切換任務引起的異常(chang)：如按 home 鍵(jian)突然退(tui)出(chu)/切換應(ying)用(yong)、返(fan)回鍵(jian)退(tui)出(chu)、下載過(guo)程退(tui)出(chu)等。

以(yi)上就是(shi)在設計(ji)中常(chang)見(jian)的一些異常(chang)情況匯總，看到這(zhe)里，可能很多朋友就要說(shuo)了(le)，這(zhe)么多，我怎(zen)么記得(de)住。

我(wo)個人的(de)建議是(shi)：如果你熟悉(xi)上面的(de)這些(xie)異(yi)(yi)常(chang)的(de)話，其實在(zai)設計(ji)類似的(de)模塊時就會考慮(lv)到相應的(de)情(qing)(qing)(qing)況；如果你不熟悉(xi)這些(xie)，你可以把文章描(miao)述的(de)異(yi)(yi)常(chang)情(qing)(qing)(qing)況當作一(yi)個檢(jian)查(cha)表，設計(ji)到相應的(de)模塊時，可以參考是(shi)否會出現上方的(de)情(qing)(qing)(qing)況。三(san)、異(yi)(yi)常(chang)處理(li)(li)接下來分析一(yi)下這些(xie)異(yi)(yi)常(chang)情(qing)(qing)(qing)況的(de)處理(li)(li)方式(shi)，按異(yi)(yi)常(chang)方式(shi)來處理(li)(li)。

與網絡環境等(deng)有關的(de)(de)：下(xia)載(zai)失(shi)敗(bai)、服務器(qi)出(chu)(chu)錯(cuo)、斷網，網速過慢(man)、加載(zai)失(shi)敗(bai)、網絡連(lian)接失(shi)敗(bai)（wifi 密碼(ma)正確(que)(que)，連(lian)接不成功(gong)）1. 下(xia)載(zai)失(shi)敗(bai)一(yi)般(ban)需要給出(chu)(chu)明確(que)(que)的(de)(de)下(xia)載(zai)失(shi)敗(bai)提示，可以(yi)通過彈窗、Toast、列表等(deng)提示。如下(xia)圖(tu)所示，然(ran)后給出(chu)(chu)用戶下(xia)一(yi)步(bu)的(de)(de)操作提示，例(li)如重試、重新下(xia)載(zai)、刪除等(deng)操作。

2. 服務(wu)器(qi)出錯服務(wu)器(qi)出錯的頁(ye)面(mian)常見(jian)的500、501、502、503、504、 505 等(deng) 5 開頭的頁(ye)面(mian)。其中這些錯誤(wu)(wu)的解(jie)釋(shi)如下(xia)：500 內部服務(wu)錯誤(wu)(wu)：顧名思義(yi) 500 錯誤(wu)(wu)一般(ban)是服務(wu)器(qi)遇到(dao)意外(wai)情況，而無法(fa)完(wan)成請求(qiu)；501 服務(wu)器(qi)不具備完(wan)成請求(qiu)的功能(neng)；502 Bad Gateway錯誤(wu)(wu)；503 服務(wu)器(qi)目前無法(fa)使用(yong)（由(you)于超載或停機(ji)維護）；504 Bad Gateway timeout 網關超時(shi)；505 服務(wu)器(qi)不支持請求(qiu)中所用(yong)的 HTTP 協議版本。服務(wu)器(qi)異常時(shi)，在(zai)網頁(ye)端的處理方(fang)式(shi)為提示+返回，在(zai)移動端的處理方(fang)式(shi)為提示+重試，下(xia)圖是一些普(pu)通的處理方(fang)式(shi)。

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

3. 網(wang)絡(luo)異常斷(duan)網(wang)、網(wang)速過慢(man)、網(wang)絡(luo)連接失(shi)敗（wifi 密(mi)碼正確，連接不成(cheng)功）

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

如果網(wang)絡異常之前應用(yong)沒(mei)有緩存之前的(de)頁面的(de)內容，則整體提示用(yong)戶網(wang)絡異常，也可(ke)以提供(gong)一個(ge)操(cao)(cao)作指(zhi)導用(yong)戶操(cao)(cao)作；

如果網絡異(yi)常(chang)之(zhi)(zhi)前頁(ye)面(mian)已經緩(huan)存則顯示之(zhi)(zhi)前的頁(ye)面(mian)，Toast 輕提示用戶(hu)網絡異(yi)常(chang)

4. 空狀(zhuang)態(tai)搜索結(jie)果為空、無(wu)瀏(liu)覽(lan)記(ji)錄(lu)、無(wu)收藏、無(wu)購(gou)買記(ji)錄(lu)、無(wu)訂單記(ji)錄(lu)、無(wu)下載記(ji)錄(lu)等。

其實(shi)空(kong)(kong)狀態很好理(li)解，就(jiu)是頁(ye)面沒有內容時，空(kong)(kong)頁(ye)面一般會(hui)提示用戶當前頁(ye)面的空(kong)(kong)狀態，同時也可以(yi)做適當的引導。

例如(ru)在影視類 App 中，如(ru)果觀看記錄為空，則可以為用戶(hu)推薦影片，如(ru)熱播影片、猜您喜歡，其(qi)他(ta)人都在看等熱門推薦供(gong)用戶(hu)選擇。

不過如果(guo)無法確(que)定你推薦的用戶是(shi)否喜歡(huan)，不建議做(zuo)推薦。

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

6. 時(shi)效性二(er)維(wei)碼(ma)(ma)(ma)/驗證碼(ma)(ma)(ma)的過期(qi)/失效處理，例如具有實效性的鏈接，二(er)維(wei)碼(ma)(ma)(ma)等。

實效性(xing)比較多的(de)(de)(de)體(ti)現(xian)在二維碼(ma)(ma)、付款碼(ma)(ma)、驗(yan)證碼(ma)(ma)等有(you)時間限定的(de)(de)(de)情況(kuang)下才(cai)有(you)效的(de)(de)(de)情況(kuang)，通(tong)常(chang)失效之后需(xu)要重新(xin)刷(shua)新(xin)，手機(ji)的(de)(de)(de)篩選操作(zuo)通(tong)常(chang)是點(dian)(dian)擊或者是下拉刷(shua)新(xin)；PC 端的(de)(de)(de)通(tong)常(chang)好似點(dian)(dian)擊，TV 端的(de)(de)(de)是按「OK」鍵刷(shua)新(xin)。

如下(xia)圖所(suo)示(shi)為 QQ 的掃(sao)碼登(deng)錄頁面和(he) UC瀏覽器(qi)的手(shou)機(ji)登(deng)錄頁面。

7. 限定值上(shang)傳文件(jian)超過(guo)限定大小(xiao)、操作過(guo)于頻(pin)繁(fan)（刷新頻(pin)繁(fan)，點贊、抖一抖，戳(chuo)一戳(chuo)等，需給出友(you)好提(ti)示）

對(dui)于(yu)文件過大無法(fa)上(shang)傳、下(xia)(xia)載(zai)這種建議(yi)都是采取彈窗(chuang)的(de)(de)方(fang)式告訴用戶當前狀況，明確問題并(bing)且加上(shang)操(cao)作提示。如(ru)新(xin)媒(mei)體管家中(zhong)的(de)(de)導入的(de)(de) word 的(de)(de)文件不能超過10M的(de)(de)提示如(ru)下(xia)(xia)左圖(tu)所示。

對于操作過于頻繁，比較(jiao)常(chang)見于 QQ 中的抖動窗口，其實在一些電視頁面的手(shou)機截(jie)圖工具中，刷(shua)新太頻繁也會彈(dan)出 Toast 提示。

8. 不可用(yong)賬(zhang)號(hao)不存(cun)在、賬(zhang)號(hao)過期、選(xuan)項不可選(xuan)、按(an)鈕置灰等。

賬(zhang)(zhang)號(hao)不存(cun)在(zai)(zai)用于登錄時，輸(shu)入的賬(zhang)(zhang)號(hao)不在(zai)(zai)已注冊的賬(zhang)(zhang)號(hao)中，則會提示此賬(zhang)(zhang)號(hao)不存(cun)在(zai)(zai)，是(shi)否立即注冊等。

9. 賬號過(guo)期(qi)APP 或網站中，登(deng)(deng)錄賬號后，如果(guo)太(tai)久不(bu)使(shi)用，則(ze)會有過(guo)期(qi)的(de)(de)期(qi)限，設計師需要根據 APP 的(de)(de)具體情(qing)況(kuang)設置(zhi)登(deng)(deng)錄過(guo)期(qi)的(de)(de)時間期(qi)限，此(ci)時需要提醒用戶重新登(deng)(deng)錄。

主(zhu)要有(you) Toast 和(he)彈窗(chuang)兩(liang)種方(fang)(fang)式提示(shi)，這需要根據賬號(hao)過期對用戶的(de)影響大(da)小來決(jue)定(ding)用哪一(yi)種方(fang)(fang)式。

如(ru)下方(fang)左(zuo)圖所示(shi)(shi)(shi)，登(deng)錄(lu)(lu)賬號過期對用(yong)(yong)(yong)戶使(shi)用(yong)(yong)(yong)此應用(yong)(yong)(yong)的(de)影響(xiang)不大，則可以(yi)采用(yong)(yong)(yong) Toast 輕提(ti)(ti)示(shi)(shi)(shi)的(de)方(fang)式處(chu)理；如(ru)下方(fang)右圖，如(ru)果不登(deng)錄(lu)(lu)賬號則無法使(shi)用(yong)(yong)(yong)此應用(yong)(yong)(yong)的(de)功能，則需要采用(yong)(yong)(yong)彈(dan)窗(chuang)強提(ti)(ti)示(shi)(shi)(shi)的(de)方(fang)式，提(ti)(ti)示(shi)(shi)(shi)用(yong)(yong)(yong)戶去登(deng)錄(lu)(lu)。

10. 選(xuan)項不(bu)可選(xuan)主要包含當前的(de)(de)選(xuan)項中(zhong)有(you)不(bu)可選(xuan)的(de)(de)選(xuan)項，還包括(kuo)在不(bu)達到某種條件(jian)情(qing)況下，無法使用此功(gong)能的(de)(de)按鈕等。

11. 其他(ta)外接(jie)設備連接(jie)失(shi)敗(bai)（如(ru)遙控器、音響、手(shou)機等）、斷電(dian)/電(dian)量過低、安(an)裝失(shi)敗(bai)。外接(jie)設備連接(jie)失(shi)敗(bai)需要提示(shi)，如(ru)果知道連接(jie)失(shi)敗(bai)原因，建議給出原因。

斷電情況(kuang)通常用于(yu) PC 端和 TV 端，斷電后需要為用戶恢復(fu)文件。很多設計(ji)軟(ruan)件都有這個功能，一旦軟(ruan)件無響應(ying)或者其他異常情況(kuang)導(dao)致文件出問題(ti)，一般都會提供恢復(fu)文件。

 安裝(zhuang)失敗后需要提供提示(shi)安裝(zhuang)失敗原因，如存儲(chu)空間不足(zu)、文件已損壞(huai)的提示(shi)。

 12. 用戶(hu)切(qie)換任務(wu)引起的異(yi)常較多(duo)如按 home 鍵突(tu)然(ran)退出/切(qie)換應用、返回(hui)鍵退出、下載過程退出。

此類(lei)異(yi)常建議用(yong)戶(hu)再次(ci)打開時，回(hui)到(dao)上(shang)次(ci)用(yong)戶(hu)離開前的(de)狀態。如果數據被(bei)清(qing)理，則回(hui)到(dao)上(shang)次(ci)保存的(de)數據頁面中(zhong)。四、總(zong)結文章主要(yao)總(zong)結了設計(ji)中(zhong)常用(yong)的(de)異(yi)常情況，并(bing)且給出(chu)了相應的(de)解(jie)決方(fang)案，最長用(yong)的(de)規則就是給出(chu)異(yi)常提(ti)示+下一(yi)步操(cao)作提(ti)示，既明確了出(chu)錯原因，又指(zhi)引用(yong)戶(hu)下一(yi)步操(cao)作，用(yong)戶(hu)是相對容易接(jie)受的(de)。