人非圣賢漓穿，孰能無過。當(dāng)人們操作用戶界面的時(shí)候注盈，錯(cuò)誤難免會(huì)發(fā)生晃危。有時(shí)候是因?yàn)橛脩糇隽隋e(cuò)誤操作，有時(shí)候則是由于應(yīng)用本身出了問題老客。無論原因如何僚饭，出現(xiàn)的錯(cuò)誤以及對(duì)其處理的方式，都對(duì)用戶體驗(yàn)產(chǎn)生巨大的影響胧砰。糟糕的錯(cuò)誤處理方式以及無用的報(bào)錯(cuò)信息會(huì)讓用戶感到萬分沮喪鳍鸵，甚至?xí)?dǎo)致用戶放棄繼續(xù)使用你的應(yīng)用程序。
在這篇文章中尉间，我們將研究如何通過優(yōu)化應(yīng)用設(shè)計(jì)來避免用戶錯(cuò)誤权纤，以及當(dāng)錯(cuò)誤發(fā)生時(shí)，如何生成有效的報(bào)錯(cuò)信息乌妒。
一個(gè)完美錯(cuò)誤頁面的全面檢查清單：
完美的錯(cuò)誤頁面應(yīng)該向用戶伸出援助之手，并且應(yīng)具備以下六個(gè)特質(zhì)：
1.正如問題是不斷變化的一樣外邓，錯(cuò)誤消息的出現(xiàn)也是動(dòng)態(tài)的撤蚊。要及時(shí)告知用戶出現(xiàn)的問題。
2.保證所有用戶輸入信息的安全损话。在發(fā)生錯(cuò)誤的情況下侦啸，應(yīng)用不該撤銷、銷毀或刪除任何用戶輸入或上傳的數(shù)據(jù)丧枪。
3.使用與用戶相同的語言光涂。頁面應(yīng)該清楚地表達(dá)什么地方出了問題，可能的原因是什么拧烦，用戶下一步該做些什么來修復(fù)這個(gè)錯(cuò)誤忘闻。
4.不要驚嚇或者迷惑用戶。（頁面消息不該是戲劇性的恋博。）
5.不要搶奪系統(tǒng)的控制權(quán)齐佳。（如果不是危險(xiǎn)性的問題私恬，應(yīng)該盡可能地讓用戶能夠和應(yīng)用的其余部分進(jìn)行交互）。
6.用一點(diǎn)幽默感炼吴，讓問題更有人情味本鸣。
用于表單驗(yàn)證的錯(cuò)誤界面
1。適當(dāng)?shù)臅r(shí)間（表單內(nèi)驗(yàn)證）
在用戶提交數(shù)據(jù)之后硅蹦，驗(yàn)證系統(tǒng)應(yīng)該立即告知用戶他們所提供答復(fù)的正確性荣德。良好驗(yàn)證的首要原則是：“跟用戶說話！告訴他們哪里錯(cuò)了童芹！”表單中的實(shí)時(shí)驗(yàn)證可以立即告知用戶他們所提供數(shù)據(jù)的正確性涮瞻。這個(gè)方法可以讓用戶更快地改正錯(cuò)誤，而不用等到點(diǎn)擊了提交按鈕之后才看到報(bào)錯(cuò)辐脖。
2.適當(dāng)?shù)奈恢?/b>
你考慮在哪里顯示驗(yàn)證消息的時(shí)候饲宛，可以遵循這一經(jīng)驗(yàn)法則——始終在操作情景中放置消息。如果你想告知用戶在某個(gè)特定字段有一個(gè)錯(cuò)誤——就把消息放在字段邊上嗜价。最好把即時(shí)驗(yàn)證結(jié)果放在輸入位置的右側(cè)艇抠，右側(cè)放不了的話就直接放在下方。
3.適當(dāng)?shù)念伾ū韱蝺?nèi)驗(yàn)證）
顏色是設(shè)計(jì)驗(yàn)證時(shí)的最佳工具之一久锥。因?yàn)樗饔糜诒灸軐蛹?jí)家淤，在錯(cuò)誤消息中加上紅色，警告消息中加上黃色瑟由，成功消息中加上綠色絮重，會(huì)難以置信的強(qiáng)大。但是歹苦，要確保數(shù)字界面中的這些顏色對(duì)用戶是易理解的青伤。這是良好視覺設(shè)計(jì)的一個(gè)重要方面。
4.清晰的消息
一個(gè)典型的錯(cuò)誤消息可能僅指出“郵件是無效的”而不告訴用戶為什么它是無效的（是因?yàn)殄e(cuò)字殴瘦？還是已經(jīng)被占用狠角？）。簡(jiǎn)單明了的說明或指引會(huì)讓一切都不一樣蚪腋。收到這個(gè)錯(cuò)誤消息的用戶不需要有任何猜測(cè)丰歌，也不會(huì)有產(chǎn)生混淆或沮喪。你可以從這個(gè)例子中看出屉凯，表單告知用戶該郵件已經(jīng)被使用立帖。然后它給出了一些選項(xiàng)（登陸或者重置密碼）。
好了悠砚，是時(shí)候顯示一個(gè)錯(cuò)誤頁面來表明出了一些問題晓勇。舉個(gè)例子，讓我們假設(shè)這樣一個(gè)情景：網(wǎng)絡(luò)已經(jīng)斷連，而用戶正在訪問一個(gè)在線界面宵蕉。你需要借此機(jī)會(huì)讓人們知道你清楚發(fā)生了什么酝静，并且遵循即時(shí)提供幫助的典范——你給出的錯(cuò)誤消息應(yīng)該向用戶伸出援助之手。這就是為什么你永遠(yuǎn)都
不該
顯示：
（1）原始的錯(cuò)誤消息羡玛。包含應(yīng)用內(nèi)部錯(cuò)誤代碼或者縮寫文字的消息别智，例如“發(fā)生了類型2的錯(cuò)誤”，是晦澀并且可怕的稼稿。
（2）死胡同的錯(cuò)誤消息薄榛。
因?yàn)檫@樣的錯(cuò)誤狀態(tài)并沒有給用戶提供任何有用的的信息。
（3）模糊的錯(cuò)誤消息让歼。下圖所示例子中的錯(cuò)誤界面中提供給用戶的信息量跟上一類消息一樣少敞恋。用戶完全不知道這個(gè)消息是什么意思，他們下一步又該怎么做谋右。
別用錯(cuò)誤恐嚇用戶硬猫。另外，也不要以為人們會(huì)知道某條消息的語境改执，或者以為他們技術(shù)足夠嫻熟啸蜜，可以自己解決問題。相反的辈挂，應(yīng)該用通俗易懂的語言告訴用戶哪里出了錯(cuò)衬横。要做到這一點(diǎn)，需要避免使用技術(shù)術(shù)語终蒂，而采用用戶術(shù)語來表達(dá)所有信息蜂林。
要讓你的錯(cuò)誤消息可讀性強(qiáng)，并且有幫助——錯(cuò)誤狀態(tài)界面必須含有簡(jiǎn)潔拇泣、禮貌噪叙、指導(dǎo)性的文案，并且清晰地指出：
1.出了什么問題霉翔，可能是由于什么原因构眯。
2.用戶下一步可以采取什么措施來修復(fù)這個(gè)錯(cuò)誤。
常見錯(cuò)誤狀態(tài)的解決方案：
404 頁面未找到錯(cuò)誤
404頁面的主要目的是引導(dǎo)用戶盡快地跳轉(zhuǎn)到他們尋找的頁面早龟。你的404頁面應(yīng)該列出一些關(guān)鍵鏈接和指南，以供用戶選擇猫缭。一個(gè)保險(xiǎn)的做法就是在404頁面提供一個(gè)“主頁”鏈接作為主要操作元素——這是重新來過的一個(gè)快速且友好的方式葱弟。
無法登陸
登陸界面通常相對(duì)小一些，有一個(gè)用戶名字段和一個(gè)密碼字段猜丹。但是芝加，小并不等同于簡(jiǎn)單。出于多種原因，用戶可能會(huì)被卡在登陸界面藏杖。登陸頁面的主要規(guī)則很簡(jiǎn)單——?jiǎng)e讓用戶猜測(cè)将塑。
用戶用錯(cuò)誤的密碼多次嘗試登陸
為了防止暴力攻擊，在太多次登陸失敗后蝌麸，賬戶往往會(huì)被暫時(shí)鎖定点寥。這是一個(gè)必要的安全措施，但是要確保在賬戶鎖定之前對(duì)用戶進(jìn)行警告来吩。
出現(xiàn)信用卡的被拒錯(cuò)誤頁面可能是因?yàn)椋?）數(shù)據(jù)格式上的錯(cuò)誤（錯(cuò)字或漏填數(shù)據(jù)）或者（2）信用卡被拒付（過期或欺詐）敢辩。Gabriel Tomescu在他的文章《解剖信用卡格式》中，建議用以下策略應(yīng)對(duì)這兩種錯(cuò)誤狀態(tài)：
對(duì)于第一種問題弟疆，應(yīng)該遵循標(biāo)準(zhǔn)的實(shí)時(shí)表單內(nèi)驗(yàn)證機(jī)制戚长，在視覺上指明錯(cuò)誤：
但是，如果該卡是被支付網(wǎng)絡(luò)或者某些原因拒付怠苔，它看起來通常像是詐騙同廉。應(yīng)該清除用戶輸入的數(shù)據(jù)。即使數(shù)據(jù)被清除了柑司，還是要告知用戶發(fā)生了什么迫肖；應(yīng)該盡可能明確地顯示錯(cuò)誤消息。
連接已斷開
網(wǎng)絡(luò)訪問并不是無處不在的帜羊，對(duì)離線狀態(tài)的支持應(yīng)當(dāng)是差不多每一個(gè)現(xiàn)代應(yīng)用的關(guān)鍵考慮因素咒程。當(dāng)連接斷開的時(shí)候，你需要提供盡量豐富的離線體驗(yàn)讼育。用戶應(yīng)該可以盡可能多地和應(yīng)用的其余部分進(jìn)行交互帐姻。這意味著應(yīng)用要有緩存的內(nèi)容，來提供良好的離線體驗(yàn)奶段。
保存最新狀態(tài)饥瓷。下圖中你可以看到兩個(gè)用于傳遞內(nèi)容的應(yīng)用。CNN的應(yīng)用提供了更好的用戶體驗(yàn)痹籍，因?yàn)樗彺媪俗罱囊晥D呢铆，并為用戶提供了最近一次加載的文章標(biāo)題。
提供離線功能和特性蹲缠。
在每個(gè)應(yīng)用上都有一些特性可以（而且應(yīng)該）在沒有網(wǎng)絡(luò)連接的情況下工作棺克。以Evernote為例，該應(yīng)用完全可以離線使用：你可以編輯現(xiàn)有筆記或者新增筆記线定，一旦再次連接網(wǎng)絡(luò)娜谊，該應(yīng)用就會(huì)把所有筆記同步到云端。
總結(jié)：
最好的錯(cuò)誤消息是永遠(yuǎn)不會(huì)出現(xiàn)的錯(cuò)誤消息斤讥。在任何情況下纱皆，能提前引導(dǎo)用戶去向正確的方向，并在第一時(shí)間就預(yù)防錯(cuò)誤發(fā)生，總是更好的做法派草。但是搀缠，當(dāng)錯(cuò)誤確實(shí)出現(xiàn)的時(shí)候，精心設(shè)計(jì)的錯(cuò)誤處理不僅可以教會(huì)用戶用正確的方法使用應(yīng)用近迁，還可以避免用戶產(chǎn)生一無所知的感覺艺普。當(dāng)然了，錯(cuò)誤狀態(tài)是我們最不愿意去設(shè)計(jì)的狀態(tài)頁面之一钳踊。但是衷敌，如果你把大量精力放在該狀態(tài)頁面的設(shè)計(jì)上，你的產(chǎn)品會(huì)比其他產(chǎn)品用起來愉快的多拓瞪。
原文作者：Nick Babich
原文地址：https://www.smashingmagazine.com/2016/09/how-to-design-error-states-for-mobile-apps
