在前一篇的校驗(yàn)思考中，我們整體概括了一些校驗(yàn)出現(xiàn)的類型，出現(xiàn)的情況，以及校驗(yàn)設(shè)計(jì)的設(shè)計(jì)原則與經(jīng)驗(yàn)。而在具體設(shè)計(jì)過程中，需要結(jié)合產(chǎn)品的業(yè)務(wù)邏輯，旅游機(jī)票預(yù)訂的全流程，是我碰到過交互邏輯中，相對(duì)比較復(fù)雜的情況，它的搜索來說也囊括了比較多的輸入項(xiàng)，和各種類別的表單控件，因此它的校驗(yàn)情況也相對(duì)比較多樣化。

我們來探討下預(yù)訂機(jī)票中的搜索表單

1、 提到校驗(yàn)，我們往往會(huì)聯(lián)系到提交表單后出現(xiàn)的錯(cuò)誤提示類信息，但是其實(shí)在填寫表單前的提示信息與表單填寫校驗(yàn)有著莫大的關(guān)系。此類提示信息能夠幫助用戶在填寫表單前，降低出錯(cuò)的可能性。

就拿機(jī)票來說，在未填寫前，有很多網(wǎng)站做了暗提示來輔助用戶更方便的操作輸入。

國(guó)內(nèi)的通常做法是提示你可以輸入的格式，實(shí)例，如：

比如淘寶，就把地址選擇的輸入格式用暗提示的方式告訴用戶可以輸入漢字拼音和首字母，清晰明了。

又比如hipmunk，就把返程日期上顯示暗提示告知用戶如果不填寫該選項(xiàng)就搜索單程結(jié)果集。

2、 在機(jī)票查詢中最常碰到的項(xiàng)比如：航程類型，地址，日歷。

a） 出錯(cuò)提示

出錯(cuò)提示的目的是要讓用戶清晰的知道錯(cuò)在哪一項(xiàng)，為什麼出錯(cuò)，怎么改。

出錯(cuò)提示有4個(gè)基本原則：即時(shí)反饋出錯(cuò)提示，出錯(cuò)提示的位置顯示恰當(dāng)并且明顯突出，提示信息內(nèi)容清晰易懂，一次性顯示全部出錯(cuò)提示。

即時(shí)反饋出錯(cuò)提示

如下圖所示：淘寶機(jī)票首頁(yè)上輸入出發(fā)城市和到達(dá)城市均為上海，會(huì)彈出新頁(yè)面并且提示錯(cuò)誤信息，對(duì)用戶來說等待時(shí)間更長(zhǎng)，相對(duì)來說這類提示信息顯示在當(dāng)頁(yè)更為合理。

而去哪的機(jī)票搜索框，當(dāng)出發(fā)城市和到達(dá)城市信息為空的情況下，或者當(dāng)日歷選擇返程比去程早的時(shí)候，點(diǎn)擊搜索之后沒有任何反應(yīng)。我們一開始以為是我們的瀏覽器出了問題，未加載到j(luò)s特效，結(jié)果換了n多個(gè)瀏覽器，發(fā)現(xiàn)它就是沒有反饋。

出錯(cuò)提示的位置恰當(dāng)并且明顯突出

提示出現(xiàn)的位置首先考慮到出錯(cuò)和當(dāng)前填寫信息位置的關(guān)聯(lián)性。關(guān)聯(lián)性包括出錯(cuò)提示位置和視覺呈現(xiàn)的效果（如：顏色，或者增加指向性箭頭等）

如下圖所示：Hipmunk在關(guān)聯(lián)性上做的就尤為突出，錯(cuò)誤信息的位置直接在填寫項(xiàng)的下方，整個(gè)搜索區(qū)域一目了然的看出哪個(gè)項(xiàng)出錯(cuò)。

如下圖所示：Travelocity在關(guān)聯(lián)性上就相對(duì)較弱，其提示項(xiàng)在搜索框的上方，出錯(cuò)項(xiàng)與提示項(xiàng)有一定距離。顯示屏幕如果較小的話，無法在一屏看到錯(cuò)誤提示和填寫項(xiàng)。

雖然Hipmunk的做法看起來比較清晰，但也有一定局限性。如果頁(yè)面空間較為擁擠，就不能適用，因?yàn)檫@有可能造成信息密集，也有可能造成頁(yè)面撐開而導(dǎo)致顯示錯(cuò)誤。

如下圖所示：Expedia的做法相對(duì)合理些，因?yàn)槠浔韱雾?xiàng)是橫向排放，因此使得錯(cuò)誤提示和出錯(cuò)框的位置相對(duì)較近，比較清晰。

如下圖所示：elong在報(bào)錯(cuò)提示的指向性中表現(xiàn)較弱，視覺上使用了較弱的提示框顏色，并且沒有箭頭指向。

標(biāo)簽： 表單設(shè)計(jì) 表單校驗(yàn) 交互設(shè)計(jì) 

版權(quán)申明：本站文章部分自網(wǎng)絡(luò)，如有侵權(quán)，請(qǐng)聯(lián)系：west999com@outlook.com
特別注意：本站所有轉(zhuǎn)載文章言論不代表本站觀點(diǎn)！
本站所提供的圖片等素材，版權(quán)歸原作者所有，如需使用，請(qǐng)與原作者聯(lián)系。