网页制作中表单的设计及优化方法

表单是网页制作中常用的元素,本文会探讨表单设计的注意事项。但这些只是通用规范,每条准则总有特殊情况。

表单应该只有一列

网页制作中表单的设计及优化方法
多列布局会扰乱用户垂直方向的视线移动。

把标签放到顶部

网页制作中表单的设计及优化方法
顶部标签的表单比左侧标签有更高的完成率。顶部标签的表单也易于移植到移动端。但是,对于有多种选择项的大量数据列表而言,请考虑使用左侧标签,因为它们在一起更易于浏览,能够减少高度,比顶部标签更贴心。

把标签与输入框成组排列

网页制作中表单的设计及优化方法
把标签和输入框贴近排列,确保项目之间留有足够高度,防止用户困惑。

避免全大写标签

网页制作中表单的设计及优化方法
全大写标签更难阅读和浏览。

如果选项少于6个,全部展示出来

网页制作中表单的设计及优化方法
把选项放入下拉选单需要用户进行两次点击,还会把选项隐藏起来。超过5项才使用下拉选框。如果超过25个选项,就要在下拉菜单中加入搜索。

不要把默认提示当做标签

网页制作中表单的设计及优化方法
把默认提示文字当做标签,意在节省空间。但这会导致许多可用性问题,Nielsen Norman Group的Katie Sherwin对此作过总结

纵向排列勾选框(和单选框)以保证易读性

网页制作中表单的设计及优化方法
纵向排列勾选框能加快浏览速度。

行动指令要具有描述性

网页制作中表单的设计及优化方法
行动指令要描述出具体行为。

逐行说明错误

网页制作中表单的设计及优化方法
告诉用户哪里错了,说明原因。

125jz网原创文章。发布者:江山如画,转载请注明出处:http://www.125jz.com/2343.html

(0)
江山如画的头像江山如画管理团队
上一篇 2018年7月30日 下午6:11
下一篇 2018年7月30日 下午9:59

99%的人还看了以下文章

  • 网页制作实战项目九:飘城旅行社(分步教程2)

    网页制作实战项目九:飘城旅行社(分步教程)精 在上一课中,我们学习了实战项目九-首页的制作,今天来实现其他主要页面:旅游资讯。 练习一:PC端固定布局 地址:http://www.125jz.com/wp-content/demo/20190113demo1.html  练习二:流体移动布局 地址:马上上线 练习三:兼容响应式布局 地址:马上上线 1.导航下…

    2019年1月22日
    5.3K0
  • 网页设计中最常用的7款字体

    字体主要分为衬线字和无衬线字。网站制作中,选用什么样的字体是比较重要。 衬线字和无衬线字的区别:左边的中文和英文字属于衬线字,右边中文和英文属于无衬线字。 衬线字指的是在字的笔画开始、结束的地方有额外的装饰,而且笔画的粗细会有所不同。 如宋体,观察比划可以看到横细竖粗的特点,这就是典型的称线字。 无衬线字体没有这些额外的装饰,而且笔画的粗细差不多。比如微软雅…

    2019年10月22日 网页设计
    8.1K0
  • 第3章CSS基础

    本章学习目标:
    了解CSS基本概念
    掌握CSS选择器的使用
    掌握在网页中应用CSS的方法
    掌握使用Dreamweaver编辑CSS的方法

    2018年3月22日
    4.2K0
  • 企业做网站选择定制开发,还是网上在线模板建站好?

    不少企业老板,要做网站,总爱先问做网站多少钱? 在《做个企业网站多少钱?》一文中,我们讲解了做网站,先要明白,价格和价值的关系,只看价格不比质量,不看实际给企业能带来多大价值的网站都是没有什么用处的,看似便宜,实际多花了钱,后期还要重做,总起来花的钱比原来还要多。想花一千的价格,还要求网站页面漂亮,功能完善,用户体验及排名都要好,这是不现实的。 企业做网站选…

    2018年12月17日
    1.8K0
  • 网页制作实战项目七:毫州文化旅游公司

    【时间要求】 2 学时( 45 分钟× 2=90 分钟) 【上机内容】 毫州文化旅游公司 【上机目的】 1 、掌握网页布局的方法和技巧 2 、掌握HTML及CSS的使用 3、掌握行为的使用 4、培养团队意识和协作精神 【上机重点】 1 、网页布局 2 、行为的使用 3 、HTML及CSS的使用 【上机难点】 1、导航栏制作 2、CSS的定义和使用 【上机教学…

    2018年5月24日 网页设计
    4.5K0
  • 两天入门React+ Node,全栈工程师培训教程(精)

    两天入门React+Node(全栈工程师培训教程),教程内容完整、脉络清晰、通俗易懂,能帮助初学者看清技术路径,快速入门。所有内容都配有 Demo 和操作指导。

    2018年2月13日
    2.6K0

发表回复

登录后才能评论