国产a一级毛片爽爽影院_欧美日韩亚洲中字二区在线播放_国产在线每日都有更新_日韩中文字幕tv在线看_日韩美女婬乱大片A级网站_韩国无遮免费羞羞漫画_久久亚洲精品无码播放偷妻_国产成人777爽视频_色噜噜狠狠成人中文综合18_国产精品免费高清在线观看

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

在這篇文章中，我們將研究如何通過優(yōu)化應用設計來避免用戶錯誤，以及當錯誤發(fā)生時，如何生成有效的報錯信息。我們還將學習如何運用精妙的錯誤處理手段，把失敗的瞬間轉變成歡樂時刻。Adobe推出了一個新的設計和線框圖應用，Adobe XD，可以用來設計交互的線框圖和錯誤狀態(tài)。你可以免費下載及試用Adobe XD。

什么是錯誤狀態(tài)?

錯誤狀態(tài)就是出現問題的時候所顯示的界面。它是用戶未獲得期待狀態(tài)的情況下的一個例子。由于錯誤可能在多種出乎意料的組合下發(fā)生，這些錯誤狀態(tài)可能包含各種情況，從用戶操作的不兼容（例如輸入了無效數據）、應用無法連接服務器、到甚至無法處理用戶請求。

（圖片來源：Material Design）

錯誤狀態(tài)界面。

無論是出于什么原因，每一個錯誤都會成為產生摩擦的一個點，并阻礙用戶繼續(xù)前進。好在精心設計的錯誤處理可以減輕這樣的摩擦。

預防勝于治療

在設計應用的時候，你需要熟悉應用中最容易造成錯誤狀態(tài)的那些交互操作（易出錯條件）。例如，第一次填寫表格的時候很難一次填對所有信息，又或者在設備網絡連接很弱的時候，幾乎不可能正常地完成數據同步。你需要在設計的時候把這些情況考慮在內，以最小化出錯的可能性。換言之，最好能通過提供建議、運用約束和靈活性，在一開始就避免用戶做出錯誤的操作。

舉例來說，假設你允許人們搜索酒店的預訂信息，為什么還要讓過去的日期可選，等到用戶選擇過去日期的時候再去顯示錯誤信息呢？

正如Booking.com的例子所示，你只需用一個日期選擇器，就可以讓用戶只能選擇今天或者未來的日期。這將迫使用戶在適當的范圍內進行選擇。

Booking.com應用中的日期選擇器顯示了一個完整的月歷，但是將過去的日期顯示為灰色，這樣用戶就會選擇正確的日期了。

用于表單驗證的錯誤界面

表單是一段對話。正如其他對話一樣，表單也應該呈現為用戶和應用之間的一段一致性的信息通訊。驗證是這段對話的一個重要的組成部分。表單驗證應當與用戶進行對話，并引導用戶順利地度過出錯和不確定的艱難時期。如果使用得當，表單驗證可以將一個不明確的交互操作變得清晰。一般而言，良好的表單驗證包括這四個重要因素：

• 告知錯誤（或成功）的適當時間
• 輸出驗證信息的適當位置
• 顯示消息的適當顏色
• 顯示消息的清晰語言

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

表單的驗證錯誤是不可避免的，它是用戶數據輸入過程中的一個自然的組成部分（因為用戶輸入是易出錯的）。沒錯，應該盡量減少易出錯條件，但是驗證錯誤永遠不能被徹底消除。因此最重要的問題是，“如何讓用戶能更容易地從表單錯誤中恢復？”。

用戶不喜歡在填寫完整張表格之后，提交的時候，才發(fā)現他們填錯了。尤其讓人沮喪的是，當你填好了一個很長的表格，一按下提交按鈕，就跳出好幾條錯誤消息。更令人討厭的是，有時候連有哪些錯誤，錯誤發(fā)生在哪里，都不清楚。

（圖片來源：Stackexchange）

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

然而，也不要對每一下按鍵都進行驗證，因為在大多數情況下，在人們輸入完整的答案之前，你根本沒法檢查。那些在數據錄入期間就執(zhí)行驗證的表單，會在用戶剛開始錄入數據的時候就對用戶進行懲罰。

（圖片來源：Medium）

Google表單在你還沒填完的時候就指出email是無效的。

另一方面，有的表單在數據錄入之后才進行驗證，它們告知用戶去修復錯誤的時間點就不夠及時。

Mihael Konjevi?在他的文章“Inline validation in forms — designing the experience”中研究了不同的驗證策略，并且提出了一個混合策略：早獎勵，晚懲罰。

（圖片來源：Medium）

混合方法——早獎勵，晚懲罰。

適當的位置

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

（圖片來源：ThinkwithGoogle）

實時地進行表單錯誤溝通。

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

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

（圖片來源：Material Design）

錯誤文本應該清晰可辨，使用適當的顏色，并且和背景有明顯對比。

清晰的消息

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

（應用錯誤：無法加載數據）

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

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

（這個錯誤消息是程序員寫來給開發(fā)用的。）

（2）死胡同的錯誤消息。因為這樣的錯誤狀態(tài)并沒有給用戶提供任何有用的的信息。

（Spotify的錯誤界面僅指出“一個錯誤發(fā)生了”，并沒有對修復問題提供任何建設性意見。）

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

（Buffer有一個精心設計的錯誤狀態(tài)界面，但是這樣的文案對用戶而言沒什么意義。圖片來源：emptystat.es）

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

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

• 出了什么問題，可能是由于什么原因。
• 用戶下一步可以采取什么措施來修復這個錯誤。

（Remote app解釋了為什么用戶什么也看不到，以及如何修復它。）

在錯誤狀態(tài)界面中，加入圖片和幽默感

錯誤狀態(tài)界面是一個好好利用圖標和插圖的絕佳機會，因為人們對于視覺信息的回應往往比純文本好一些。此外，你還可以走的更遠些，使用應用本身的配套圖片，會對用戶體驗更有益。這個方式可以讓應用消息更人性化，同時也很好地傳達應用的個性。

（Azendoo
采用了令人難忘的插圖和幽默的文案來鼓勵用戶解決問題。）

幽默是生活的調味品。少量的幽默完全無害，還能幫助減緩錯誤帶來的挫敗感。在Littlebigdetails，你能找到許多幽默的錯誤消息的正確示范。這里摘選了我最喜歡的幾個：

（1）Basecamp：當出現表單字段的錯誤時，左側的小人會露出驚訝的面部表情。

（圖片來源：Des Traynor）

（2）在Gmail創(chuàng)建新賬號的時候，如果你填入了太多的句號，一個頑皮的錯誤消息就會顯示出來。

（圖片來源：Simon Souris）

但是，使用幽默元素的時候要當心，它不一定總是適用于你的錯誤消息；實際上這取決于錯誤的嚴重程度。例如，對于像“404頁面未找到”這樣簡單的驗證問題，采用幽默的表達方式是好的。但是，如果用戶由于一個顯示為“啊哦！”的故障損失了大量時間，這就完全不合適了。

（圖片來源：Thomas Fuchs）

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

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

1. 正如問題是不斷變化的一樣，錯誤消息的出現也是動態(tài)的。要及時告知用戶出現的問題。
2. 保證所有用戶輸入信息的安全。在發(fā)生錯誤的情況下，應用不該撤銷、銷毀或刪除任何用戶輸入或上傳的數據。
3. 使用與用戶相同的語言。頁面應該清楚地表達什么地方出了問題，可能的原因是什么，用戶下一步該做些什么來修復這個錯誤。
4. 不要驚嚇或者迷惑用戶。（頁面消息不該是戲劇性的。）
5. 不要搶奪系統(tǒng)的控制權。（如果不是危險性的問題，應該盡可能地讓用戶能夠和應用的其余部分進行交互）。
6. 用一點幽默感，讓問題更有人情味。

常見錯誤狀態(tài)的解決方案

404 頁面未找到錯誤

404頁面的主要目的是引導用戶盡快地跳轉到他們尋找的頁面。你的404頁面應該列出一些關鍵鏈接和指南，以供用戶選擇。一個保險的做法就是在404頁面提供一個“主頁”鏈接作為主要操作元素——這是重新來過的一個快速且友好的方式。你還可以放置一個“報告此頁”的鏈接來匯報出錯頁面，不過要確保主要操作元素（“主頁”鏈接）占據更重的視覺量。

（圖片來源：Dribbble）

無法登陸

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

MailChimp在錯誤消息方面表現出色，以此為例，讓我們來給出一些常見問題的解決方案。

（1）用戶忘記了他的用戶名

如果檢測到問題是出于一個未知的用戶名，你需要給一個鏈接讓用戶修復它。告訴用戶哪里可以獲得他的用戶名（例如“查看我們的郵件”），或者提供一個用戶名重置的鏈接。

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

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

信用卡被拒

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

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

（圖片來源：uxdesign）

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

（圖片來源：uxdesign）

連接已斷開

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

Daniel Sauble在他的文章中給出了對社交、地圖、效率類應用在離線狀態(tài)下如何工作的絕佳見解。該文很清晰地解釋了為什么作者會認為對每個事件進行一點緩存，會好過對部分事件有大量緩存或沒有緩存。因為，當用戶打開應用的時候，不管是否連接上網絡，他們都期待看見應用的內容。如果沒有任何內容，用戶會感到沮喪，并且切換到其他信息緩存做的比較好的應用去。

要確保應用在離線狀態(tài)下盡可能良好地運行。這里有一些來自Robert Woo的實用建議，它們基本上可以被采用到市面上存在的任一應用中去。

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

（圖片來源：rocketfarmstudios）

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

（圖片來源：emptystates）

結論

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

原文作者：Nick Babich

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

譯者：Zoe Yin （簡書主頁）

本文由 @Zoe Yin? 翻譯發(fā)布于人人都是產品經理。未經許可，禁止轉載。