恭喜你成为UI中国推荐设计师 (详情)
//百度统计 20220402 uicn

您的意见是我们 UI 中国进步的动力!
点击立即反馈按钮,发表您的意见!
立即反馈
QQ群反馈
您也可以加入UI中国官方反馈群进行反馈!
群号:302892100
备注:反馈问题后@管理员能让我们及时了解您的意见

提交需求

赛事与广告咨询合作,请填写需求表单,我们会在第一时间与您联系!

0/20
0/200

设计大赛

  • 设计大赛
  • 发布广告
  • 发布招聘
  • 其它需求

提交完成
感谢您对UI中国的支持和信赖!
WEB表单设计-清晰的浏览线
0.0°
2016-12-08 原创文章 经验/观点 举报 1374 2 3 0

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


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

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


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

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

更新:2016-12-08

收藏

2人已收藏

mingg

人生最后悔的事,莫过于生活的不勇敢 --塔莎.杜朵

  • 9

    作品

  • 16

    粉丝

  • 29

    关注

  • Facebook iOS 10 SketchFacebook
  • WEB表单设计-标签
  • 山坡上的房屋
  • MBE风格

    猜你喜欢

      2016-12-08 原创文章 经验/观点 举报 1374 2 3 0

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

      0.0°

      你确定要举报WEB表单设计-清晰的浏览线

      如果查出恶意举报,十天内禁止提交任何举报申请。

      0/200

      上传证据: 超过10M的附件请使用网盘地址

      点击上传附件

      对谁可见:

      全部设计师
      • 全部设计师
      • 推荐设计师和认证设计师

      您确认要推荐?

      该作品发布时间:2016年12月08日

      评分

      完整度

      启发性

      勤奋性

      排版布局

      推荐心得

      建议20-200字以内

      0/200

      3
      2
      0

      账号或密码错误,请重新输入

      账号或密码错误,请重新输入

      登录

      手机号

      发送验证码 120s 验证码错误

      登录
      第三方账号登录