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

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

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

 還(huan)應該(gai)考慮如果下載中出現了斷網，或(huo)者是用戶暫停下載等情況的時候應該(gai)怎么(me)處理呢(ni)？

這就是異常(chang)情況。

所以除(chu)了前(qian)面三種狀態，還需要(yao)提供繼續下(xia)(xia)載，下(xia)(xia)載失(shi)敗等狀態。

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

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

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

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

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

異常情況(kuang)處(chu)理其實分為兩(liang)種情況(kuang)。兩(liang)種異常情況(kuang)處(chu)理1. 界面中(zhong)有明顯的提示(shi)，需要用戶(hu)(hu)了解此情況(kuang)的，并(bing)且影響用戶(hu)(hu)進行下一步(bu)操(cao)作的。

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

主(zhu)要是用戶切換任務(wu)引起的(de)異(yi)常：如按 home 鍵突然退(tui)出/切換應用、返回鍵退(tui)出、下載過(guo)程(cheng)退(tui)出等。

以上(shang)就(jiu)是在設計中常見的一些異(yi)常情況匯總(zong)，看(kan)到這里(li)，可(ke)能很多朋友就(jiu)要(yao)說(shuo)了，這么多，我(wo)怎么記得住。

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

與網絡環(huan)境等(deng)有(you)關(guan)的(de)：下載失(shi)敗、服務(wu)器出(chu)錯、斷網，網速(su)過(guo)慢、加載失(shi)敗、網絡連接失(shi)敗（wifi 密碼正確，連接不成功）1. 下載失(shi)敗一(yi)般(ban)需要(yao)給出(chu)明確的(de)下載失(shi)敗提示(shi)(shi)(shi)，可以通過(guo)彈窗、Toast、列表(biao)等(deng)提示(shi)(shi)(shi)。如(ru)下圖所示(shi)(shi)(shi)，然(ran)后(hou)給出(chu)用戶下一(yi)步(bu)的(de)操作(zuo)提示(shi)(shi)(shi)，例(li)如(ru)重試、重新(xin)下載、刪(shan)除等(deng)操作(zuo)。

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

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

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

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

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

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

4. 空狀態搜(sou)索結果為(wei)空、無瀏覽記(ji)錄(lu)(lu)、無收藏、無購(gou)買記(ji)錄(lu)(lu)、無訂(ding)單記(ji)錄(lu)(lu)、無下載記(ji)錄(lu)(lu)等(deng)。

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

例(li)如在影(ying)視類(lei) App 中(zhong)，如果(guo)觀(guan)看(kan)記錄為空(kong)，則可以為用戶推薦(jian)影(ying)片(pian)，如熱播影(ying)片(pian)、猜您喜歡，其他(ta)人都在看(kan)等熱門推薦(jian)供用戶選擇。

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

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

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

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

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

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

對于文(wen)件過大無法上傳、下(xia)(xia)載這(zhe)種建議都是采取彈(dan)窗的(de)方式告訴用戶(hu)當(dang)前狀(zhuang)況，明(ming)確(que)問題(ti)并(bing)且(qie)加上操作提示(shi)。如新媒體管家中的(de)導入的(de) word 的(de)文(wen)件不能超過10M的(de)提示(shi)如下(xia)(xia)左圖所示(shi)。

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

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

賬號不存在用于(yu)登錄時，輸入(ru)的(de)賬號不在已(yi)注冊的(de)賬號中，則會提示此賬號不存在，是(shi)否立即注冊等(deng)。

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

主要(yao)有 Toast 和(he)彈窗兩種方式(shi)提(ti)示(shi)，這需要(yao)根據賬號過期(qi)對(dui)用(yong)戶的影響大(da)小來決定用(yong)哪一(yi)種方式(shi)。

如下(xia)方左(zuo)圖(tu)所示，登(deng)錄賬號過期對(dui)用(yong)(yong)(yong)(yong)戶使用(yong)(yong)(yong)(yong)此應(ying)用(yong)(yong)(yong)(yong)的影響不(bu)大，則(ze)可以采(cai)用(yong)(yong)(yong)(yong) Toast 輕提示的方式處(chu)理；如下(xia)方右圖(tu)，如果不(bu)登(deng)錄賬號則(ze)無法使用(yong)(yong)(yong)(yong)此應(ying)用(yong)(yong)(yong)(yong)的功(gong)能，則(ze)需要采(cai)用(yong)(yong)(yong)(yong)彈窗強提示的方式，提示用(yong)(yong)(yong)(yong)戶去登(deng)錄。

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

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

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

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

12. 用(yong)戶切(qie)換任(ren)務引(yin)起的異常較(jiao)多如按 home 鍵突然(ran)退出(chu)/切(qie)換應用(yong)、返回鍵退出(chu)、下(xia)載過程退出(chu)。

此類異常建議(yi)用(yong)戶再次(ci)打(da)開時(shi)，回(hui)到(dao)上次(ci)用(yong)戶離(li)開前(qian)的(de)狀態。如(ru)果數據(ju)被清(qing)理，則回(hui)到(dao)上次(ci)保存的(de)數據(ju)頁面(mian)中(zhong)。四(si)、總結文(wen)章(zhang)主要總結了設計中(zhong)常用(yong)的(de)異常情況，并且給出了相應(ying)的(de)解決方案(an)，最長(chang)用(yong)的(de)規(gui)則就(jiu)是(shi)給出異常提(ti)(ti)示+下(xia)一(yi)步(bu)操(cao)作提(ti)(ti)示，既明確了出錯原因，又指引用(yong)戶下(xia)一(yi)步(bu)操(cao)作，用(yong)戶是(shi)相對容易接受的(de)。