人非圣賢，孰能無過。當人們操作用戶界面的時候，錯誤難免會發生。有時候是因為用戶做了錯誤操作，有時候則是由于應用本身出了問題。無論原因如何，出現的錯誤以及對其處理的方式，都對用戶體驗產生巨大的影響。糟糕的錯誤處理方式以及無用的報錯信息會讓用戶感到萬分沮喪，甚至會導致用戶放棄繼續使用你的應用程序。

在這篇文章中，我們將研究如何通過優化應用設計來避免用戶錯誤，以及當錯誤發生時，如何生成有效的報錯信息。

一個完美錯誤頁面的全面檢查清單：

完美的錯誤頁面應該向用戶伸出援助之手，并且應具備以下六個特質：

1.正如問題是不斷變化的一樣，錯誤消息的出現也是動態的。要及時告知用戶出現的問題。

2.保證所有用戶輸入信息的安全。在發生錯誤的情況下，應用不該撤銷、銷毀或刪除任何用戶輸入或上傳的數據。

3.使用與用戶相同的語言。頁面應該清楚地表達什么地方出了問題，可能的原因是什么，用戶下一步該做些什么來修復這個錯誤。

4.不要驚嚇或者迷惑用戶。（頁面消息不該是戲劇性的。）

5.不要搶奪系統的控制權。（如果不是危險性的問題，應該盡可能地讓用戶能夠和應用的其余部分進行交互）。

6.用一點幽默感，讓問題更有人情味。

用于表單驗證的錯誤界面

1。適當的時間（表單內驗證）

在用戶提交數據之后，驗證系統應該立即告知用戶他們所提供答復的正確性。良好驗證的首要原則是：“跟用戶說話！告訴他們哪里錯了！”表單中的實時驗證可以立即告知用戶他們所提供數據的正確性。這個方法可以讓用戶更快地改正錯誤，而不用等到點擊了提交按鈕之后才看到報錯。

2.適當的位置

你考慮在哪里顯示驗證消息的時候，可以遵循這一經驗法則——始終在操作情景中放置消息。如果你想告知用戶在某個特定字段有一個錯誤——就把消息放在字段邊上。最好把即時驗證結果放在輸入位置的右側，右側放不了的話就直接放在下方。

3.適當的顏色（表單內驗證）

顏色是設計驗證時的最佳工具之一。因為它作用于本能層級，在錯誤消息中加上紅色，警告消息中加上黃色，成功消息中加上綠色，會難以置信的強大。但是，要確保數字界面中的這些顏色對用戶是易理解的。這是良好視覺設計的一個重要方面。

4.清晰的消息

一個典型的錯誤消息可能僅指出“郵件是無效的”而不告訴用戶為什么它是無效的（是因為錯字？還是已經被占用？）。簡單明了的說明或指引會讓一切都不一樣。收到這個錯誤消息的用戶不需要有任何猜測，也不會有產生混淆或沮喪。你可以從這個例子中看出，表單告知用戶該郵件已經被使用。然后它給出了一些選項（登陸或者重置密碼）。

好了，是時候顯示一個錯誤頁面來表明出了一些問題。舉個例子，讓我們假設這樣一個情景：網絡已經斷連，而用戶正在訪問一個在線界面。你需要借此機會讓人們知道你清楚發生了什么，并且遵循即時提供幫助的典范——你給出的錯誤消息應該向用戶伸出援助之手。這就是為什么你永遠都

不該

顯示：

（1）原始的錯誤消息。包含應用內部錯誤代碼或者縮寫文字的消息，例如“發生了類型2的錯誤”，是晦澀并且可怕的。

（2）死胡同的錯誤消息。

因為這樣的錯誤狀態并沒有給用戶提供任何有用的的信息。

（3）模糊的錯誤消息。下圖所示例子中的錯誤界面中提供給用戶的信息量跟上一類消息一樣少。用戶完全不知道這個消息是什么意思，他們下一步又該怎么做。

別用錯誤恐嚇用戶。另外，也不要以為人們會知道某條消息的語境，或者以為他們技術足夠嫻熟，可以自己解決問題。相反的，應該用通俗易懂的語言告訴用戶哪里出了錯。要做到這一點，需要避免使用技術術語，而采用用戶術語來表達所有信息。

要讓你的錯誤消息可讀性強，并且有幫助——錯誤狀態界面必須含有簡潔、禮貌、指導性的文案，并且清晰地指出：

1.出了什么問題，可能是由于什么原因。

2.用戶下一步可以采取什么措施來修復這個錯誤。

常見錯誤狀態的解決方案：

404 頁面未找到錯誤

404頁面的主要目的是引導用戶盡快地跳轉到他們尋找的頁面。你的404頁面應該列出一些關鍵鏈接和指南，以供用戶選擇。一個保險的做法就是在404頁面提供一個“主頁”鏈接作為主要操作元素——這是重新來過的一個快速且友好的方式。

無法登陸

登陸界面通常相對小一些，有一個用戶名字段和一個密碼字段。但是，小并不等同于簡單。出于多種原因，用戶可能會被卡在登陸界面。登陸頁面的主要規則很簡單——別讓用戶猜測。

用戶用錯誤的密碼多次嘗試登陸

為了防止暴力攻擊，在太多次登陸失敗后，賬戶往往會被暫時鎖定。這是一個必要的安全措施，但是要確保在賬戶鎖定之前對用戶進行警告。

出現信用卡的被拒錯誤頁面可能是因為（1）數據格式上的錯誤（錯字或漏填數據）或者（2）信用卡被拒付（過期或欺詐）。Gabriel Tomescu在他的文章《解剖信用卡格式》中，建議用以下策略應對這兩種錯誤狀態：

對于第一種問題，應該遵循標準的實時表單內驗證機制，在視覺上指明錯誤：

但是，如果該卡是被支付網絡或者某些原因拒付，它看起來通常像是詐騙。應該清除用戶輸入的數據。即使數據被清除了，還是要告知用戶發生了什么；應該盡可能明確地顯示錯誤消息。

連接已斷開

網絡訪問并不是無處不在的，對離線狀態的支持應當是差不多每一個現代應用的關鍵考慮因素。當連接斷開的時候，你需要提供盡量豐富的離線體驗。用戶應該可以盡可能多地和應用的其余部分進行交互。這意味著應用要有緩存的內容，來提供良好的離線體驗。

保存最新狀態。下圖中你可以看到兩個用于傳遞內容的應用。CNN的應用提供了更好的用戶體驗，因為它緩存了最近的視圖，并為用戶提供了最近一次加載的文章標題。

提供離線功能和特性。

在每個應用上都有一些特性可以（而且應該）在沒有網絡連接的情況下工作。以Evernote為例，該應用完全可以離線使用：你可以編輯現有筆記或者新增筆記，一旦再次連接網絡，該應用就會把所有筆記同步到云端。

總結：

最好的錯誤消息是永遠不會出現的錯誤消息。在任何情況下，能提前引導用戶去向正確的方向，并在第一時間就預防錯誤發生，總是更好的做法。但是，當錯誤確實出現的時候，精心設計的錯誤處理不僅可以教會用戶用正確的方法使用應用，還可以避免用戶產生一無所知的感覺。當然了，錯誤狀態是我們最不愿意去設計的狀態頁面之一。但是，如果你把大量精力放在該狀態頁面的設計上，你的產品會比其他產品用起來愉快的多。

原文作者：Nick Babich

原文地址：https://www.smashingmagazine.com/2016/09/how-to-design-error-states-for-mobile-apps