相信在日常生活中，很多(duō)人(rén)都曾經在各家銀行的(de)網上銀行或者直銷銀行中買過理(lǐ)财産品。各家銀行的(de)理(lǐ)财産品購(gòu)買流程都是大(dà)同小異的(de)：選擇合适的(de)理(lǐ)财産品——輸入購(gòu)買金額——确認項目信息——返回操作結果。我們假設一個(gè)情況，當用(yòng)戶輸入的(de)購(gòu)買金額超過賬戶餘額時(shí)，我們應該怎麽給用(yòng)戶一個(gè)錯誤提示？

以甯波銀行直銷銀行爲例，當你想購(gòu)買 4000 元的(de)直投項目的(de)時(shí)候，點擊「立即購(gòu)買」按鈕，進入「确認支付頁面」，點擊「去支付」按鈕，這(zhè)時(shí)候彈出一個(gè)對(duì)話(huà)框，告訴你賬戶餘額不足。具體多(duō)少餘額也(yě)沒有說清楚，你立馬去「我的(de)賬戶」裏看了(le)餘額再返回購(gòu)買，這(zhè)時(shí)發現項目都被人(rén)搶光(guāng)了(le)，瞬間奔潰。

從這(zhè)個(gè)虛拟案例中，我們可(kě)以看出錯誤提示對(duì)于産品用(yòng)戶體驗來(lái)說是極其重要的(de)，那麽如何才能給用(yòng)戶提供合适友好的(de)錯誤提示呢(ne)？什(shén)麽是錯誤提示要了(le)解什(shén)麽是錯誤提示，我們應該首先了(le)解錯誤提示的(de)由來(lái)。用(yòng)戶在填寫信息的(de)時(shí)候難免會出錯，例如，表單太長(cháng)他(tā)們可(kě)能會忘記填寫其中的(de)一項，或者輸入了(le) 14 位的(de)手機号碼，又或者輸入的(de)密碼中隻有數字沒有字母過于簡單等等。這(zhè)個(gè)時(shí)候我們應該給用(yòng)戶一個(gè)提示，讓他(tā)們了(le)解當前的(de)錯誤狀态。這(zhè)就是我們常說的(de)錯誤提示。

一個(gè)合格的(de)錯誤提示應該有以下(xià)兩個(gè)基本功能：向用(yòng)戶報告錯誤狀态；解釋錯誤發生原因以及如何更正。錯誤提示的(de)種類1.彈出框

目前來(lái)說，彈出框可(kě)以說是最常見的(de)錯誤提示形式。因爲彈出框的(de)空間比較大(dà)，可(kě)以很完整的(de)向用(yòng)戶告知當前的(de)錯誤狀态并且闡明(míng)錯誤原因以及如何更正。但是彈出框這(zhè)種形式也(yě)有自身的(de)缺陷，那就是用(yòng)戶如果想更正錯誤就必須關閉這(zhè)個(gè)彈出框，這(zhè)樣那些錯誤信息就看不到了(le)。在一些特殊情況下(xià)錯誤信息比較冗長(cháng)，你沒有辦法短時(shí)間内記住，那麽就無法完成修改了(le)。

2.頁面

此外，錯誤提示還(hái)可(kě)以通(tōng)過載入一個(gè)新的(de)頁面來(lái)報告給用(yòng)戶。比如在你點擊提交按鈕以後進入下(xià)一個(gè)頁面才知道自己剛才的(de)輸入發生了(le)錯誤。用(yòng)戶可(kě)以通(tōng)過閱讀提示知道如何更正問題，但是如果想更正這(zhè)個(gè)問題就要點擊後退按鈕，這(zhè)樣錯誤提示又不存在了(le)，這(zhè)點和(hé)彈出框很像。下(xià)面這(zhè)個(gè)例子比較典型，用(yòng)戶隻知道沒有綁定成功，但是不知道具體的(de)失敗原因，重新綁定也(yě)無法避免再次失敗。

3.标簽提示

現在還(hái)有很多(duō)設計師開始将錯誤提示做(zuò)成文字标簽形式，将其和(hé)控件放在一起。這(zhè)樣子用(yòng)戶就可(kě)以很容易的(de)讀取錯誤信息，一眼就能看出來(lái)哪裏出錯了(le)，不用(yòng)根據提示的(de)控件名稱去尋找出錯的(de)位置，因爲錯誤提示就在發生錯誤控件的(de)旁邊。此外還(hái)很容易改正，因爲用(yòng)戶不用(yòng)再跳轉頁面或去記那些冗長(cháng)的(de)錯誤信息。

錯誤提示設計原則1.合理(lǐ)的(de)使用(yòng)配色和(hé)圖标

就像我在上面說的(de)，錯誤提示的(de)第一個(gè)功能就是向用(yòng)戶報告當前的(de)錯誤狀态。但是我們沒有必要真正的(de)給用(yòng)戶顯示：“尊敬的(de)用(yòng)戶，你剛才的(de)個(gè)人(rén)信息填寫錯誤balabala…”。錯誤狀态我們可(kě)以直接通(tōng)過顔色和(hé)圖标來(lái)完成。因爲在潛意識中，人(rén)們習(xí)慣性把紅色和(hé)錯誤聯系在一起。當然考慮到現實生活中還(hái)有相當多(duō)的(de)用(yòng)戶是紅綠(lǜ)色盲患者，因此我們最好是紅色和(hé)圖标搭配使用(yòng)。

2.文字簡潔易懂(dǒng)

提示文字應該盡可(kě)能的(de)簡短，用(yòng)戶看到一大(dà)段文字，就很可(kě)能會失去了(le)去閱讀的(de)耐心。此外我們應該避免使用(yòng)專業術語，讓用(yòng)戶可(kě)以更好的(de)理(lǐ)解。例如你填寫身份證号，多(duō)填了(le)一個(gè)數字，那麽我們就應該提示用(yòng)戶「身份證号位數出現錯誤」而不是簡單的(de)「身份證号驗證錯誤」。因爲驗證錯誤的(de)種類有很多(duō)種，這(zhè)樣籠統的(de)錯誤提示會增加用(yòng)戶的(de)操作負擔。避免用(yòng)戶犯錯對(duì)于這(zhè)個(gè)信息錄入這(zhè)個(gè)操作來(lái)說，最好的(de)用(yòng)戶體驗就是避免用(yòng)戶犯錯，而不是等到用(yòng)戶犯錯了(le)以後才思考怎麽樣“亡羊補牢”。設計師應該防患于未然。

1.輸入提醒

我們可(kě)以用(yòng)一句話(huà)或者一個(gè)例子來(lái)向用(yòng)戶介紹要輸入什(shén)麽樣的(de)信息，這(zhè)個(gè)就是輸入提醒。我們要保持提醒字體比較小或者配色要比标簽字體更淺，因爲輸入提醒隻是起到一個(gè)輔助輸入的(de)作用(yòng)，過于顯眼反而會分(fēn)散用(yòng)戶注意力。

2.良好的(de)默認值

如果你确定對(duì)用(yòng)戶足夠的(de)了(le)解，在用(yòng)戶進行信息錄入的(de)時(shí)候我們可(kě)以提供合理(lǐ)的(de)默認值。因爲對(duì)于用(yòng)戶來(lái)說，填寫信息永遠(yuǎn)都不是一件有趣的(de)事情，合理(lǐ)的(de)默認值可(kě)以節省用(yòng)戶的(de)操作時(shí)間。

3.自動完成

當用(yòng)戶在文本框裏輸入時(shí)，系統猜測可(kě)能的(de)答(dá)案，顯示可(kě)選列表。自動完成可(kě)以爲用(yòng)戶節省時(shí)間、精力和(hé)記憶成本，避免犯錯。