相信(xin)在(zai)日常生活中(zhong)，很(hen)多人都(dou)曾經在(zai)各家(jia)銀(yin)(yin)(yin)(yin)行的(de)網(wang)上銀(yin)(yin)(yin)(yin)行或者直銷銀(yin)(yin)(yin)(yin)行中(zhong)買過理(li)(li)財(cai)產品(pin)。各家(jia)銀(yin)(yin)(yin)(yin)行的(de)理(li)(li)財(cai)產品(pin)購(gou)(gou)買流程(cheng)都(dou)是大(da)同小異的(de)：選擇合適的(de)理(li)(li)財(cai)產品(pin)——輸入購(gou)(gou)買金額(e)(e)——確認項目信(xin)息——返回(hui)操作結果。我(wo)們假設一個(ge)情況，當用戶輸入的(de)購(gou)(gou)買金額(e)(e)超過賬戶余額(e)(e)時(shi)，我(wo)們應該(gai)怎么給用戶一個(ge)錯誤提示？

以寧波銀行直銷銀行為(wei)例，當你想(xiang)購買 4000 元的直投項目(mu)(mu)的時候(hou)，點擊「立即購買」按(an)鈕(niu)，進入「確認支付(fu)頁(ye)面(mian)」，點擊「去支付(fu)」按(an)鈕(niu)，這(zhe)時候(hou)彈出一個對(dui)話框(kuang)，告訴你賬(zhang)戶(hu)余(yu)額不(bu)足。具(ju)體(ti)多少余(yu)額也沒(mei)有說清楚，你立馬去「我(wo)的賬(zhang)戶(hu)」里看了余(yu)額再返回購買，這(zhe)時發(fa)現項目(mu)(mu)都被人搶光了，瞬(shun)間奔潰。

從這個虛擬案例中，我(wo)們可以看出錯(cuo)誤(wu)(wu)提示(shi)(shi)對于(yu)產品用(yong)戶體驗(yan)來說是(shi)(shi)極其(qi)重要的(de)(de)，那么(me)(me)如(ru)何才能(neng)給用(yong)戶提供合適友好的(de)(de)錯(cuo)誤(wu)(wu)提示(shi)(shi)呢？什么(me)(me)是(shi)(shi)錯(cuo)誤(wu)(wu)提示(shi)(shi)要了(le)解什么(me)(me)是(shi)(shi)錯(cuo)誤(wu)(wu)提示(shi)(shi)，我(wo)們應該首先了(le)解錯(cuo)誤(wu)(wu)提示(shi)(shi)的(de)(de)由來。用(yong)戶在填寫信息的(de)(de)時候(hou)難免會(hui)出錯(cuo)，例如(ru)，表單(dan)太長(chang)他們可能(neng)會(hui)忘記填寫其(qi)中的(de)(de)一項，或(huo)者輸(shu)入了(le) 14 位的(de)(de)手機(ji)號碼，又(you)或(huo)者輸(shu)入的(de)(de)密(mi)碼中只(zhi)有(you)數(shu)字(zi)沒有(you)字(zi)母過于(yu)簡單(dan)等(deng)等(deng)。這個時候(hou)我(wo)們應該給用(yong)戶一個提示(shi)(shi)，讓他們了(le)解當前(qian)的(de)(de)錯(cuo)誤(wu)(wu)狀態。這就是(shi)(shi)我(wo)們常說的(de)(de)錯(cuo)誤(wu)(wu)提示(shi)(shi)。

一個合格(ge)的錯(cuo)誤提(ti)示(shi)應該有以(yi)下(xia)兩(liang)個基本功能：向用戶報告錯(cuo)誤狀態；解釋錯(cuo)誤發生原因以(yi)及如何更正(zheng)。錯(cuo)誤提(ti)示(shi)的種類1.彈出框

目前(qian)來說(shuo)，彈出框(kuang)可(ke)以說(shuo)是最(zui)常見的(de)(de)錯(cuo)(cuo)誤(wu)提示(shi)形式(shi)。因為彈出框(kuang)的(de)(de)空間比較大，可(ke)以很(hen)完(wan)整的(de)(de)向用戶告知當前(qian)的(de)(de)錯(cuo)(cuo)誤(wu)狀態并且闡明錯(cuo)(cuo)誤(wu)原因以及(ji)如(ru)何更(geng)正(zheng)。但是彈出框(kuang)這(zhe)種形式(shi)也有自身的(de)(de)缺陷(xian)，那(nei)就是用戶如(ru)果想更(geng)正(zheng)錯(cuo)(cuo)誤(wu)就必須關(guan)閉這(zhe)個彈出框(kuang)，這(zhe)樣(yang)那(nei)些錯(cuo)(cuo)誤(wu)信息就看不(bu)到了(le)。在一(yi)些特殊情況下錯(cuo)(cuo)誤(wu)信息比較冗長，你沒有辦法(fa)短時間內記住，那(nei)么就無法(fa)完(wan)成(cheng)修(xiu)改了(le)。

2.頁面

此外，錯誤提(ti)(ti)示還可(ke)以(yi)通過載(zai)入(ru)一個(ge)(ge)(ge)新(xin)的頁面(mian)(mian)來報(bao)告給用(yong)戶。比如在(zai)你點(dian)擊提(ti)(ti)交(jiao)按鈕(niu)以(yi)后進入(ru)下一個(ge)(ge)(ge)頁面(mian)(mian)才(cai)知(zhi)(zhi)道自己(ji)剛才(cai)的輸(shu)入(ru)發生了錯誤。用(yong)戶可(ke)以(yi)通過閱讀提(ti)(ti)示知(zhi)(zhi)道如何更正(zheng)問(wen)題，但(dan)是如果想更正(zheng)這(zhe)個(ge)(ge)(ge)問(wen)題就要(yao)點(dian)擊后退按鈕(niu)，這(zhe)樣錯誤提(ti)(ti)示又不存(cun)在(zai)了，這(zhe)點(dian)和(he)彈出框很像。下面(mian)(mian)這(zhe)個(ge)(ge)(ge)例子比較(jiao)典(dian)型，用(yong)戶只知(zhi)(zhi)道沒有綁定(ding)成功，但(dan)是不知(zhi)(zhi)道具體的失敗(bai)原因(yin)，重新(xin)綁定(ding)也無法避免再(zai)次失敗(bai)。

3.標簽提示

現在還(huan)有很(hen)多設計師開(kai)始將(jiang)錯(cuo)誤提示(shi)做(zuo)成文字標(biao)簽形式(shi)，將(jiang)其和控件(jian)(jian)放在一起。這樣子用戶就(jiu)可以很(hen)容(rong)易(yi)的(de)讀取錯(cuo)誤信息，一眼就(jiu)能看出(chu)來哪里(li)出(chu)錯(cuo)了，不用根據提示(shi)的(de)控件(jian)(jian)名(ming)稱去尋找(zhao)出(chu)錯(cuo)的(de)位置，因(yin)為錯(cuo)誤提示(shi)就(jiu)在發生(sheng)錯(cuo)誤控件(jian)(jian)的(de)旁邊。此外還(huan)很(hen)容(rong)易(yi)改正，因(yin)為用戶不用再跳轉頁面或去記那些冗長的(de)錯(cuo)誤信息。

錯(cuo)誤提示設計原(yuan)則1.合理的使用配色(se)和圖標

就像(xiang)我(wo)在上(shang)面說的，錯(cuo)誤(wu)提示(shi)的第一(yi)(yi)個功(gong)能(neng)就是向用戶(hu)(hu)報告當前(qian)的錯(cuo)誤(wu)狀態。但是我(wo)們沒有必(bi)要真正的給用戶(hu)(hu)顯示(shi)：“尊敬的用戶(hu)(hu)，你剛才的個人信息填寫錯(cuo)誤(wu)balabala…”。錯(cuo)誤(wu)狀態我(wo)們可以(yi)直(zhi)接通過顏色(se)和(he)圖(tu)標來完成。因為在潛意(yi)識中(zhong)，人們習慣性把(ba)紅(hong)(hong)色(se)和(he)錯(cuo)誤(wu)聯系在一(yi)(yi)起。當然(ran)考慮到現實生活中(zhong)還(huan)有相當多(duo)的用戶(hu)(hu)是紅(hong)(hong)綠色(se)盲患者，因此(ci)我(wo)們最好是紅(hong)(hong)色(se)和(he)圖(tu)標搭(da)配(pei)使(shi)用。

2.文字簡潔易(yi)懂

提(ti)示文(wen)字(zi)應該(gai)盡可(ke)能(neng)(neng)的(de)(de)簡短，用(yong)(yong)戶看到一大段(duan)文(wen)字(zi)，就很可(ke)能(neng)(neng)會(hui)失去了去閱讀的(de)(de)耐心。此外我們應該(gai)避(bi)免(mian)(mian)使用(yong)(yong)專業術語，讓用(yong)(yong)戶可(ke)以更好的(de)(de)理(li)解。例如你填(tian)寫身份(fen)證號，多填(tian)了一個(ge)數(shu)字(zi)，那么我們就應該(gai)提(ti)示用(yong)(yong)戶「身份(fen)證號位數(shu)出現(xian)錯(cuo)(cuo)(cuo)誤(wu)」而不是簡單(dan)的(de)(de)「身份(fen)證號驗(yan)(yan)證錯(cuo)(cuo)(cuo)誤(wu)」。因為驗(yan)(yan)證錯(cuo)(cuo)(cuo)誤(wu)的(de)(de)種類有很多種，這樣(yang)籠統的(de)(de)錯(cuo)(cuo)(cuo)誤(wu)提(ti)示會(hui)增加用(yong)(yong)戶的(de)(de)操作負(fu)擔。避(bi)免(mian)(mian)用(yong)(yong)戶犯(fan)(fan)錯(cuo)(cuo)(cuo)對于這個(ge)信息錄入這個(ge)操作來說，最好的(de)(de)用(yong)(yong)戶體驗(yan)(yan)就是避(bi)免(mian)(mian)用(yong)(yong)戶犯(fan)(fan)錯(cuo)(cuo)(cuo)，而不是等(deng)到用(yong)(yong)戶犯(fan)(fan)錯(cuo)(cuo)(cuo)了以后才(cai)思考怎么樣(yang)“亡羊(yang)補牢(lao)”。設計師應該(gai)防患于未然。

1.輸入提醒

我(wo)們可以用(yong)一(yi)句(ju)話或(huo)者一(yi)個例子(zi)來向用(yong)戶(hu)介紹要(yao)輸(shu)入(ru)什(shen)么樣的(de)(de)信息(xi)，這個就是輸(shu)入(ru)提醒(xing)。我(wo)們要(yao)保持提醒(xing)字體(ti)比較小或(huo)者配色要(yao)比標簽字體(ti)更淺，因為輸(shu)入(ru)提醒(xing)只是起到一(yi)個輔助輸(shu)入(ru)的(de)(de)作用(yong)，過于顯(xian)眼反(fan)而(er)會分散用(yong)戶(hu)注意力。

2.良好的(de)默(mo)認(ren)值

如果(guo)你確定對用戶足夠的了(le)解，在(zai)用戶進(jin)行(xing)信息(xi)錄入的時候我們可以(yi)提供合理的默(mo)(mo)認值。因為(wei)對于用戶來說，填寫信息(xi)永遠都不(bu)是一件有趣的事情，合理的默(mo)(mo)認值可以(yi)節省用戶的操作時間。

3.自動完成

當(dang)用戶在文本框里輸入(ru)時(shi)，系統猜測(ce)可(ke)能的(de)答案，顯示可(ke)選列表。自(zi)動完成可(ke)以(yi)為用戶節省時(shi)間(jian)、精力和記憶成本，避免犯錯。