錯誤提示頁面是app應用中一個重要的組成部分。用戶操作中，不免會有一些錯誤的出現，而此時一個清晰易懂的錯誤提示，能讓用戶解決問題，快速進入到正常的應用流程中。今天，小編跟大家分享在app設計中，如何優化才能防止用戶操作時出現錯誤？當錯誤頁面出現時，我們又如何把這種操作失敗變為一次愉快的體驗？
錯誤界面是什么？
不難看出，錯誤狀態指的是在動作發生后由于一些原因而出現的錯誤時的顯示界面。常出現的錯誤界面會是一些數據不匹配的信息，比如用戶操作時輸入無效數據，又或是連接不到服務器等。
錯誤狀態界面
不管什么原因，每個錯誤都會在用戶使用時產生摩擦甚至是阻礙。但如果你能精心的設計這個錯誤界面，你的應用與用戶的摩擦將會減少一大部分。
防患于未然
當你做應用程序時，導致錯誤的幾個條件你需要很熟悉。比如，在填寫信息時，用戶第一次填寫時很難全部正確，又或是在網絡連接不好時也無法完成。這些問題我們就應該提前考慮到，把它的錯誤可能性減少到最小。比如我們可以通過給予建議，或用約束條件的方式來預防用戶在第一時間的錯誤可能性。
舉例來說，如果你的應用允許用戶預訂酒店， 那么不要讓已過去的日期可選，不然就會增加錯誤的產生。
我們可以看下 http:// Booking.com ，你可以像它一樣使用日期選擇器，允許用戶只能選擇今天或者之后的日期，這能使得用戶選擇的日期在范圍內。
Booking的日期選擇器顯示的是一個完整的月歷，但已過去的日期呈灰色不可選狀態，這便避免了用戶會選擇錯誤。
表單驗證的錯誤界面
窗體是一種交談方式。用戶在使用應用程序時，就像談話一樣，是人機的溝通，而驗證則在這個對話中起到了重要的作用。表單驗證是為了在用戶使用應用時在遇到錯誤或操作困難時及時給予引導工作。一般來說，好的表單驗證包括以下四個重要因素：
① 在合適的時間提示錯誤（或者正確）信息
② 驗證出現的位置
③ 消息顏色的正確使用
④ 語言的嚴格正確性
適當的時間（線上驗證）
校驗錯誤是不可避免的，它是用戶輸入數據時的一個自然組成部分（因為用戶在輸入時就容易出現錯誤）。輸入錯誤是可以盡量減少的，但是校驗錯誤是不可避免的。所以，最主要的是“如何在發生錯誤后能讓用戶表單更好的恢復？”
用戶不喜歡一遍一遍的填寫表格，只要在他們錯誤的地方有所標記方便他們去改正就好。當你填寫玩一個表格，按下“提交”，然后你將接收到一些羅列的錯誤信息。然而，你所看到的這些錯誤信息也并不完全，這時，你是不是很是崩潰？
驗證的作用是在用戶提交數據后能夠立即提供答案的正確性。好的驗證要做到快而準確的告訴用戶什么是錯的，并且實時的在線通知相關用戶提供的數據正確與否。這樣在提交信息前，用戶就能快而有效的修改它的錯誤信息。
然而，我們也要避免每個信息填寫都有實時驗證，因為有一些用戶沒有填寫完全時，我們并不知道他的鍵入正確與否。對于需要執行實時驗證的地方，從用戶一開始輸入時，該數據就要錄入到驗證執行中，這樣用戶才能最快的得到自己信息錯誤的提示。
另外，有些數據條目在誤差范圍內可以不用通知到用戶，系統自行默認。
另一種不同的在線驗證的設計體驗，混合驗證策略：先提示是正確的，錯誤的放后。
正確的位置
提示信息位置也很重要。想知道哪個位置放驗證消息最好，可以遵循以下經驗：
如果你想告知用戶在某一特定區域的錯誤，那么可以在該錯誤旁顯示；實時驗證的信息最好展現在右側，如果無法放在這個位置，可在下方展示。
正確的顏色（直觀的設計）
色彩在驗證中給用戶直觀的感受，因為顏色對于用戶來說是一種本能反應。就像我們看到紅色，認為它是錯誤的，黃色是警告消息，綠色是正確的。但你也要注意你的顏色與用戶訪問的接口要一致。
清晰的信息
最典型的錯誤狀態是“無效的電子郵件”，也沒有消息告訴用戶為什么無效。在此時，你應該有一個讓用戶易懂且能指引他改正的說明，不能讓他收到后還對自己的錯誤處于模糊狀態。可以看下面這個例子：它在告知用戶輸入的郵箱已被使用，他的提示中給予了一些明確的信息（登錄或者恢復密碼）
再來看看一個錯誤頁的顯示方式：我們以連接性錯誤導致用戶在界面上看到“僅支持在線服務”信息為例。此時，我們應該讓用戶知道到底哪里出現了錯誤，而不是以下這些提示信息：
① 陌生的錯誤信息
提示里面包含內部錯誤代碼或者縮寫信息，用戶不會懂這些代碼到底是什么意思，對于他們來說代碼是神秘的或者說是令他們崩潰的視覺沖擊。
② 毫無意義的錯誤信息
這種錯誤狀態無法給用戶提供任何有用的信息。
③ 模糊的錯誤消息
下面的例子中雖然給出了用戶錯誤信息指導，但用戶沒有得到任何引導下一步該怎么做。
另外，不要以為用戶看到了消息就能很嫻熟的修改信息，相反，你要用通俗易懂的語言來表達出用戶那里出了錯誤。你要避免使用一些技術術語，并且用用戶的能理解的方式進行表達。
如何讓你的用戶更好的理解且從你的信息中得到解決方案，我們可以關注以下兩點：
（1）所出的問題及其產生原因
（2）用戶在修正錯誤時，下一個步驟是什么
在錯誤狀態中融入幽默的圖像或語言
錯誤狀態下用到圖表或者插圖是一個很好的形式，給用戶的視覺效果也會比那些無聊的純文本要好得多。只要你的信息對用戶有用，甚至可以更好地把你app應用的整體風格融入到錯誤頁。這是個人性化展現方式，并且能使你應用更加個性化。
幽默是生活的調味品。一點點的幽默可以緩解用戶的一些無奈。下面是一個例子：
Basecamp：當表單有錯誤是，左邊插畫的人物變為一個驚訝的表情。
當你創建Gmail郵箱輸入不對（鍵入太多）的時候，下方則出現提示信息。
但幽默的錯誤提示在使用時也要十分小心，萬一它在不恰當的時候出現了呢？因為它的出現取決于錯誤的嚴重程度。比如，對于簡單的錯誤，“404頁面未被找到”是一個很好的幽默式表述。但如果你的系統的給人的提示是“Uh oh”，用戶卻不知道問題出在哪，從而耽誤了很多時間，這就不合適了。
一個完美錯誤提示頁面：
（具備以下6點可以堪稱是完美的錯誤提示頁面）
① 在問題產生是，錯誤提示彈出的動態方式并且立即通知到有關用戶。
② 保留用戶已輸入的信息安全。在出現錯誤的時候，你的應用要保證信息不被撤銷、刪除或用戶上傳、下載。
③ 語言要使用用戶選擇的語言。要在描述中說清楚哪里出了錯誤，可能是什么原因造成的錯誤；用戶在修改時，下一個步驟是什么？
④ 不要左右用戶。（這個并不會很顯著）
⑤ 不要控制用戶的使用。（不是特別大的問題，讓用戶盡可能多的應用程序）
⑥ 在以人為本的基礎上使用幽默。
常用的幾款錯誤狀態
① 404未找到錯誤
404的主要的目的是引導你的用戶到他們想找的頁面。你的404頁面應該提供一些關鍵的環節和方向來指引用戶去選擇。最安全的方法是有一個“home”鍵作為404錯誤頁面的首選，讓用戶能重新回到首頁，進行重新操作。你也可以放置“報告此頁”來快速跳出此頁面，但要確保你的首選鏈接（跳轉到“home”頁）的展項方式讓用戶一目了然。
② 無法登陸錯誤
登陸頁面的內容通常相對是最少的，只有用戶名及密碼的字段輸入。但內容少不代表簡單，一個用戶很容易在登陸頁面上卡住。所以登陸頁面的規則越簡單越好——不要讓用戶去猜測。
我們可以通過MailChimp來看幾款好的登錄頁面解決方案：
（1）用戶忘記用戶名
如果你發現用戶填寫了不存在的用戶名，那么你需要提供一個鏈接，讓用戶去修復它。告訴用戶在哪可以得到這個用戶名（例如“在電子郵件中檢查”），或者提供一個鏈接來恢復用戶名。
（2）用戶多次登錄密碼不正確
為了安全保證，用戶賬戶通常在登陸嘗試失敗一定次數后被鎖定。這是一個安全的措施，但要確保在鎖定前（比如最后一次嘗試機會時）警告用戶賬戶將被鎖定。
③ 信用卡被拒錯誤
信用卡被拒錯誤頁面的原因有：
（1）數據格式上錯誤（錯字或丟失數據）；
（2）卡不能使用（過期卡或詐騙）造成的。
對于數據格式上的錯誤，應該遵循標準的實時在線驗證的方法及給予錯誤指示：
由于某些原因當卡在支付時，你需要清除一些數據，使支付系統操作起來更順暢。即使這樣，你也要告知用戶發生了什么，錯誤信息要盡可能的明確。
④ 連接已斷開錯誤提示
現代的app中我們都要考慮到關鍵的一點就是支持離線應用。當連接被斷開的時，你應該提供盡量豐富的離線體驗。這意味著應用程序應該有緩存內容，這樣才能提供良好的脫機體驗。
在離線狀態下，我們可以緩存一些小的東西，因為當用戶打開一個應用程序，不管聯網與否，他們希望能第一時間能看到他們想看的內容。如果內容不存在，用戶可能會放棄這款應用。
確保你的應用在離線狀態下盡可能全面的發揮它的功能。
下面是一些針對所有市場上應用都很實用的建議：
（1）保留最后的狀態。
可以對比以下兩款應用程序，CNN的應用程序通過為用戶提供最新加載的文章緩存來帶給用戶更好的體驗，而CRACKED卻什么都沒有提供。
（2）讓離線功能具備功能性且變得更有特點。
在不聯網的狀態下，每個應用程序都應該具備自身的特點。我們可以看下Evernote這個例子：在完全脫機的狀態下，你可以在上面編輯現有的或者全新的筆記，一旦聯網時，你的內容將自動同步更新。
說了這么多，其實最成功的應用是在用戶操作時沒有錯誤提示的彈出。對于應用來說，首選項肯定是正確且有效的為用戶做好引導工作，從而避免錯誤提示的產生。但當錯誤提示出現了我們也不必太過擔心，因為好的解決方案可以讓你用戶忽略這一錯誤甚至也能達到你app使用的預期效果。當然，錯誤提示是應用中最不理想的狀態頁面，所以，如果把這個狀態也做得盡善盡美，那么你的產品使用中應該也沒有什么大問題了。
Tags: 移動設計
文章來源：https://zhuanlan.zhihu.com/p/22829914