Html:网页申请表单用户体验设计简述

2016-02-19 21:13 37 1 收藏

想不想get新技能酷炫一下,今天图老师小编就跟大家分享个简单的Html:网页申请表单用户体验设计简述教程,一起来看看吧!超容易上手~

【 tulaoshi.com - Web开发 】

  对于网页设计师,制作申请表单是经常遇到的工作,如何使用户在使用你设计的表单时遇到不必要的“障碍”,本文提供了一些建议:

(本文来源于图老师网站,更多请访问https://www.tulaoshi.com/webkaifa/)

  “输入框表单元素应该合理分布,以便于使你的大脑可以处理表单框架和与之相关的页面区域”选自文章《HTML: the Definitive Guide》

  工作中可能会遇到的问题,我们通过如下图示分析一下“标签”和“表单”的关系:

  一般会应用到的视觉元素:

  对于上面提到的“左对齐方式”(便于浏览标签并减少屏幕空间),我们可以尝试规避其缺点即标签和表单框之间的距离过远。其中一个有效的方式就是增加不同的背景色,但是这样会在布局中增加很多视觉元素大约15个包括:横线,每一个背景色框和竖线,这些会扰乱我们的视线并忽视最重要的信息,正如Edward Tufte 所说“信息由不用性元素组成但同时也带来了差异性”。

  当然也不是说这种方式就不能用了,主要选用淡淡的底色或横线还是可以的,比较理想的方式如图:

(本文来源于图老师网站,更多请访问https://www.tulaoshi.com/webkaifa/)

  主按钮和次按钮

  主按钮一般是“提交”“保存”操作比其他按钮重要,需要重点提示象明亮色、背景色、加粗。一般与文本输入框上下对齐。相反如“返回”等次要按钮就要减弱其视觉提示。

  综上所述只是初步建议,最好还要经过测试,数据分析(完成率,错误等等)。

来源:https://www.tulaoshi.com/n/20160219/1625568.html

延伸阅读
如果网站是一座小院儿,注册登录页就是那扇大门,用户是走是留很大程度就取决于那道门槛的设计,今天腾讯的同学总结了7个实用的方法,能有效帮助用户提升表单填写的整体体验,宾客临门还是门可罗雀,就看这篇了。 我们几乎每天都会接触形形色色的表单,登录账号、填写信息以获取服务、发布内容等。然而填写表单的过程往往不是特别愉悦的,我们...
标签: 电脑入门
硬盘坏了该如何修复?MAC系统中用户们习惯了使用磁盘工具来修复。不过要是连系统也登录不了,该怎么办呢?别着急,还有fsck这个最后的救命稻草可以让你拯救自己的硬盘。现在就让图老师小编给你介绍一下fsck修复硬盘的方法吧。 fsck 这个命令行工具在很个Mac上都是预装的,不需要另行安装。不要一听命令行就感觉复杂、难其实命令行操作往往都更...
标签: Web开发
刚刚在Google Reader里通过Gtalk联系人分享的条目,看到JunChen写的贴子《心流理论(Flow)和设计(Design)》。他简要介绍了Movable Type 的设计师Jim Ramsey的文章Designing for Flow。 Csikszentmihalyi 塞克斯哈里的Flow理论(Wikipedia上的Flow条目在这里),有时候被翻译为心流,有时候被翻译为涌流,有时候则被翻译为福乐体验。小容比...
标签: Web开发
Ajax的流行给用户体验带来了很大程序的提升,而注册这项做为互联网最常用到的功能也自然而然的成为Ajax最常光顾的地方,实时判断用户输入的用户名是否被抢注、检测两次输入的密码是否一致,检测用户输入的邮箱格式是否正确,等等这些功能因为有了Ajax的加入,得以让我们彻底告别以往那个注册一个用户往往需要反复填写好几次表单的时代。 当...
标签: Web开发
想必大家在页面都使用过表单,如果你对单调的表单控制单元不满意,不妨看看以下几条技巧: 1、表单文本输入的移动选择:在文本输入栏中,如果加入了提示,来访者往往要用鼠标选取后删除,再输入有用的信息。其实只要加入onMouseOver="this.focus()" onFocus="this.select()" 代码到 textarea 中,一切就会变得简单多了,如: textare...

经验教程

741

收藏

68
微博分享 QQ分享 QQ空间 手机页面 收藏网站 回到头部