网页表单交互设计细节:机票搜素表单的校验

在前一篇的校验思考中，我们整体概括了一些校验出现的类型，出现的情况，以及校验设计的设计原则与经验。而在具体设计过程中，需要结合产品的业务逻辑，旅游机票预订的全流程，是我碰到过交互逻辑中，相对比较复杂的情况，它的搜索来说也囊括了比较多的输入项，和各种类别的表单控件，因此它的校验情况也相对比较多样化。

我们来探讨下预订机票中的搜索表单

1、 提到校验，我们往往会联系到提交表单后出现的错误提示类信息，但是其实在填写表单前的提示信息与表单填写校验有着莫大的关系。此类提示信息能够帮助用户在填写表单前，降低出错的可能性。

就拿机票来说，在未填写前，有很多网站做了暗提示来辅助用户更方便的操作输入。

国内的通常做法是提示你可以输入的格式，实例，如：

比如淘宝，就把地址选择的输入格式用暗提示的方式告诉用户可以输入汉字拼音和首字母，清晰明了。

又比如hipmunk，就把返程日期上显示暗提示告知用户如果不填写该选项就搜索单程结果集。

2、 在机票查询中最常碰到的项比如：航程类型，地址，日历。

a） 出错提示

出错提示的目的是要让用户清晰的知道错在哪一项，为什麽出错，怎么改。

出错提示有4个基本原则：即时反馈出错提示，出错提示的位置显示恰当并且明显突出，提示信息内容清晰易懂，一次性显示全部出错提示。

即时反馈出错提示

如下图所示：淘宝机票首页上输入出发城市和到达城市均为上海，会弹出新页面并且提示错误信息，对用户来说等待时间更长，相对来说这类提示信息显示在当页更为合理。

而去哪的机票搜索框，当出发城市和到达城市信息为空的情况下，或者当日历选择返程比去程早的时候，点击搜索之后没有任何反应。我们一开始以为是我们的浏览器出了问题，未加载到js特效，结果换了n多个浏览器，发现它就是没有反馈。

出错提示的位置恰当并且明显突出

提示出现的位置首先考虑到出错和当前填写信息位置的关联性。关联性包括出错提示位置和视觉呈现的效果（如：颜色，或者增加指向性箭头等）

如下图所示：Hipmunk在关联性上做的就尤为突出，错误信息的位置直接在填写项的下方，整个搜索区域一目了然的看出哪个项出错。

如下图所示：Travelocity在关联性上就相对较弱，其提示项在搜索框的上方，出错项与提示项有一定距离。显示屏幕如果较小的话，无法在一屏看到错误提示和填写项。

虽然Hipmunk的做法看起来比较清晰，但也有一定局限性。如果页面空间较为拥挤，就不能适用，因为这有可能造成信息密集，也有可能造成页面撑开而导致显示错误。

如下图所示：Expedia的做法相对合理些，因为其表单项是横向排放，因此使得错误提示和出错框的位置相对较近，比较清晰。

如下图所示：elong在报错提示的指向性中表现较弱，视觉上使用了较弱的提示框颜色，并且没有箭头指向。