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

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

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

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

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

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

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

2、 在機票查詢中最常碰到的項比如：航程類型，地址，日歷。

a） 出錯提示

出錯提示的目的是要讓用戶清晰的知道錯在哪一項，為什麼出錯，怎么改。

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

即時反饋出錯提示

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

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

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

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

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

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

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

如下圖所示：Expedia的做法相對合理些，因為其表單項是橫向排放，因此使得錯誤提示和出錯框的位置相對較近，比較清晰。

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

標(biāo)簽： 表單設(shè)計 表單校驗 交互設(shè)計 

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