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

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

用戶輸入錯(cuò)誤

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

文本輸入框

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

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

如果在文本框下方展示錯(cuò)誤提示, 那么該提示與其所指的出錯(cuò)文本框之間要留出 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="" />

淺色主題

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

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

深色主題

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

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

輔助和錯(cuò)誤提示

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="" />

錯(cuò)誤提示與浮動(dòng)文字標(biāo)題

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="" />

帶字?jǐn)?shù)統(tǒng)計(jì)的文本輸入框

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

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

帶字?jǐn)?shù)統(tǒng)計(jì)的單行輸入框

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="" />

帶字?jǐn)?shù)統(tǒng)計(jì)的多行輸入框

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="" />

沖突值

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

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

提交表單后檢測到錯(cuò)誤

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

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="" />

不完整的表單

如果用戶在填寫表單時(shí)遺漏了必填項(xiàng), 那么不完整表單的錯(cuò)誤信息會(huì)指示出他們遺漏了哪些輸入項(xiàng). 如果不能檢測用戶填寫表單的進(jìn)度, 那么應(yīng)該在用戶試圖提交表單后顯示錯(cuò)誤提示.

如果表單中的多個(gè)輸入框被留空, 每個(gè)輸入框下都應(yīng)該有錯(cuò)誤信息指示此處不完整.

提交表單后的多條錯(cuò)誤信息

確保有足夠的獨(dú)立錯(cuò)誤信息指示用戶如何完成表單.

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="" />

單行列表錯(cuò)誤

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

應(yīng)用錯(cuò)誤

應(yīng)用錯(cuò)誤無論用戶是否輸入都會(huì)發(fā)生.

一般應(yīng)用錯(cuò)誤

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

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

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

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

錯(cuò)誤對話框: 應(yīng)用反饋了一個(gè)阻止程序正常運(yùn)行的錯(cuò)誤.

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

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

同步加載錯(cuò)誤/失敗

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

正常應(yīng)該呈現(xiàn)一列列表, 但列表項(xiàng)是空的.
正常應(yīng)該顯示搜索結(jié)果, 但當(dāng)前搜索結(jié)果數(shù)為零.
正常應(yīng)該顯示基于云端的內(nèi)容 (cloud-based content), 但因?yàn)槲粗e(cuò)誤導(dǎo)致現(xiàn)在無法顯示.

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

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

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="" />

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

聯(lián)接

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

如果可以, 提供一個(gè)可以幫助他們完成任務(wù)的鏈接. 確保提供的鏈接確實(shí)可以提供幫助. 例如, 在可以預(yù)計(jì)到操作會(huì)失敗的情況下, 就不要提供一個(gè)類似 "再試一次" 的操作.

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)錯(cuò)誤

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

一般沖突

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

例子:

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

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

Snackbar + 特殊模式指示器

用戶選擇離線

當(dāng)用戶處于這種狀態(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="" />

設(shè)備啟用飛行模式時(shí)的指示器

許可請求

如果應(yīng)用必須獲得用戶準(zhǔn)許后才繼續(xù)某些流程, 考慮在流程中插入許可請求, 而不是把它當(dāng)作一個(gè)錯(cuò)誤處理.

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

例子:

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

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

對話框