錯誤是應用未按預期執(zhí)行時出現(xiàn)的狀況, 一般發(fā)生在:

• 應用無法識別用戶輸入的信息
• 系統(tǒng)或應用故障
• 用戶執(zhí)行的多個操作產(chǎn)生了沖突

用好的設計避免錯誤發(fā)生. 讓你的應用理解用戶, 而不是讓用戶去理解你的應用. 當錯誤不可避免的發(fā)生時, 向用戶傳達清晰的信息能更好地讓用戶理解發(fā)生了什么以及如何快速解決它. 隨時隨刻保存當前狀態(tài), 尤其是用戶輸入內(nèi)容時.

在眾多反饋信息中找到最重要的優(yōu)先顯示, 確保正確的信息傳達到位而無關(guān)的元素不會出現(xiàn)在屏幕中, 并且它應該有一致的外觀樣式和固定的顯示位置.

用戶輸入錯誤

在用戶輸入錯誤時給予內(nèi)容提示幫助用戶修正錯誤. 禮貌并及時地告訴用戶他們犯了一個錯誤需要作出更正. 不要在用戶提交了一個很長的表單后才告訴他們出現(xiàn)了一個錯誤. 而應該在檢測到錯誤時禁用表單提交按鈕. 如果錯誤只有在用戶提交表單后才能被發(fā)現(xiàn), 要清晰地指明什么地方出現(xiàn)了錯誤以及解決它需要用戶做什么.

文本輸入框

輔助提示可以在用戶輸入前, 輸入時或輸入之后任何時間顯示. 但錯誤提示不要在用戶與輸入框交互之前出現(xiàn). 輔助提示可以在用戶輸錯了文本后轉(zhuǎn)換成錯誤提示.

不要讓太多的提示充斥屏幕以至于降低用戶的效率. 不是每個文本框都需要輔助或錯誤提示.

如果在文本框下方展示錯誤提示, 那么該提示與其所指的出錯文本框之間要留出 16dps 的間距.

http://wiki.jikexueyuan.com/project/material-design/images/patterns_errors_userinput1.png" alt="" />

http://wiki.jikexueyuan.com/project/material-design/images/patterns_errors_userinput2.png" alt="" />

淺色主題

錯誤提示字體使用 Roboto Regular 12sp 預置詞 (Hint) 和提示字色使用 帶有 38% 透明度的 #000000

http://wiki.jikexueyuan.com/project/material-design/images/patterns_errors_userinput3.png" alt="" />

深色主題

錯誤提示字體使用 Roboto Regular 12sp 預置詞和提示字色使用 帶有 30% 透明度的 #FFFFFF

http://wiki.jikexueyuan.com/project/material-design/images/patterns_errors_userinput4.png" alt="" />

輔助和錯誤提示

http://wiki.jikexueyuan.com/project/material-design/images/patterns_errors_userinput5.png" alt="" />

http://wiki.jikexueyuan.com/project/material-design/images/patterns_errors_userinput6.png" alt="" />

http://wiki.jikexueyuan.com/project/material-design/images/patterns_errors_userinput7.png" alt="" />

http://wiki.jikexueyuan.com/project/material-design/images/patterns_errors_userinput8.png" alt="" />

http://wiki.jikexueyuan.com/project/material-design/images/patterns_errors_userinput9.png" alt="" />

http://wiki.jikexueyuan.com/project/material-design/images/patterns_errors_userinput_keyline1.png" alt="" />

錯誤提示與浮動文字標題

http://wiki.jikexueyuan.com/project/material-design/images/patterns_errors_userinput10.png" alt="" />

http://wiki.jikexueyuan.com/project/material-design/images/patterns_errors_userinput11.png" alt="" />

http://wiki.jikexueyuan.com/project/material-design/images/patterns_errors_userinput12.png" alt="" />

http://wiki.jikexueyuan.com/project/material-design/images/patterns_errors_userinput_keyline2.png" alt="" />

帶字數(shù)統(tǒng)計的文本輸入框

計數(shù)器可以在用戶輸入前, 輸入時或輸入之后任何時間顯示. 也可以考慮用戶的輸入接近上限時才顯示計數(shù)器. 計數(shù)器與文本框之間要留出 16dps 的間距.

• 計數(shù)器的字體使用 Roboto Regular 12sp

帶字數(shù)統(tǒng)計的單行輸入框

http://wiki.jikexueyuan.com/project/material-design/images/patterns_errors_userinput13.png" alt="" />

http://wiki.jikexueyuan.com/project/material-design/images/patterns_errors_userinput14.png" alt="" />

帶字數(shù)統(tǒng)計的多行輸入框

http://wiki.jikexueyuan.com/project/material-design/images/patterns_errors_userinput15.png" alt="" />

http://wiki.jikexueyuan.com/project/material-design/images/patterns_errors_userinput16.png" alt="" />

http://wiki.jikexueyuan.com/project/material-design/images/patterns_errors_userinput17.png" alt="" />

http://wiki.jikexueyuan.com/project/material-design/images/patterns_errors_userinput_keyline3.png" alt="" />

沖突值

沖突值錯誤是用戶輸入時或輸入之后才會觸發(fā)的錯誤.

如果有兩個以上的輸入框出現(xiàn)了沖突的輸入, 除了每個輸入框下方都有錯誤提示信息指示如何修正外, 還應該在屏幕頂端顯示一條總結(jié)性的修正建議或附加說明.

提交表單后檢測到錯誤

表單應當被重新加載并且滾動到表單頂端, 這里會顯示匯總的錯誤信息. 而各處獨立的錯誤信息提示用戶想要完成表單就先解決它們.

http://wiki.jikexueyuan.com/project/material-design/images/patterns_errors_userinput18.png" alt="" />

http://wiki.jikexueyuan.com/project/material-design/images/patterns_errors_userinput19.png" alt="" />

不完整的表單

如果用戶在填寫表單時遺漏了必填項, 那么不完整表單的錯誤信息會指示出他們遺漏了哪些輸入項. 如果不能檢測用戶填寫表單的進度, 那么應該在用戶試圖提交表單后顯示錯誤提示.

如果表單中的多個輸入框被留空, 每個輸入框下都應該有錯誤信息指示此處不完整.

提交表單后的多條錯誤信息

確保有足夠的獨立錯誤信息指示用戶如何完成表單.

http://wiki.jikexueyuan.com/project/material-design/images/patterns_errors_userinput21.png" alt="" />

http://wiki.jikexueyuan.com/project/material-design/images/patterns_errors_userinput22.png" alt="" />

單行列表錯誤

http://wiki.jikexueyuan.com/project/material-design/images/patterns_errors_userinput23.png" alt="" />

應用錯誤

應用錯誤無論用戶是否輸入都會發(fā)生.

一般應用錯誤

如果應用某個進程中出現(xiàn)錯誤, 應該持續(xù)顯示當前活動/加載指示器 (activity/loading indicators) 直到獲取到失敗的狀態(tài)并將錯誤顯示出來.

如果功能不可用, 應該在 UI 中表示出來. 但并不是每個錯誤都需要用彈出組件的方式告知.

如果可以的話, 給用戶提出一個可以解決此錯誤的操作建議, 幫助他們擺脫困境.

http://wiki.jikexueyuan.com/project/material-design/images/patterns_errors_app1.png" alt="" />

錯誤對話框: 應用反饋了一個阻止程序正常運行的錯誤.

http://wiki.jikexueyuan.com/project/material-design/images/patterns_errors_app2.png" alt="" />

Snackbar: 應用反饋了一個無關(guān)緊要的錯誤. Snackbar 只能短暫顯示, 不要用它反饋緊要的, 持續(xù)的或大批量的錯誤.

同步加載錯誤/失敗

應用設計中很關(guān)鍵的一步是確認哪些屏用來呈現(xiàn)內(nèi)容, 而其中又要考慮這些屏在慮預定的內(nèi)容沒能呈現(xiàn)時應該怎么做. 包括如下情況:

• 正常應該呈現(xiàn)一列列表, 但列表項是空的.
• 正常應該顯示搜索結(jié)果, 但當前搜索結(jié)果數(shù)為零.
• 正常應該顯示基于云端的內(nèi)容 (cloud-based content), 但因為未知錯誤導致現(xiàn)在無法顯示.

以上這些設想的情況被叫做空數(shù)據(jù)狀態(tài) (empty states). 雖然這方面沒有標準規(guī)范, 但把它們設計好非常重要, 因為偶然出現(xiàn)的不在預期內(nèi)的狀況可能已經(jīng)讓你的用戶徹底失望.

當同步停滯或內(nèi)容加載失敗時, 用戶與應用其他部分交互盡可能不要受到影響.

http://wiki.jikexueyuan.com/project/material-design/images/patterns_errors_app3.png" alt="" />

屏幕/內(nèi)容加載失敗的空數(shù)據(jù)狀態(tài).

http://wiki.jikexueyuan.com/project/material-design/images/patterns_errors_app4.png" alt="" />

容器/組件特定的錯誤及建議操作.

聯(lián)接

當聯(lián)接 (Connectivity) 失效時, 用戶與應用其他部分交互盡可能不要受到影響.

如果可以, 提供一個可以幫助他們完成任務的鏈接. 確保提供的鏈接確實可以提供幫助. 例如, 在可以預計到操作會失敗的情況下, 就不要提供一個類似 "再試一次" 的操作.

http://wiki.jikexueyuan.com/project/material-design/images/patterns_errors_app5.png" alt="" />

帶有重試操作的 Snackbar.

http://wiki.jikexueyuan.com/project/material-design/images/patterns_errors_app6.png" alt="" />

必須聯(lián)網(wǎng)可見的屏的空數(shù)據(jù)狀態(tài).

沖突狀態(tài)錯誤

沖突狀態(tài)錯誤發(fā)生在用戶試圖運行的操作起沖突時, 例如在飛行模式下?lián)艽螂娫捇蛟谠L問受限的賬戶下截圖操作. 嘗試清晰地傳達出此狀態(tài)是用戶自己所選的并暗示 (implications) 此種情況下體驗有何不同, 避免讓用戶走進死胡同 (putt themselves into these situations). 當觸發(fā)了這些錯誤時, 要避免暗示用戶這是他們的錯.

一般沖突

要清晰地闡明為什么發(fā)生錯誤以及根源在哪.

例子:

• 截圖以及其他高級功能 (premium features) 在受限模式 (restricted mode) 中無法使用.

http://wiki.jikexueyuan.com/project/material-design/images/patterns_errors_state1.png" alt="" />

Snackbar + 特殊模式指示器

用戶選擇離線

當用戶處于這種狀態(tài)下, 可以考慮使用不打擾，但持續(xù)顯示的指示器.

例子:

• 在飛行模式撥打電話
• 離線狀態(tài)下在線音樂不可用

http://wiki.jikexueyuan.com/project/material-design/images/patterns_errors_state2.png" alt="" />

Snackbar

http://wiki.jikexueyuan.com/project/material-design/images/patterns_errors_state3.png" alt="" />

設備啟用飛行模式時的指示器

許可請求

如果應用必須獲得用戶準許后才繼續(xù)某些流程, 考慮在流程中插入許可請求, 而不是把它當作一個錯誤處理.

如果必須在首次運行應用前獲得許可, 要考慮是否可以把請求與歡迎信息結(jié)合起來.

例子:

• 應用的權(quán)限發(fā)生了改變.
• 應用內(nèi)購 (In-app purchases) 被禁用 (disabled).

http://wiki.jikexueyuan.com/project/material-design/images/patterns_errors_state4.png" alt="" />

對話框