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

  • 经验类型经验/观点
  • 经验属性原创文章
  • 经验版权署名
1753 0 2 2016-12-08

图1.1所示,简单表单的眼动跟踪数据图突出了清晰浏览线的重要性。本例中,标签、输入框及主要动作按钮构成主要垂直轴,提供了贯穿表单的单一路径。Image title图1.1  Etre提供的综合眼动轨迹图(热点图),表明人们填写一个简单表单时所看到的表单内容


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

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


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

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

全部评论:0条

更多作品

发表评论

取消

点击右上角
分享给朋友吧

分享到

取消

每人每天仅限5票,快给你心仪的作品鼓励的一票。

投票