東東推薦：一個(gè)優(yōu)秀的錯(cuò)誤信息長啥樣？本文通過多個(gè)例子來說明，媽媽再也不用擔(dān)心我怎么設(shè)計(jì)錯(cuò)誤提示啦！

想象一下你坐在辦公室的狹小隔間里，埋頭處理著已經(jīng)折騰了許久的一個(gè)快上線的產(chǎn)品介紹，巨大的工作壓力和沉悶的氣氛讓你快喘不過氣來，真是希望周末快點(diǎn)到來。

但首先你得測(cè)試一下新產(chǎn)品的首頁能否在Windows上完美呈現(xiàn)。沒問題，你可靠的蘋果筆記本上有個(gè)虛擬機(jī)能幫助你運(yùn)行Windows。

開啟虛擬機(jī)，然后Windows跳出一串通知 禮貌地提醒你升級(jí)系統(tǒng)，恩沒問題，繼續(xù)。

然后你就看到了這個(gè)：

呵呵，再加一句就成排比了，如果項(xiàng)目不那么緊張我可能已笑出聲來。

托那些慵懶無能的程序員和設(shè)計(jì)師的福，想死的心都有了。在你快對(duì)一切感到絕望之際突然想到或許來點(diǎn)美食可以舒緩情緒。

嘿嘿！來點(diǎn)小籠包吧~

不過首先呢，需要回答Postmates（一款同城快遞app）冷不丁向你提出的這個(gè)哲學(xué)問題：

那么什么樣的錯(cuò)誤信息和對(duì)話窗口才算真正有用呢？

在經(jīng)歷了上周前文所述的那些戲劇性事件之后，我們一起來看看一個(gè)優(yōu)秀的錯(cuò)誤信息應(yīng)該是什么樣的。

蘋果公司一直算是用戶界面設(shè)計(jì)的先驅(qū)者，來看看人家是怎么做的。

OS X Human Interface Guidelines（蘋果桌面系統(tǒng)人機(jī)界面指南）是如何定義此類對(duì)話窗口的：

在通知窗口內(nèi)，用明晰、簡潔的語言來描述其內(nèi)容。類似“一個(gè)錯(cuò)誤發(fā)生了”的信息會(huì)讓用戶感到困惑，同時(shí)也會(huì)被那些熟手用戶厭惡。（……）你的文字需要詳盡描述行為的結(jié)果，并給出解決方法的建議。告訴用戶他們?yōu)槭裁匆粢庠搯栴}。（……）在信息文本中包含解決問題的建議。（……）用用戶能理解的語言來表達(dá)。務(wù)必不要使用那些含義模糊或用戶難以理解的術(shù)語，畢竟通知窗口本身就夠讓人不安了。（……）盡可能避免使用“OK”作為默認(rèn)按鍵?！癘K”這個(gè)詞的含義很模糊，特別是當(dāng)用戶被詢問是否確定做某事之時(shí)。舉個(gè)例子，“OK，我想要完成這個(gè)行動(dòng)”和“OK，我現(xiàn)在了解了我的行動(dòng)可能產(chǎn)生的負(fù)面后果”中的“OK”是否是一個(gè)含義？

我們現(xiàn)在有大致方向了吧？對(duì)了，他們甚至還對(duì)措辭和語法有所定義：

如果你有請(qǐng)專業(yè)的視覺設(shè)計(jì)師來設(shè)計(jì)app里的圖標(biāo)和圖片，那么就別忘了請(qǐng)一位專業(yè)的文案幫你琢磨app里的文本內(nèi)容。

作為產(chǎn)品經(jīng)理，亦或是app的設(shè)計(jì)師或開發(fā)者，你應(yīng)該意識(shí)到app中“文案”的優(yōu)先級(jí)絕不低于“讓應(yīng)用正常運(yùn)作”和“讓用戶界面高效易用”。

下面來看一些關(guān)于錯(cuò)誤窗口的實(shí)例，邊看邊想想它們有沒有遵循前面提到的幾點(diǎn)：

Windows手機(jī)，呵呵，“我們當(dāng)前無法檢查升級(jí)”并沒什么卵用。為什么現(xiàn)在不能檢查升級(jí)？用戶又能對(duì)此做些什么？

對(duì)于這兩個(gè)問題，正解應(yīng)是：手機(jī)上的時(shí)間未設(shè)置正確，導(dǎo)致升級(jí)服務(wù)器上的SSL證書無法被驗(yàn)證。這才是錯(cuò)誤信息之由來。只要調(diào)對(duì)系統(tǒng)時(shí)間，一切就都會(huì)恢復(fù)正常。

所以為什么Windows Phone就不能把這個(gè)彈窗改成：“鑒于安全性的原因，我們無法檢查是否有升級(jí)。這可能是因?yàn)槟愕氖謾C(jī)時(shí)間和日期不正確造成的。檢查你的時(shí)間和日期設(shè)置并重試一遍！”或甚至更好：“請(qǐng)確保你的操作系統(tǒng)自動(dòng)同步時(shí)間和日期？”

谷歌，瞧瞧你這彈窗…為什么要在這里使用一個(gè)模態(tài)窗口來打斷用戶的進(jìn)程呢（請(qǐng)注意這并不是原生的iOS地理位置授權(quán)提醒）？這個(gè)OK是什么鬼？到底能給我?guī)硎裁春锰帲?/p>

如果用戶愿意打開共享位置信息的話，發(fā)起詢問是沒問題的；對(duì)于搜索引擎來說這種提醒也是合理的。但不要濫用那些需要用戶立即作出決定、且通常意味著重大問題的系統(tǒng)級(jí)別組件。

ESC鍵用來做應(yīng)用鍵還是取消鍵？不不不，能不能正常點(diǎn)？這個(gè)星球上99%的軟件都視ESC為取消，你覺得是默認(rèn)和人家一致的好，還是彈出個(gè)奇怪的模態(tài)窗口更合適？

嗯我知道有一些Adobe的軟件默認(rèn)把ESC作為“應(yīng)用”——然而即便如此它也應(yīng)該在其它應(yīng)用里通過設(shè)置實(shí)現(xiàn)。對(duì)這些厭惡彈窗的專家用戶而言，通過偏好設(shè)置進(jìn)行調(diào)整都不是事兒。又或者，咱還是把模態(tài)窗口拋到一邊，把默認(rèn)設(shè)置為取消，但在窗口的底部顯示一條“你是否想把ESC鍵作為應(yīng)用鍵？點(diǎn)擊這里確認(rèn)改變。”的通知條。注意了，這并不需要模態(tài)窗口的介入。

Adobe，別把問題都拋給用戶，請(qǐng)?jiān)谀J(rèn)項(xiàng)方面表現(xiàn)得更果決一些。

友情提示：最好的錯(cuò)誤窗口就是不顯示窗口

其實(shí)對(duì)于上面提到的每一個(gè)例子而言，錯(cuò)誤彈窗都是可以不出現(xiàn)的。我不完全確定Windows10的規(guī)范，但目前來看似乎它自己也不確定。

1 對(duì)于Twitter的錯(cuò)誤彈窗而言，完全可以以toast的形式說明哪里出錯(cuò)了，或可以直接先幫用戶解決問題，再詢問用戶是否處理妥善。在前面舉過的那個(gè)Twitter的例子其實(shí)真實(shí)的版本是這樣的：我想上傳一張高分辨率的圖片（大概有10000px的寬度），而Twitter對(duì)圖片有分辨率的限制。那么為什么不在我上傳之前就告訴我呢？為什么不在客戶端就幫我剪裁圖片至規(guī)定的尺寸呢？你完全可以那么做，然后給我展示一個(gè)小小的非模態(tài)信息：“注意：為了符合我們的尺寸限制，該圖片已經(jīng)被剪裁。”

2 至于Postmate“簡約至極”的警告窗口：如果它都不能解釋清楚自己是什么，那么顯然就沒有必要跳出這么個(gè)彈窗來唬我。畢竟我唯一能確定的是點(diǎn)“No”不會(huì)導(dǎo)致什么糟糕的結(jié)果。

3 Window手機(jī)的升級(jí)信息：你的操作系統(tǒng)就不能自行聯(lián)網(wǎng)檢查當(dāng)前時(shí)間和日期嗎，哥？更別提相關(guān)的技術(shù)（NTP）已經(jīng)有三十多年的歷史了。

4 谷歌Chrome向用戶請(qǐng)求位置信息的方式顯然太過唐突，為什么不把它放到搜索結(jié)果或頁面最上方的某個(gè)banner里呢？這么一個(gè)彈窗真的顯得你對(duì)我們用戶的個(gè)人隱私饑渴難耐…

5 Photoshop: 默認(rèn)設(shè)置。你可以通過行動(dòng)條（action banner）的形式告訴用戶如何自定義選項(xiàng)，亦或是一個(gè)小教程也是可以的。

*Gmail在發(fā)送一封郵件后的“撤銷發(fā)送”banner算是一個(gè)很好的例子。這比跳出一個(gè)“你確定要發(fā)送這封郵件嗎？”的模態(tài)窗口要好得多。

我為大家準(zhǔn)備了一份清單，你們可以打印出來貼在自己的辦公桌前。當(dāng)你決定要在應(yīng)用里添加警告或錯(cuò)誤窗口時(shí)可以讀一讀。

對(duì)于錯(cuò)誤信息最重要的三件事

不要濫用警告窗口來展示那些不必要的信息，不然人們會(huì)因此而忽視那些真正重要的東西。

不要臆想人們能懂你的信息是什么意思。他們可能在問題發(fā)生的好幾天后才看到你的這份“大禮”，因此記得始終包含足夠的信息來讓用戶理解問題發(fā)生的前因后果。

使用友好、非技術(shù)性、不那么嚇人的語氣。

你的錯(cuò)誤窗口應(yīng)該讓外行都能一下看懂。

*對(duì)最后一條不確定？找一個(gè)不懂技術(shù)的人看一下然后讓他用自己的話重述一遍。

你們能在評(píng)論區(qū)里告訴我Medium的這個(gè)錯(cuò)誤信息有哪里可以提升嗎？

本文原作者：Thomas Fuchs；譯者：勵(lì)定洲；來源：簡書