相信在(zai)日常生活(huo)中，很多人都(dou)曾經(jing)在(zai)各(ge)(ge)家(jia)銀行的(de)(de)網(wang)上銀行或者直銷銀行中買過(guo)理財產品(pin)。各(ge)(ge)家(jia)銀行的(de)(de)理財產品(pin)購買流程都(dou)是(shi)大同小異的(de)(de)：選擇(ze)合適的(de)(de)理財產品(pin)——輸入(ru)購買金(jin)額(e)——確認(ren)項目(mu)信息(xi)——返回操(cao)作結果。我們(men)假設一(yi)個情(qing)況，當用戶輸入(ru)的(de)(de)購買金(jin)額(e)超過(guo)賬戶余額(e)時(shi)，我們(men)應該怎么給(gei)用戶一(yi)個錯誤提示？

以寧(ning)波銀(yin)行(xing)直銷銀(yin)行(xing)為例，當你想購(gou)買 4000 元的(de)直投(tou)項目的(de)時(shi)(shi)候，點(dian)擊(ji)「立即購(gou)買」按(an)鈕，進入「確認支(zhi)付(fu)頁面」，點(dian)擊(ji)「去(qu)(qu)支(zhi)付(fu)」按(an)鈕，這時(shi)(shi)候彈出一個對話框(kuang)，告訴你賬戶余額不足。具體多少(shao)余額也(ye)沒有說(shuo)清楚，你立馬去(qu)(qu)「我的(de)賬戶」里(li)看了(le)余額再返回購(gou)買，這時(shi)(shi)發現項目都被人搶光(guang)了(le)，瞬間奔(ben)潰。

從這(zhe)個虛(xu)擬(ni)案例(li)(li)中，我(wo)們(men)可以看出(chu)錯誤提示(shi)對(dui)于產品用(yong)戶體驗來說是極其(qi)重要的(de)(de)(de)(de)(de)，那么(me)如何才能(neng)給用(yong)戶提供合(he)適友(you)好的(de)(de)(de)(de)(de)錯誤提示(shi)呢？什(shen)么(me)是錯誤提示(shi)要了(le)解(jie)什(shen)么(me)是錯誤提示(shi)，我(wo)們(men)應該(gai)首先了(le)解(jie)錯誤提示(shi)的(de)(de)(de)(de)(de)由來。用(yong)戶在填(tian)(tian)寫(xie)信息(xi)的(de)(de)(de)(de)(de)時候難免會(hui)出(chu)錯，例(li)(li)如，表單太長他(ta)們(men)可能(neng)會(hui)忘(wang)記填(tian)(tian)寫(xie)其(qi)中的(de)(de)(de)(de)(de)一(yi)項，或者輸入(ru)了(le) 14 位的(de)(de)(de)(de)(de)手機號(hao)碼(ma)，又或者輸入(ru)的(de)(de)(de)(de)(de)密(mi)碼(ma)中只有(you)數字沒(mei)有(you)字母過于簡單等(deng)等(deng)。這(zhe)個時候我(wo)們(men)應該(gai)給用(yong)戶一(yi)個提示(shi)，讓(rang)他(ta)們(men)了(le)解(jie)當前(qian)的(de)(de)(de)(de)(de)錯誤狀態。這(zhe)就是我(wo)們(men)常說的(de)(de)(de)(de)(de)錯誤提示(shi)。

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

目前(qian)(qian)來說，彈出(chu)框(kuang)(kuang)可(ke)以(yi)說是最常見(jian)的(de)錯誤(wu)(wu)提示形式(shi)。因為(wei)彈出(chu)框(kuang)(kuang)的(de)空間(jian)比(bi)較(jiao)大，可(ke)以(yi)很完整的(de)向用戶告知當(dang)前(qian)(qian)的(de)錯誤(wu)(wu)狀態(tai)并(bing)且闡(chan)明錯誤(wu)(wu)原(yuan)因以(yi)及(ji)如何(he)更(geng)正。但是彈出(chu)框(kuang)(kuang)這種(zhong)形式(shi)也有自(zi)身的(de)缺(que)陷，那就(jiu)是用戶如果(guo)想更(geng)正錯誤(wu)(wu)就(jiu)必須關閉(bi)這個彈出(chu)框(kuang)(kuang)，這樣(yang)那些(xie)錯誤(wu)(wu)信(xin)息就(jiu)看不到了。在一些(xie)特(te)殊情況下錯誤(wu)(wu)信(xin)息比(bi)較(jiao)冗長，你(ni)沒有辦(ban)法短時(shi)間(jian)內(nei)記住，那么就(jiu)無法完成修改了。

2.頁面

此外，錯(cuo)誤提(ti)(ti)示(shi)還可(ke)以通過載入(ru)(ru)(ru)一個(ge)新的(de)頁(ye)面(mian)來報告給用(yong)戶(hu)(hu)。比如(ru)在你點(dian)擊提(ti)(ti)交按(an)鈕以后進入(ru)(ru)(ru)下一個(ge)頁(ye)面(mian)才(cai)知(zhi)道(dao)自己剛(gang)才(cai)的(de)輸入(ru)(ru)(ru)發(fa)生了(le)(le)錯(cuo)誤。用(yong)戶(hu)(hu)可(ke)以通過閱(yue)讀提(ti)(ti)示(shi)知(zhi)道(dao)如(ru)何更正問(wen)題(ti)(ti)，但(dan)是(shi)(shi)如(ru)果想更正這(zhe)(zhe)個(ge)問(wen)題(ti)(ti)就要點(dian)擊后退按(an)鈕，這(zhe)(zhe)樣(yang)錯(cuo)誤提(ti)(ti)示(shi)又不(bu)存在了(le)(le)，這(zhe)(zhe)點(dian)和(he)彈(dan)出框(kuang)很像。下面(mian)這(zhe)(zhe)個(ge)例子(zi)比較典(dian)型，用(yong)戶(hu)(hu)只知(zhi)道(dao)沒有(you)綁(bang)定成功，但(dan)是(shi)(shi)不(bu)知(zhi)道(dao)具體的(de)失敗(bai)原因，重新綁(bang)定也無(wu)法避免再次失敗(bai)。

3.標簽提示

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

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

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

2.文字(zi)簡潔易懂

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

1.輸入提醒

我(wo)們(men)可以(yi)用一句(ju)話(hua)或者(zhe)一個例子來(lai)向(xiang)用戶介紹要輸(shu)入(ru)(ru)什么(me)樣的信息，這個就是輸(shu)入(ru)(ru)提(ti)醒。我(wo)們(men)要保持提(ti)醒字(zi)(zi)體比(bi)較(jiao)小或者(zhe)配色要比(bi)標簽(qian)字(zi)(zi)體更淺(qian)，因為輸(shu)入(ru)(ru)提(ti)醒只(zhi)是起到一個輔助輸(shu)入(ru)(ru)的作用，過于顯眼(yan)反而會分散用戶注意力。

2.良好的默認值

如果(guo)你確定對用戶足夠(gou)的(de)了解，在用戶進行信息錄(lu)入(ru)的(de)時(shi)候我們可以提供合理的(de)默認值。因為對于用戶來(lai)說，填寫信息永遠都不是一件有(you)趣的(de)事情(qing)，合理的(de)默認值可以節省用戶的(de)操作時(shi)間。

3.自動完成

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