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

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

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

【 tulaoshi.com - Web开发 】

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

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

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

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

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

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

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

  主按钮和次按钮

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

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

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

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

延伸阅读
标签: 电脑入门
硬盘坏了该如何修复?MAC系统中用户们习惯了使用磁盘工具来修复。不过要是连系统也登录不了,该怎么办呢?别着急,还有fsck这个最后的救命稻草可以让你拯救自己的硬盘。现在就让图老师小编给你介绍一下fsck修复硬盘的方法吧。 fsck 这个命令行工具在很个Mac上都是预装的,不需要另行安装。不要一听命令行就感觉复杂、难其实命令行操作往往都更...
标签: Web开发
在设计网页时,没有比页面的外观更重要的了。所以,如果发现设计人员十分关注字体及字体大小,我并不感到惊奇。使用 CSS 来编辑字体有各种各样的方法,每位设计师都会有自己偏爱的设计习惯,但必须选择更能提高 用户体验 的方法。今天暴风彬彬将集中讨论字体大小的控制来体现更多的 用户体验 。 字体大小 CSS2规范中关于水平和垂...
标签: Web开发
刚刚在Google Reader里通过Gtalk联系人分享的条目,看到JunChen写的贴子《心流理论(Flow)和设计(Design)》。他简要介绍了Movable Type 的设计师Jim Ramsey的文章Designing for Flow。 Csikszentmihalyi 塞克斯哈里的Flow理论(Wikipedia上的Flow条目在这里),有时候被翻译为心流,有时候被翻译为涌流,有时候则被翻译为福乐体验。小容比...
标签: Web开发
想必大家在页面都使用过表单,如果你对单调的表单控制单元不满意,不妨看看以下几条技巧: 1、表单文本输入的移动选择:在文本输入栏中,如果加入了提示,来访者往往要用鼠标选取后删除,再输入有用的信息。其实只要加入onMouseOver="this.focus()" onFocus="this.select()" 代码到 textarea 中,一切就会变得简单多了,如: textare...
标签: Web开发
HTML表单(Form)是HTML的一个重要部分,主要用于采集和提交用户输入的信息。 举个简单的例子,一个让用户输入姓名的HTML表单(Form)。示例代码如下: form action="http://www.admin5.com/html/asdocs/html_tutorials/yourname.asp" method="get" 请输入你的姓名: input type="text" name="yourname" input type="submit" value="提交" /form ...

经验教程

780

收藏

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