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

以寧(ning)波(bo)銀(yin)(yin)行直銷銀(yin)(yin)行為(wei)例，當你想購買 4000 元的直投項(xiang)目的時候，點擊「立(li)即購買」按(an)鈕，進(jin)入(ru)「確認支付頁(ye)面」，點擊「去(qu)支付」按(an)鈕，這(zhe)時候彈出一個對話框，告訴你賬戶(hu)余額不(bu)足。具(ju)體多少余額也沒有說(shuo)清楚，你立(li)馬去(qu)「我的賬戶(hu)」里看了(le)余額再(zai)返(fan)回購買，這(zhe)時發現項(xiang)目都(dou)被人搶光(guang)了(le)，瞬(shun)間奔(ben)潰(kui)。

從這(zhe)(zhe)個(ge)虛擬案(an)例(li)中(zhong)，我們可(ke)以看出(chu)錯誤(wu)(wu)提示(shi)對于產品用戶體驗來(lai)說是極(ji)其(qi)(qi)重要的(de)，那(nei)么如(ru)何才能給(gei)用戶提供合適(shi)友好的(de)錯誤(wu)(wu)提示(shi)呢？什(shen)么是錯誤(wu)(wu)提示(shi)要了(le)解(jie)什(shen)么是錯誤(wu)(wu)提示(shi)，我們應該首先了(le)解(jie)錯誤(wu)(wu)提示(shi)的(de)由來(lai)。用戶在填寫(xie)信息的(de)時候難免會(hui)出(chu)錯，例(li)如(ru)，表單(dan)太長他們可(ke)能會(hui)忘記填寫(xie)其(qi)(qi)中(zhong)的(de)一項，或者輸入(ru)了(le) 14 位(wei)的(de)手機號碼，又(you)或者輸入(ru)的(de)密碼中(zhong)只有數字沒有字母過于簡單(dan)等(deng)等(deng)。這(zhe)(zhe)個(ge)時候我們應該給(gei)用戶一個(ge)提示(shi)，讓他們了(le)解(jie)當前的(de)錯誤(wu)(wu)狀(zhuang)態。這(zhe)(zhe)就是我們常說的(de)錯誤(wu)(wu)提示(shi)。

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

 目(mu)前來說(shuo)(shuo)，彈(dan)出框(kuang)(kuang)可(ke)以說(shuo)(shuo)是(shi)最常見的(de)(de)(de)(de)錯誤(wu)(wu)提示形(xing)式(shi)。因(yin)(yin)為彈(dan)出框(kuang)(kuang)的(de)(de)(de)(de)空間(jian)比較大，可(ke)以很完整的(de)(de)(de)(de)向用(yong)(yong)戶(hu)告知當(dang)前的(de)(de)(de)(de)錯誤(wu)(wu)狀(zhuang)態并且(qie)闡(chan)明(ming)錯誤(wu)(wu)原(yuan)因(yin)(yin)以及如(ru)何更(geng)正(zheng)。但是(shi)彈(dan)出框(kuang)(kuang)這(zhe)(zhe)種形(xing)式(shi)也有自身(shen)的(de)(de)(de)(de)缺陷(xian)，那就(jiu)(jiu)是(shi)用(yong)(yong)戶(hu)如(ru)果想更(geng)正(zheng)錯誤(wu)(wu)就(jiu)(jiu)必須(xu)關閉這(zhe)(zhe)個(ge)彈(dan)出框(kuang)(kuang)，這(zhe)(zhe)樣那些錯誤(wu)(wu)信息就(jiu)(jiu)看不(bu)到(dao)了(le)。在一些特殊情況下錯誤(wu)(wu)信息比較冗長，你(ni)沒有辦法短時間(jian)內記住，那么就(jiu)(jiu)無(wu)法完成修改了(le)。

2.頁面

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

3.標簽提示

現在還有(you)很(hen)(hen)多設計(ji)師(shi)開(kai)始將(jiang)錯(cuo)誤(wu)(wu)提(ti)示做成文字(zi)標簽形(xing)式(shi)，將(jiang)其和控(kong)(kong)件(jian)放在一(yi)起(qi)。這(zhe)樣子用戶就可以很(hen)(hen)容易的(de)讀取錯(cuo)誤(wu)(wu)信息，一(yi)眼(yan)就能看(kan)出(chu)(chu)來哪(na)里出(chu)(chu)錯(cuo)了(le)，不用根據提(ti)示的(de)控(kong)(kong)件(jian)名(ming)稱去尋(xun)找出(chu)(chu)錯(cuo)的(de)位(wei)置，因為錯(cuo)誤(wu)(wu)提(ti)示就在發生(sheng)錯(cuo)誤(wu)(wu)控(kong)(kong)件(jian)的(de)旁(pang)邊(bian)。此外還很(hen)(hen)容易改正(zheng)，因為用戶不用再跳轉頁面或去記(ji)那些冗長(chang)的(de)錯(cuo)誤(wu)(wu)信息。

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

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

2.文(wen)字簡潔易(yi)懂

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

1.輸入提醒

我(wo)們(men)可(ke)以(yi)用(yong)一句話或(huo)者一個(ge)例子來向(xiang)用(yong)戶(hu)介紹(shao)要輸入(ru)什么樣的信(xin)息(xi)，這個(ge)就是輸入(ru)提醒。我(wo)們(men)要保持提醒字體比(bi)較小或(huo)者配色要比(bi)標簽字體更淺，因為(wei)輸入(ru)提醒只是起到一個(ge)輔助輸入(ru)的作用(yong)，過(guo)于顯眼(yan)反而會分散用(yong)戶(hu)注意(yi)力(li)。

2.良好的默認值

如果你確(que)定對(dui)(dui)用(yong)戶(hu)足夠的(de)(de)了解，在用(yong)戶(hu)進行信(xin)(xin)息錄入(ru)的(de)(de)時(shi)(shi)候(hou)我(wo)們可以提供合理的(de)(de)默(mo)認值。因為對(dui)(dui)于(yu)用(yong)戶(hu)來說，填寫信(xin)(xin)息永遠都(dou)不是一件有趣的(de)(de)事情，合理的(de)(de)默(mo)認值可以節省用(yong)戶(hu)的(de)(de)操作時(shi)(shi)間。

3.自動完成

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