中文字幕无码av不卡一区,亚洲综合AV永久无码精品一区二区,黑人巨大白妞出浆,黄色高清无码免费看,久久久久免费精品国产,久久无码人妻丰满熟妇区毛片,欧美日韩国产综合草草,久久福利网站,亚洲一区二区三区中文字幕在线,av国内精品久久久久影院

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

（圖片來(lái)源：ThinkwithGoogle）

實(shí)時(shí)地進(jìn)行表單錯(cuò)誤溝通。

適當(dāng)?shù)念伾ū韱蝺?nèi)驗(yàn)證）

顏色是設(shè)計(jì)驗(yàn)證時(shí)的最佳工具之一。因?yàn)樗饔糜诒灸軐蛹?jí)，在錯(cuò)誤消息中加上紅色，警告消息中加上黃色，成功消息中加上綠色，會(huì)難以置信的強(qiáng)大。但是，要確保數(shù)字界面中的這些顏色對(duì)用戶是易理解的。這是良好視覺(jué)設(shè)計(jì)的一個(gè)重要方面。

（圖片來(lái)源：Material Design）

錯(cuò)誤文本應(yīng)該清晰可辨，使用適當(dāng)?shù)念伾?，并且和背景有明顯對(duì)比。

清晰的消息

一個(gè)典型的錯(cuò)誤消息可能僅指出“郵件是無(wú)效的”而不告訴用戶為什么它是無(wú)效的（是因?yàn)殄e(cuò)字？還是已經(jīng)被占用？）。簡(jiǎn)單明了的說(shuō)明或指引會(huì)讓一切都不一樣。收到這個(gè)錯(cuò)誤消息的用戶不需要有任何猜測(cè)，也不會(huì)有產(chǎn)生混淆或沮喪。你可以從這個(gè)例子中看出，表單告知用戶該郵件已經(jīng)被使用。然后它給出了一些選項(xiàng)（登陸或者重置密碼）。

（應(yīng)用錯(cuò)誤：無(wú)法加載數(shù)據(jù)）

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

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

（這個(gè)錯(cuò)誤消息是程序員寫(xiě)來(lái)給開(kāi)發(fā)用的。）

（2）死胡同的錯(cuò)誤消息。因?yàn)檫@樣的錯(cuò)誤狀態(tài)并沒(méi)有給用戶提供任何有用的的信息。

（Spotify的錯(cuò)誤界面僅指出“一個(gè)錯(cuò)誤發(fā)生了”，并沒(méi)有對(duì)修復(fù)問(wèn)題提供任何建設(shè)性意見(jiàn)。）

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

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

別用錯(cuò)誤恐嚇用戶。另外，也不要以為人們會(huì)知道某條消息的語(yǔ)境，或者以為他們技術(shù)足夠嫻熟，可以自己解決問(wèn)題。相反的，應(yīng)該用通俗易懂的語(yǔ)言告訴用戶哪里出了錯(cuò)。要做到這一點(diǎn)，需要避免使用技術(shù)術(shù)語(yǔ)，而采用用戶術(shù)語(yǔ)來(lái)表達(dá)所有信息。

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

• 出了什么問(wèn)題，可能是由于什么原因。
• 用戶下一步可以采取什么措施來(lái)修復(fù)這個(gè)錯(cuò)誤。

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

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

錯(cuò)誤狀態(tài)界面是一個(gè)好好利用圖標(biāo)和插圖的絕佳機(jī)會(huì)，因?yàn)槿藗儗?duì)于視覺(jué)信息的回應(yīng)往往比純文本好一些。此外，你還可以走的更遠(yuǎn)些，使用應(yīng)用本身的配套圖片，會(huì)對(duì)用戶體驗(yàn)更有益。這個(gè)方式可以讓?xiě)?yīng)用消息更人性化，同時(shí)也很好地傳達(dá)應(yīng)用的個(gè)性。

（Azendoo
采用了令人難忘的插圖和幽默的文案來(lái)鼓勵(lì)用戶解決問(wèn)題。）

幽默是生活的調(diào)味品。少量的幽默完全無(wú)害，還能幫助減緩錯(cuò)誤帶來(lái)的挫敗感。在Littlebigdetails，你能找到許多幽默的錯(cuò)誤消息的正確示范。這里摘選了我最喜歡的幾個(gè)：

（1）Basecamp：當(dāng)出現(xiàn)表單字段的錯(cuò)誤時(shí)，左側(cè)的小人會(huì)露出驚訝的面部表情。

（圖片來(lái)源：Des Traynor）

（2）在Gmail創(chuàng)建新賬號(hào)的時(shí)候，如果你填入了太多的句號(hào)，一個(gè)頑皮的錯(cuò)誤消息就會(huì)顯示出來(lái)。

（圖片來(lái)源：Simon Souris）

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

（圖片來(lái)源：Thomas Fuchs）

一個(gè)完美錯(cuò)誤頁(yè)面的全面檢查清單：

完美的錯(cuò)誤頁(yè)面應(yīng)該向用戶伸出援助之手，并且應(yīng)具備以下六個(gè)特質(zhì)：

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

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

404 頁(yè)面未找到錯(cuò)誤

404頁(yè)面的主要目的是引導(dǎo)用戶盡快地跳轉(zhuǎn)到他們尋找的頁(yè)面。你的404頁(yè)面應(yīng)該列出一些關(guān)鍵鏈接和指南，以供用戶選擇。一個(gè)保險(xiǎn)的做法就是在404頁(yè)面提供一個(gè)“主頁(yè)”鏈接作為主要操作元素——這是重新來(lái)過(guò)的一個(gè)快速且友好的方式。你還可以放置一個(gè)“報(bào)告此頁(yè)”的鏈接來(lái)匯報(bào)出錯(cuò)頁(yè)面，不過(guò)要確保主要操作元素（“主頁(yè)”鏈接）占據(jù)更重的視覺(jué)量。

（圖片來(lái)源：Dribbble）

無(wú)法登陸

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

MailChimp在錯(cuò)誤消息方面表現(xiàn)出色，以此為例，讓我們來(lái)給出一些常見(jiàn)問(wèn)題的解決方案。

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

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

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

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

信用卡被拒

出現(xiàn)信用卡的被拒錯(cuò)誤頁(yè)面可能是因?yàn)椋?）數(shù)據(jù)格式上的錯(cuò)誤（錯(cuò)字或漏填數(shù)據(jù)）或者（2）信用卡被拒付（過(guò)期或欺詐）。Gabriel Tomescu在他的文章《解剖信用卡格式》中，建議用以下策略應(yīng)對(duì)這兩種錯(cuò)誤狀態(tài)：

對(duì)于第一種問(wèn)題，應(yīng)該遵循標(biāo)準(zhǔn)的實(shí)時(shí)表單內(nèi)驗(yàn)證機(jī)制，在視覺(jué)上指明錯(cuò)誤：

（圖片來(lái)源：uxdesign）

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

（圖片來(lái)源：uxdesign）

連接已斷開(kāi)

網(wǎng)絡(luò)訪問(wèn)并不是無(wú)處不在的，對(duì)離線狀態(tài)的支持應(yīng)當(dāng)是差不多每一個(gè)現(xiàn)代應(yīng)用的關(guān)鍵考慮因素。當(dāng)連接斷開(kāi)的時(shí)候，你需要提供盡量豐富的離線體驗(yàn)。用戶應(yīng)該可以盡可能多地和應(yīng)用的其余部分進(jìn)行交互。這意味著應(yīng)用要有緩存的內(nèi)容，來(lái)提供良好的離線體驗(yàn)。

Daniel Sauble在他的文章中給出了對(duì)社交、地圖、效率類(lèi)應(yīng)用在離線狀態(tài)下如何工作的絕佳見(jiàn)解。該文很清晰地解釋了為什么作者會(huì)認(rèn)為對(duì)每個(gè)事件進(jìn)行一點(diǎn)緩存，會(huì)好過(guò)對(duì)部分事件有大量緩存或沒(méi)有緩存。因?yàn)?，?dāng)用戶打開(kāi)應(yīng)用的時(shí)候，不管是否連接上網(wǎng)絡(luò)，他們都期待看見(jiàn)應(yīng)用的內(nèi)容。如果沒(méi)有任何內(nèi)容，用戶會(huì)感到沮喪，并且切換到其他信息緩存做的比較好的應(yīng)用去。

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

保存最新?tīng)顟B(tài)。下圖中你可以看到兩個(gè)用于傳遞內(nèi)容的應(yīng)用。CNN的應(yīng)用提供了更好的用戶體驗(yàn)，因?yàn)樗彺媪俗罱囊晥D，并為用戶提供了最近一次加載的文章標(biāo)題。

（圖片來(lái)源：rocketfarmstudios）

提供離線功能和特性。在每個(gè)應(yīng)用上都有一些特性可以（而且應(yīng)該）在沒(méi)有網(wǎng)絡(luò)連接的情況下工作。以Evernote為例，該應(yīng)用完全可以離線使用：你可以編輯現(xiàn)有筆記或者新增筆記，一旦再次連接網(wǎng)絡(luò)，該應(yīng)用就會(huì)把所有筆記同步到云端。

（圖片來(lái)源：emptystates）

結(jié)論

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

原文作者：Nick Babich

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

譯者：Zoe Yin （簡(jiǎn)書(shū)主頁(yè)）

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