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

在(zai)設計中異常(chang)(chang)指的是除了正常(chang)(chang)狀態之外的情況，舉個例子，假如你要設計一個下載按(an)鈕(niu)，那(nei)么(me)下載按(an)鈕(niu)需要有幾種(zhong)狀態呢？

正常(chang)狀態下(xia)(xia)(xia)需要提供的下(xia)(xia)(xia)載按(an)鈕的狀態應(ying)該有(you)：點(dian)擊下(xia)(xia)(xia)載（下(xia)(xia)(xia)載前）正在下(xia)(xia)(xia)載（或者是下(xia)(xia)(xia)載中、已下(xia)(xia)(xia)載59%等描述）下(xia)(xia)(xia)載完成如果(guo)你在設(she)計中只提供了(le)這(zhe)三(san)種下(xia)(xia)(xia)載狀態是不夠的（其實有(you)部分新手設(she)計師，只提供了(le)點(dian)擊下(xia)(xia)(xia)載這(zhe)種狀態）。

還應(ying)該考(kao)慮如果(guo)下載(zai)中出現了斷(duan)網，或(huo)者是用(yong)戶(hu)暫停下載(zai)等(deng)情況的(de)時候應(ying)該怎么處理呢(ni)？

這就是異(yi)常情(qing)況。

所以除了(le)前面三種(zhong)狀態(tai)，還需要提供繼續下(xia)載，下(xia)載失敗等狀態(tai)。

下載完(wan)成(cheng)后，現在的(de)設計一(yi)般是(shi)會自動(dong)安(an)(an)裝(zhuang)的(de)，此時顯示安(an)(an)裝(zhuang)中，如(ru)果不(bu)自動(dong)安(an)(an)裝(zhuang)還(huan)需要提供安(an)(an)裝(zhuang)操作，安(an)(an)裝(zhuang)完(wan)成(cheng)后提供打開(kai)的(de)操作。

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

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

即使是(shi)(shi)這(zhe)樣(yang)，這(zhe)些應有(you)的狀(zhuang)態無論(lun)是(shi)(shi)交互(hu)設(she)計(ji)師還(huan)是(shi)(shi)視覺設(she)計(ji)師都應該給出(chu)的，不(bu)然程序員會不(bu)知道哪一種情況(kuang)用什么形式的按鈕(niu)。

其(qi)實在一(yi)些登錄、支付(fu)、提交等按鈕，還有一(yi)種「不可用」的(de)狀態(tai)，用戶未輸(shu)入信(xin)息時，登錄按鈕置灰，只有當用戶輸(shu)入相(xiang)應的(de)信(xin)息后，按鈕才高亮。二、異(yi)常情(qing)況(kuang)的(de)匯總通(tong)過(guo)上面的(de)例子，相(xiang)信(xin)已經(jing)充分(fen)了(le)解到設計中(zhong)的(de)異(yi)常是什么，以及異(yi)常的(de)處理方式，那(nei)么接下來總結一(yi)下設計中(zhong)常見的(de)異(yi)常情(qing)況(kuang)。

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

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

主(zhu)要(yao)是用戶切換(huan)(huan)任務引起的異常：如按(an) home 鍵突(tu)然退出(chu)/切換(huan)(huan)應用、返回(hui)鍵退出(chu)、下載(zai)過程退出(chu)等。

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

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

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

2. 服(fu)務器(qi)(qi)出錯(cuo)(cuo)服(fu)務器(qi)(qi)出錯(cuo)(cuo)的(de)(de)頁面常(chang)見(jian)的(de)(de)500、501、502、503、504、 505 等 5 開頭的(de)(de)頁面。其中這(zhe)些(xie)錯(cuo)(cuo)誤的(de)(de)解釋如下(xia)：500 內部服(fu)務錯(cuo)(cuo)誤：顧名思(si)義 500 錯(cuo)(cuo)誤一般是服(fu)務器(qi)(qi)遇到意外情(qing)況，而(er)無法(fa)完成(cheng)(cheng)請(qing)求；501 服(fu)務器(qi)(qi)不具備完成(cheng)(cheng)請(qing)求的(de)(de)功(gong)能；502 Bad Gateway錯(cuo)(cuo)誤；503 服(fu)務器(qi)(qi)目前無法(fa)使用(yong)(yong)（由于超載或停機(ji)維(wei)護(hu)）；504 Bad Gateway timeout 網(wang)關超時(shi)；505 服(fu)務器(qi)(qi)不支持請(qing)求中所用(yong)(yong)的(de)(de) HTTP 協議版本。服(fu)務器(qi)(qi)異常(chang)時(shi)，在(zai)網(wang)頁端的(de)(de)處(chu)理(li)方式(shi)為(wei)提(ti)示+返回(hui)，在(zai)移(yi)動(dong)端的(de)(de)處(chu)理(li)方式(shi)為(wei)提(ti)示+重試，下(xia)圖是一些(xie)普通的(de)(de)處(chu)理(li)方式(shi)。

近幾年，很(hen)多(duo)網站和應用將(jiang)這(zhe)(zhe)種(zhong)異常頁面設計(ji)的(de)相(xiang)(xiang)對美觀(guan)和有故事性(xing)一些(xie)，提升了整體的(de)趣味性(xing)，減(jian)少用戶(hu)的(de)焦慮。例如網絡被外星(xing)人劫走(zou)了之類的(de)，相(xiang)(xiang)信大家(jia)也看(kan)過很(hen)多(duo)。這(zhe)(zhe)里(li)就(jiu)不(bu)舉例子了。

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

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

如果網(wang)絡異常(chang)之(zhi)前應(ying)用(yong)(yong)沒有緩存之(zhi)前的頁(ye)面的內(nei)容，則整體提(ti)示用(yong)(yong)戶網(wang)絡異常(chang)，也(ye)可(ke)以提(ti)供一個操作(zuo)指(zhi)導用(yong)(yong)戶操作(zuo)；

如果網絡(luo)異常(chang)(chang)之(zhi)前(qian)頁面已經緩存則顯示之(zhi)前(qian)的(de)頁面，Toast 輕提示用戶網絡(luo)異常(chang)(chang)

4. 空狀(zhuang)態搜(sou)索(suo)結果(guo)為空、無(wu)瀏覽記(ji)錄、無(wu)收藏、無(wu)購買記(ji)錄、無(wu)訂單記(ji)錄、無(wu)下載(zai)記(ji)錄等。

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

例如(ru)在影(ying)視類 App 中(zhong)，如(ru)果觀看記錄(lu)為(wei)空，則可以為(wei)用(yong)戶推(tui)(tui)薦影(ying)片，如(ru)熱播(bo)影(ying)片、猜(cai)您喜(xi)歡，其他人(ren)都在看等熱門推(tui)(tui)薦供用(yong)戶選擇。

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

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

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

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

如下圖所示為(wei) QQ 的掃(sao)碼登錄頁(ye)面和 UC瀏覽器的手機登錄頁(ye)面。

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

對于文件過大(da)無法上傳、下載這種建議都是采取彈窗(chuang)的方(fang)式告訴用戶當前狀況(kuang)，明確(que)問題并且加(jia)上操作提示(shi)。如新媒體管家中的導入的 word 的文件不(bu)能(neng)超過10M的提示(shi)如下左圖所示(shi)。

對(dui)于(yu)操(cao)作過于(yu)頻繁(fan)，比較常見于(yu) QQ 中的(de)抖(dou)動窗口，其(qi)實在一(yi)些電視頁面的(de)手機截圖工具中，刷(shua)新太頻繁(fan)也會(hui)彈出 Toast 提示。

8. 不(bu)可用賬(zhang)號不(bu)存在、賬(zhang)號過(guo)期、選項不(bu)可選、按(an)鈕置灰等(deng)。

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

9. 賬(zhang)號過期(qi)(qi)(qi)APP 或網站中(zhong)，登錄(lu)(lu)賬(zhang)號后，如果(guo)太久不(bu)使用，則會有過期(qi)(qi)(qi)的(de)(de)期(qi)(qi)(qi)限(xian)，設計(ji)師需(xu)要根據(ju) APP 的(de)(de)具體情(qing)況設置登錄(lu)(lu)過期(qi)(qi)(qi)的(de)(de)時間期(qi)(qi)(qi)限(xian)，此時需(xu)要提(ti)醒用戶重新登錄(lu)(lu)。

主要有(you) Toast 和彈(dan)窗兩種方式提(ti)示，這需要根據賬(zhang)號過期對用(yong)戶的影響(xiang)大小來決定用(yong)哪一種方式。

如下方左圖所示(shi)，登錄賬號(hao)過期對(dui)用(yong)戶使用(yong)此應用(yong)的影響(xiang)不大，則可以采(cai)用(yong) Toast 輕(qing)提(ti)示(shi)的方式處理(li)；如下方右(you)圖，如果不登錄賬號(hao)則無(wu)法使用(yong)此應用(yong)的功能，則需要(yao)采(cai)用(yong)彈(dan)窗強提(ti)示(shi)的方式，提(ti)示(shi)用(yong)戶去登錄。

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

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

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

安(an)裝失敗后需要提供提示安(an)裝失敗原(yuan)因(yin)，如存(cun)儲空間不足、文件(jian)已損壞的提示。

12. 用戶切換(huan)任務引(yin)起的異(yi)常較多如按 home 鍵突然(ran)退(tui)出/切換(huan)應(ying)用、返回(hui)鍵退(tui)出、下載過(guo)程退(tui)出。

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