UI設計中“錯誤提示”看上去只是很少的一部分牍蜂，但是歸納整理出來其實很多钳降，影響很多至關重要的功能厚宰，如果沒有設計好，那么將嚴重影響你的產品體驗遂填，所以我們分享了《APP交互設計中的錯誤狀態(tài)設計技巧》與你一起進步固阁！
“錯誤”時有發(fā)生城菊。在App與生活中都會發(fā)生备燃。有時是因為我們犯了錯誤，有時是系統(tǒng)錯誤凌唬。無論錯誤原因是什么并齐，它們——還有解決方式——對用戶體驗影響深遠。但它往往不被重視客税，草草處理錯誤况褪、組織混亂的錯誤信息會使用戶沮喪，最終拋棄你的應用更耻。相反测垛，處理得當的錯誤提示，能把失敗變?yōu)轶@喜秧均。
本文中食侮，我們會討論如何優(yōu)化app的設計，來盡力防止用戶錯誤目胡，并建立良好的錯誤信息锯七。
錯誤是什么？
錯誤（或者說錯誤狀態(tài)）發(fā)生在app未能完成某個預期操作時誉己，例如：
app不理解用戶的輸入
app出錯了
用戶試圖同時進行兩個矛盾的操作
無論是誰引起的眉尸，每一種錯誤對于用戶而言，都會成為一種阻礙。好在噪猾，設計良好的錯誤處理能減少這種阻礙霉祸。
預防用戶錯誤
設計過app的同學，應該很熟悉各種限制條件袱蜡。例如網絡狀況差的情況下丝蹭，很難填寫表單，而且?guī)缀鯖]法同步數據戒劫。要考慮到這些限制，設計更易使用的app婆廊，將錯誤減到最少迅细。換句話說，應該提供建議淘邻、加上限制茵典、保持靈活，第一時間預防用戶犯錯宾舅。
Twitter因推文的字數限制而出名统阿，他們會在用戶達到字數上限之前提出警示。
讓錯誤信息統(tǒng)一有效
10條可用性啟迪中建議筹我，要清晰優(yōu)雅地表達出錯誤信息扶平。有效的錯誤提示應該提供如下信息：
明確表達發(fā)生了什么
描述用戶應該如何應對
盡可能多地保留用戶輸入的信息
用戶輸入錯誤
用戶輸入信息驗證的意義在于與用戶交流，并引導他們克服困難蔬蕊，應對不確定结澄。
輸入驗證的首要原則是：“出現錯誤時告知他們！”簡單說岸夯，優(yōu)秀的表單驗證由3個重要元素組成：
在適當時機和位置告知錯誤
為錯誤信息選擇合適的顏色
用簡明的語言描述錯誤
所有這些都有一個主要目標——避免困惑麻献。
適當的時機和位置（行內驗證）
用戶并不喜歡填完一個長表單并提交之后，才發(fā)現哪里填錯了猜扮。告知輸入信息正確與否的恰當時機勉吻，正是在輸入之后。實時驗證就該出場了旅赢。
實時行內驗證會立刻對用戶輸入作出提醒齿桃。如果使用行內表單驗證，就會清晰標明有錯誤的輸入項煮盼，發(fā)生錯誤時源譬，提交按鈕也會置灰。用戶不必等到點擊提交按鈕才看到錯誤孕似，他們能更早改正錯誤踩娘。
圖片來源：Google
下面是幾個行內表單驗證的案例：
不匹配的內容
超過或不滿規(guī)定字數
合適的顏色（直觀的設計）
顏色是設計驗證信息的最佳手段养渴。因為它能引發(fā)本能作用雷绢，紅色的錯誤信息和黃色的警告信息非常有效。錯誤文字應當易于閱讀理卑，與背景有足夠的反差翘紊，讓人能注意到。但要確保界面中的顏色適用于所有用戶藐唠，這是優(yōu)秀視覺設計的重要因素帆疟。
讓人注意到提示信息。圖片來源：Material Design
簡明的信息（發(fā)生了什么）
確保錯誤信息是寫給人看的宇立。要實現這一點踪宠，就得用用戶的語言來說話，避免使用技術術語妈嘹，用用戶的詞匯來表達一切柳琢。驗證信息要清晰陳述以下內容：
什么出錯了，為什么润脸。
用戶接下來該做什么來解決錯誤柬脸。
【圖注：左圖中的錯誤提示為，“輸入日期錯誤”毙驯；右圖中的錯誤提示為倒堕，“這是個過去的日期””郏】
典型的錯誤會直接說“信息不正確”涩馆，沒有告訴用戶它為什么錯了（是數據類型錯誤？還是已經被占用了允坚？）魂那。確保信息清晰明確。圖片來源：Material Design
應用的錯誤
應用也會發(fā)生錯誤稠项，它不受用戶輸入影響涯雅。這種情況下，用戶會遭遇意料之外的狀態(tài)展运。顯示錯誤時活逆，要解釋一下用戶為什么一無所獲，如何擺脫當前處境拗胜。
同步錯誤/加載錯誤
當同步或鏈接斷開蔗候，或者內容加載失敗時，應該告知用戶埂软。要預先告訴他們锈遥。由于沒有數據，可以使用空狀態(tài)填補空隙∷模可悲事實是丽惶，許多空狀態(tài)看起來……真的是空的。下面的例子中爬立，錯誤界面只說“發(fā)生了錯誤”钾唬，沒有提供一點有用的信息。
這個空狀態(tài)界面是個死胡同侠驯。圖片來源：Spotify
把錯誤提示想象成與用戶的一場對話抡秆。在遭遇失敗時，用友好且有意義的空狀態(tài)來溝通吟策。提供基本所需的信息來幫助用戶儒士，鼓勵他們解決問題。
走丟了踊挠，失去連接乍桂，就像置身于荒島冲杀？可以跟隨建議效床，保持冷靜，點起篝火权谁，持續(xù)刷新剩檀。圖片來源：Azendoo
在適當時機，提供鏈接或按鈕幫助用戶完成任務旺芽。但要提供你所能做到的操作沪猴。如果明知道會失敗，就不要放出“再試一次”這樣的選項采章。
不要展示原始錯誤信息
下面這個例子中的消息非吃耸龋晦澀嚇人。
【圖注：操作無法完成悯舟。(WDGeneralNetworkError error 500.)】
這種錯誤信息担租，是由開發(fā)者寫給另一名開發(fā)者看的。
不要假設人們知道提示信息的來龍去脈抵怎，或者指望他們是技術專家奋救，要用簡單的語言告訴人們哪里出錯了。如何用人話來解釋這些錯誤反惕？把它寫下來尝艘，那就是你的錯誤提示文案。
不匹配的狀態(tài)錯誤
用戶試圖執(zhí)行沖突操作時姿染，會引發(fā)不匹配的狀態(tài)錯誤背亥，例如在飛行模式下?lián)茈娫挘蛘唠x線狀態(tài)播放在線視頻。應該清晰表明他們所處狀態(tài)隘梨，避免他們陷入這般境地程癌。簡單說，就是不要讓用戶執(zhí)行無法完成的任務轴猎。
[圖片上傳中嵌莉。。捻脖。（10）]
清晰表明錯誤的原因和出處锐峭。圖片來源：Material Design
結論
從不出現的錯誤信息才是最好的。最佳方式是引導用戶向正確方向前進可婶，第一時間預防錯誤發(fā)生沿癞。但當錯誤確實發(fā)生時，設計精良的錯誤處理矛渴，不僅能教育用戶按你預期的方式使用app椎扬，還能防止用戶感到茫然。
感謝閱讀具温！
轉載注明：yunrui原文地址：colachan
