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

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

表单应该只有一列

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

把标签放到顶部

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

把标签与输入框成组排列

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

避免全大写标签

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

如果选项少于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个技巧一超实用!

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

    2019年10月26日 网页设计
    5.2K0
  • 字体性格—解决字体设计和使用的问题(精)

    字体性格就是通过字体结构、笔画、细节的差异,塑造出形式多变的字体,从而给人不同的视觉感受。好的字体设计,总能在第一时间准确地传达字体情感,这就是字体性格的魅力。

    2019年11月27日 网页设计
    4.9K0
  • 网页设计第一步:绘制网站草图

    网站设计草图是对页面元素布局、页面造型设计、交互表现形式等所做的手绘草图说明,是对用户需求沟通的图形表现,以便更准确无误地与用户确认需求,也对网站风格设计过程起指导作用。

    2020年2月26日 网页设计
    19.5K0
  • 福利!13款免费商用黑体字体推荐

    “黑体”结构清晰、简洁有力的字形风格能使版面显得庄重醒目并富有现代感。无论是识别性、适用面、视觉效果都非常好。本期推荐 13 款免费商用黑体,前 6 款为各大品牌开发的黑体字型,后 7 款是在传统黑体上进行设计改造,形成各有特点的黑体变体。 Adobe 和 Google 共同开发的免费黑体。字体设计优雅,显示效果优秀,可以满足不同场景下的文字显示需求。由于字…

    2023年1月20日 网页设计
    7.4K0
  • web前端开发及PHP学习网站网址大全

    学习提升网站: 翼狐网 http://www.yiihuu.com/Hack Design https://hackdesign.org/掘金 https://juejin.im/ web前端开发网站: 中国网页设计:http://www.125jz.com/Wordpress主题 :http://www.weidea.net/Wordpress教程:htt…

    2019年10月24日
    4.6K0
  • 主流网页设计页面的的宽度(尺寸)是多少?

    最新的中国网民电脑分辨率统计情况显示95%的用户在1280以上,一些用户数较多的电商网站最大宽度一般也为1190或1200,如淘宝、天猫、京东…网页宽度为1200将会成为主流,当然现在很多网站为响应式网站可以适应多种分辨率了。

    2020年3月11日
    22.9K0

发表回复

登录后才能评论