WEB表单设计-2清晰的浏览线

图1.1所示，简单表单的眼动跟踪数据图突出了清晰浏览线的重要性。本例中，标签、输入框及主要动作按钮构成主要垂直轴，提供了贯穿表单的单一路径。

图1.1  Etre提供的综合眼动轨迹图（热点图），表明人们填写一个简单表单时所看到的表单内容

为了进一步说明这一点，考虑下面两种表单之间的差别。第二张表单中，从第一个信息点开始一直到主要动作结束，都有清晰的浏览线，人们可以看清所用需要快速回顾的信息。第一张则采用不同的视觉处理，完成过程变成了“之”字眼动运动。通过统一布局，采用单一路径更容易处理表单所提问题。人们关注执行任务，看见表单所用问题并作出答复，从而提高完成率。

图1.2   第一个表单设计中，内容组之间采用有意义的区分，但第二个PayPal表单提供了清晰的完成路径，人们只需要遵循一条向下的直线

设计良好的浏览线能恰当设置问题之间的视觉空间，满足每对标签／输入框之间的平衡。视线能在表单中舒适移动，而不会错过任何重要信息。空间间隔合适，很大程度上取决于表单风格。但一般而言，最好采用输入框高度约50%～75%作为问题之间的间隔。

图1.3问题有节奏的流动需要之间有合适的间隔