編輯導(dǎo)讀：當(dāng)產(chǎn)品出現(xiàn)異常狀況時(shí)，例如網(wǎng)絡(luò)異常、用戶無權(quán)限等異常狀態(tài)下，產(chǎn)品需要在界面對(duì)用戶進(jìn)行異常狀態(tài)的反饋和引導(dǎo)，幫助用戶快速獲得幫助。本文作者以B端產(chǎn)品為例，分析其在異常狀態(tài)下的產(chǎn)品設(shè)計(jì)，希望對(duì)你有幫助。

近期個(gè)人跟進(jìn)的一個(gè)產(chǎn)品被用戶提了意見：每次進(jìn)入頁面的時(shí)候，頁面空白，什么信息都沒有，跟故障了沒有數(shù)據(jù)一樣。

詳細(xì)了解情況后，發(fā)現(xiàn)確實(shí)是出現(xiàn)了異常。這是一款查詢類工具產(chǎn)品，進(jìn)入頁面已有基礎(chǔ)的默認(rèn)查詢條件及相應(yīng)數(shù)據(jù)展示，本身需要用戶具有相應(yīng)的權(quán)限才能進(jìn)行查詢，前述用戶反饋的問題，就是因?yàn)橘~號(hào)沒有相應(yīng)頁面功能的數(shù)據(jù)權(quán)限導(dǎo)致的。

遺漏了用戶在異常狀態(tài)下的設(shè)計(jì)，會(huì)導(dǎo)致用戶在每一次的操作后，產(chǎn)品界面一直沒有任何反饋，業(yè)務(wù)流程中斷，停滯不前，然后用戶心中會(huì)產(chǎn)生疑問：怎么回事？但又無人解答。

一次次地復(fù)現(xiàn)后，則會(huì)產(chǎn)生相同的結(jié)論：這個(gè)東西沒法兒用，我的需求，你無法滿足。在一次次的失望，放棄這款產(chǎn)品，不再使用，而這僅僅是因?yàn)槲覀儧]有對(duì)異常狀態(tài)做好一個(gè)合理反饋/引導(dǎo)。

正常情況下，產(chǎn)品經(jīng)理應(yīng)該定義清楚，在諸如網(wǎng)絡(luò)異常、用戶無權(quán)限等異常狀態(tài)下，產(chǎn)品應(yīng)該如何提示用戶，幫助用戶恢復(fù)正軌。

如上述例子中，可以在界面提示用戶賬號(hào)權(quán)限不足，請(qǐng)聯(lián)系管理員，或給到技術(shù)支持電話，通過人工介入的形式，使無助的用戶能快速獲得幫助。

當(dāng)然這個(gè)意見，也暴露出之前團(tuán)隊(duì)只專注于主操作流程、主頁面的不同狀態(tài)，卻忽略產(chǎn)品中容易出現(xiàn)的各種異常狀態(tài)的問題，這是一個(gè)不容忽視的問題。

對(duì)于以提升效率為目的的B端產(chǎn)品而言，缺乏對(duì)異常狀態(tài)的反饋設(shè)計(jì)，會(huì)導(dǎo)致用戶遭遇某種異常情況時(shí)，不清楚發(fā)生了什么事，長(zhǎng)時(shí)間停留在原地，無法快速定位到問題，最終導(dǎo)致業(yè)務(wù)處理的效率低下。如果一直保持現(xiàn)狀，長(zhǎng)此以往，就算上線了很多功能，對(duì)用戶而言這些功能也是無效的的。

一、什么是異常

異常是正常的相對(duì)概念，漢典中，解釋正常是符合一般的情況、規(guī)律或習(xí)慣。

對(duì)于產(chǎn)品而言，正常狀態(tài)是指在產(chǎn)品使用過程中，交互反饋結(jié)果符合業(yè)務(wù)流程/交互邏輯/用戶預(yù)期的狀態(tài)；反之，不符合業(yè)務(wù)流程/交互邏輯/用戶預(yù)期時(shí)，是異常狀態(tài)。

例如，我們?cè)诎俣人阉鳌罢！眱蓚€(gè)字，頁面返回的第一個(gè)結(jié)果是有關(guān)“正?！钡陌俣劝倏?，此時(shí)是正常狀態(tài)；如果頁面一直是空白，或者頁面返回的第一個(gè)結(jié)果是有關(guān)“異常”的百度百科，此時(shí)是異常狀態(tài)。

異常狀態(tài)，是由于在程序運(yùn)行過程中發(fā)生外部問題導(dǎo)致的，在用戶操作-反饋的過程中，可能會(huì)被多種外部因素干擾而產(chǎn)生異常。

例如：網(wǎng)絡(luò)環(huán)境因素中最常見的網(wǎng)絡(luò)連接失敗，網(wǎng)絡(luò)連接失敗會(huì)直接導(dǎo)致導(dǎo)致無法上傳和下載數(shù)據(jù)，它們會(huì)出其不意地發(fā)生，并影響任何一個(gè)環(huán)節(jié)。

因?yàn)橥獠恳蛩氐漠a(chǎn)生是不可控的，因此異常狀態(tài)的發(fā)生也是不可控的。

有些異常我們可以通過技術(shù)手段避免，但產(chǎn)品使用時(shí)的外部環(huán)境因素是我們無法控制的，所以我們始終無法避免異常狀態(tài)的發(fā)生，那么就應(yīng)該提前考慮可能發(fā)生的異常因素及結(jié)果狀態(tài)。

結(jié)合場(chǎng)景針對(duì)性地設(shè)計(jì)反饋，在前端可感知地告訴給用戶，引導(dǎo)用戶理解自己所在頁面的狀態(tài)及可以怎么做，而不是讓用戶怎么操作都沒有反饋，不知道發(fā)生了什么問題，業(yè)務(wù)流程中斷，進(jìn)一步導(dǎo)致用戶焦慮，最后拋棄產(chǎn)品。

依舊以上文中因權(quán)限不足導(dǎo)致的頁面空數(shù)據(jù)為例，對(duì)于這類依賴權(quán)限系統(tǒng)配置的因素我們無法控制，所以應(yīng)該提前考慮在用戶權(quán)限不足的情況下，讓用戶意識(shí)到當(dāng)前頁面空數(shù)據(jù)是因?yàn)闄?quán)限不足導(dǎo)致的，可以去聯(lián)系管理員授權(quán)，或者返回上一層頁面，讓用戶盡快離開當(dāng)前功能；

而不是像原有產(chǎn)品設(shè)計(jì)一樣什么都不反饋，讓用戶以為是系統(tǒng)故障導(dǎo)致的頁面空白，最后憤怒地找到我投訴產(chǎn)品無法使用。

二、異常狀態(tài)設(shè)計(jì)原則

設(shè)計(jì)的最終目的是讓產(chǎn)品更可用、更易用，針對(duì)異常狀態(tài)的設(shè)計(jì)也是如此。

發(fā)生異常時(shí)，為了避免用戶不明所以，讓用戶更快地知道當(dāng)前產(chǎn)品處于異常狀態(tài)，和產(chǎn)生異常的原因，降低用戶的焦慮感，在異常反饋的設(shè)計(jì)過程中，可以結(jié)合場(chǎng)景參考一些通用的用戶體驗(yàn)設(shè)計(jì)原則。

以下是我常用的可以和異常狀態(tài)設(shè)計(jì)關(guān)聯(lián)的設(shè)計(jì)原則：

1. 狀態(tài)可見原則

狀態(tài)可見，指的是通過界面反饋設(shè)計(jì)讓用戶清晰地知道當(dāng)前系統(tǒng)的狀態(tài)，特別是讓用戶第一時(shí)間清楚地知道當(dāng)前產(chǎn)品處于異常狀態(tài)。

正常來說，用戶對(duì)異常是沒有概念的，如果不明確地告訴用戶系統(tǒng)處于異常狀態(tài)，他們會(huì)以為是正常情況并持續(xù)等待結(jié)果，一直沒有結(jié)果可能會(huì)焦慮、暴躁，持續(xù)重復(fù)多次后操作發(fā)現(xiàn)還是不知道發(fā)生了什么，就可能離開產(chǎn)品了。

因此在前端界面將系統(tǒng)狀態(tài)展示出來，不僅能讓用戶快速地了解自己處于何種狀態(tài)、對(duì)過去發(fā)生、當(dāng)前目標(biāo)有所了解，還能讓用戶快速判斷下一步該怎么做，避免浪費(fèi)用戶時(shí)間，而不是停留在原地等待，也能有效減少用戶的負(fù)面情緒。

例如下面這個(gè)案例，同樣是因?yàn)榫W(wǎng)絡(luò)緩慢導(dǎo)致的加載異常，在不具備狀態(tài)可見的左圖，用戶會(huì)持續(xù)等待進(jìn)度條的加載，不知道加載了這么久還沒加載出來的原因，不敢離開頁面因?yàn)椴恢肋€要等多久；

但對(duì)于狀態(tài)可見的右圖，用戶明確知道頁面加載失敗了，雖然界面沒有給到加載失敗的原因，但用戶已經(jīng)知道現(xiàn)在處于異常狀態(tài)，就不會(huì)浪費(fèi)時(shí)間等待，會(huì)嘗試刷新或者直接離開頁面，也能有效避免用戶負(fù)面情緒的積聚。

2. 可退出原則

可退出，指的是在產(chǎn)品處于異常狀態(tài)時(shí)，給到用戶明確的出口可快速離開當(dāng)前頁面。

對(duì)于諸如服務(wù)器異常等原因?qū)е碌漠惓顟B(tài)，用戶是無法通過個(gè)人的重復(fù)操作恢復(fù)到業(yè)務(wù)正常狀態(tài)的，讓用戶在無法解決的異常頁面重復(fù)嘗試只會(huì)讓用戶積聚負(fù)面情緒，無法快速找到離開的出口甚至沒有離開頁面的出口，更是會(huì)讓用戶的情緒瞬間爆發(fā)。

因此，對(duì)于用戶自行無法解決的異常情況，與其讓用戶什么都無法操作，或者做無謂的嘗試，還不如直接給到退出出口離開產(chǎn)品，這樣對(duì)用戶的情感傷害會(huì)更小一些。

例如下面的兩個(gè)例子，都是因?yàn)榉?wù)器異常導(dǎo)致的異常狀態(tài)，致使產(chǎn)品無法使用，僅僅通過toast提示用戶異常原因，告知了就結(jié)束了，讓用戶停留在原地等待，無法進(jìn)行其他操作，也沒有其他操作按鈕；

相比之下，明確以對(duì)話框的形式告知用戶服務(wù)器異常，用戶在了解情況后點(diǎn)擊確認(rèn)按鈕，即退出產(chǎn)品，這樣的形式信息展示明了，操作快捷，避免了用戶不知道怎么離開當(dāng)前異常的囧境，和負(fù)面情緒的積聚。

3. 指引性原則

指引性原則，指的是針對(duì)一些操作可能會(huì)導(dǎo)致異常的情況，在用戶操作前，設(shè)計(jì)指引信息防止這類問題發(fā)生，或在用戶可能犯錯(cuò)時(shí)提供提示信息，避免異常的發(fā)生。

產(chǎn)品設(shè)計(jì)過程中，有些正常操作可能會(huì)導(dǎo)致異常狀態(tài)，如用戶上傳文件時(shí)選擇的文件超出了系統(tǒng)限定的大小。

對(duì)于這種情況，作為產(chǎn)品設(shè)計(jì)者，我們不應(yīng)該眼睜睜地看著用戶走到錯(cuò)誤的那一步。

因?yàn)檫@樣會(huì)讓用戶不明所以，明明都是按照系統(tǒng)要求的步驟流程操作的，為什么操作結(jié)果有時(shí)候成功有時(shí)候失敗，直到成功/失敗多次后，用戶才可能摸索出其中潛在的系統(tǒng)規(guī)則——文件大小不能超過xx，讓用戶在試錯(cuò)中摸索系統(tǒng)規(guī)則，對(duì)于以提高業(yè)務(wù)效率的B端產(chǎn)品而言，是尤其不可取的。

所以，我們應(yīng)該在設(shè)計(jì)過程中，注意到可能導(dǎo)致異常狀態(tài)的操作，并結(jié)合業(yè)務(wù)情況，設(shè)計(jì)反饋引導(dǎo)，甚至是對(duì)用戶的操作進(jìn)行限制，以避免用戶試錯(cuò)。

例如，下面的場(chǎng)景是用戶上傳文件時(shí)的界面，此處結(jié)合業(yè)務(wù)情況，對(duì)上傳文件有兩個(gè)要求：excel文件和5MB以內(nèi)。從指引性原則出發(fā)，界面左下方告知用戶系統(tǒng)規(guī)則，在用戶選擇文件的過程中，是無法選擇非excel文件的，同時(shí)對(duì)于文件大小超過5MB的文件，也會(huì)以彈窗形式告知操作失敗，這樣能夠有效地避免用戶在正常業(yè)務(wù)流程進(jìn)行無謂的試錯(cuò)，保證業(yè)務(wù)效率。

4. 容錯(cuò)原則

容錯(cuò)原則，指的是當(dāng)產(chǎn)品已經(jīng)處于異常狀態(tài)時(shí)，給到用戶可以自行操作、糾正錯(cuò)誤的操作功能，讓用戶能自主嘗試恢復(fù)回正常的業(yè)務(wù)軌道上。

在導(dǎo)致異常的因素中，有很多是短暫持續(xù)卻經(jīng)常發(fā)生的，例如因網(wǎng)絡(luò)波動(dòng)導(dǎo)致的加載異常，因?yàn)檫@類異常情況，是可以在短期內(nèi)自動(dòng)恢復(fù)的，重新操作后恢復(fù)正常狀態(tài)的概率較高，所以我們應(yīng)該讓用戶自己嘗試解決，而不是建議離開，這樣可以將異常狀態(tài)對(duì)業(yè)務(wù)帶來的影響降到最低。在設(shè)計(jì)用戶的可操作功能時(shí)，也應(yīng)該注意不要讓用戶進(jìn)行過多的操作，重復(fù)異常發(fā)生之前的操作既可。

例如下面圖中是下載失敗的異常狀態(tài)，此時(shí)我們可以明確地告訴用戶上一次操作失敗了，并給到一個(gè)重新下載的按鈕，讓用戶不用重新選擇需要下載的文件既可再次嘗試下載操作，這樣就可以讓用戶繼續(xù)原有業(yè)務(wù)了。

以上是個(gè)人在實(shí)踐過程總結(jié)的適用于異常狀態(tài)設(shè)計(jì)的原則，希望這些原則可以在明知道會(huì)產(chǎn)生異常狀態(tài)但不知道如何設(shè)計(jì)時(shí)幫助到你，給你思路。

三、總結(jié)

以上對(duì)異常狀態(tài)的設(shè)計(jì)原則進(jìn)行了總結(jié)，相對(duì)正常狀態(tài)，異常狀態(tài)較為少見，容易忽略，但異常也是設(shè)計(jì)中的一部分。

無論是交互設(shè)計(jì)師還是視覺設(shè)計(jì)師都應(yīng)該結(jié)合業(yè)務(wù)場(chǎng)景，給出異常的表現(xiàn)形式或處理方式，保證產(chǎn)品異常時(shí)不至于中斷任務(wù)的執(zhí)行，對(duì)異常提供適當(dāng)?shù)囊龑?dǎo)，達(dá)到產(chǎn)品性能、業(yè)務(wù)流暢、防錯(cuò)效果的平衡。

當(dāng)然也有公司特殊的業(yè)務(wù)導(dǎo)致存在很特殊的異常狀態(tài)，歡迎大家一起溝通交流學(xué)習(xí)進(jìn)步。

作者：伯安，公眾號(hào)：伯安郡

本文由 @伯安 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)許可，禁止轉(zhuǎn)載

題圖來自Unsplash，基于CC0協(xié)議