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

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

表单应该只有一列

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

把标签放到顶部

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

把标签与输入框成组排列

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

避免全大写标签

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

如果选项少于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%的人还看了以下文章

  • 网页设计中字体运用的12个技巧一超实用!

    网页设计中字体运用的12个技巧一超实用!网页设计中字体运用的12个技巧一超实用!网页设计中字体运用的12个技巧一超实用!网页设计中字体运用的12个技巧一超实用!

    文字、文本排版是日常网站设计工作中经常用到,看似简单的文字,实际上排版也是很有讲究。 1. 了解字体的性格 每个字体都有性格,人们比较喜欢一些有特色的东西。那么这些被喜欢的存在什么规则呢,了解你的目标人群,知道你文档的用途,选择一类字体,使用你的目标人群所期望的字体,是你的文档的用途所需要的字体。 更多请阅读:网页设计字体篇:字体的性格 2. 避免使用默认字…

    2019年10月26日 网页设计
    12.2K0
  • 网页制作常用特殊符号大全

    网页常用特殊符号大全-最全的网页制作特殊符号。在做网页时经常会用到一些特殊符号,本文汇总了所有常用网页制作时用到的特殊符号包括18禁、爱心符号、货币符号、箭头符号、日语字符、 皇冠符号、emoji符号等。

    2018年2月19日
    12.2K0
  • 设计师必收藏的22个设计素材网站

    设计师必收藏的22个设计素材网站设计师必收藏的22个设计素材网站设计师必收藏的22个设计素材网站设计师必收藏的22个设计素材网站

    设计素材,是设计师创意的利剑。中国网页设计对素材门户网站进行整理,给广大设计师推荐国内最好的22个设计素材网站

    2020年2月23日 网页设计
    20.3K0
  • web前端开发学习路线

    如果你是新手,准备学习web前端开发的话,一定要想想为什么要学习它?性趣、爱好、获得一份相关工作…… 定位好自己,持之以恒,然后是多学、多思、多练、多交流、多总结,发现自己的问题,然后克服。在状态不好的情况下,要及时调整,多向大牛请教,那样往往能让自己成长的快,切勿急躁。 初学web前端开发可以看一些入门视频教程,之后可以买一些书,做一些小项目,要学会分析自…

    2018年1月18日
    9.9K0
  • 最完善的前端开发流程(详解)

    前端侧重于人机交互和用户体验,后端侧重于业务逻辑和大规模数据处理。理论上,面向用户的产品里,所有问题(包括产品、设计、后端、甚至看不见的问题)的表现形式,都会暴露在前端,而只有部分问题(数据问题、计算问题、安全问题等)暴露在后端,这就意味着前端起到了至关重要的承载和连接作用。 一、前端开发流程 需求评审 一般在做需求评审时,PRD里只有交互稿,尚未有视觉稿。…

    2023年1月18日
    6.3K0

发表回复

登录后才能评论