网页表单标题和输入框排列方式设计技巧

2016-02-17 00:18 80 1 收藏

图老师设计创意栏目是一个分享最好最实用的教程的社区,我们拥有最用心的各种教程,今天就给大家分享网页表单标题和输入框排列方式设计技巧的教程,热爱PS的朋友们快点看过来吧!

【 tulaoshi.com - 平面设计 】

表单是由许多细小的元素所组合而成的集合体,标题和输入框的排列方式有着重要的地位,标题要放在输入框的左侧还是上面?要靠左还是靠右?要怎么排列才能提高表单的完成率呢?

标题和输入框常见的排列方式

1. 放在输入框左边,而且靠左对齐

网页表单标题和输入框排列方式设计技巧,PS教程,图老师教程网

2. 放在输入框左边,但是靠右对齐

网页表单标题和输入框排列方式设计技巧,PS教程,图老师教程网

3. 放在输入框上面

网页表单标题和输入框排列方式设计技巧,PS教程,图老师教程网

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

4. 放在输入框里面

网页表单标题和输入框排列方式设计技巧,PS教程,图老师教程网

排列方式的比较

到底这四种排列方式有什么不一样呢?其实这些排列组合最大的影响都在于用户视线的移动,在第一种排列方式中,用户的视线先看到标题,由于靠左对齐的缘 故,我们可以看到表单的左侧有着很整齐的虚拟标线,用户的视线会跟随着这条虚拟路径前进,他们会舒服的看完所有的标题,大概的这张表单要求用户输入什么数据。

网页表单标题和输入框排列方式设计技巧,PS教程,图老师教程网

但是由于标题靠左的关系,标题和输入框之间的关系就不是这么明显,距离也不固定,使用者要来回在标题-输入框之间呈现Z型的浏览路径,所以对用户而言输入上会稍微产生一点障碍,当然也就增加了完成表单的时间。

网页表单标题和输入框排列方式设计技巧,PS教程,图老师教程网

第二种排列方式可以减少上面所提到的困扰,因为标题靠右对齐,标题和输入框之间的关系既清楚又明显,Z型路径变短了,输入数据就会比较轻松。但是由于左侧的虚拟标线也变得崎岖,用户对于整个表单的概念就会稍微减低,但还不致于造成障碍。

网页表单标题和输入框排列方式设计技巧,PS教程,图老师教程网

第三种排列方式是直接把标题放在输入框上面,这个方式完全消除了让人感到烦躁的Z型路径,从头到尾可以较为流畅的阅读与完成表单,左侧的虚拟标线也很整齐,所以使用者的输入时间也比较短。唯一的缺点是表单看起来变长了,让使用者心理上感觉好像会花最多时间。

网页表单标题和输入框排列方式设计技巧,PS教程,图老师教程网

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

最后一种方式最常出现在注册或登入的表单上面,把标题直接和输入框结合,当使用者开始输入的时候,在输入框里的标题便慢慢淡出。视觉动线流畅、垂直高度 短、也很容易快速浏览表单要求的项目。这个方式最大的缺点大概就是当用户开始输入数据的时候,标题就消失了,偶尔会让使用者产生混淆。

网页表单标题和输入框排列方式设计技巧,PS教程,图老师教程网

这四种排列组合的方式有着不同的优点与缺点,适合用在不同的地方。设计师可以考虑各种状况采用不同的排列组合。如果你的网站对于垂直空间很要求,那么第三种排列方式就不能采用了;如果你需要用户快速的完成表单,第一种排列方式可能不是很好的选项。

来源:http://www.tulaoshi.com/n/20160217/1576772.html

延伸阅读
标签: Web开发
-------------------------------  onkeypress="if (event.keyCode 45 || event.keyCode 57) event.returnValue = false;" ------------------------------- 在文本框的 onkeypress事件中加入以上代码,屏蔽键盘事件中,输入值不是数字则返回为false
标签: Web开发
在一般的留言本,论坛等地方都要用到文本输入框,也就是html语言中的textarea,textare包含有众多的参数,学会运用这些参数,就可以随意修改文本输入框的大小和外观,达到你想要的效果,下面就来介绍这些参数,以及如何使用这些参数。  1、cols,垂直列。在没有做样式表设置的情况下,它表示一行中可容纳下的字节数。例如cols=60,表示一...
标签: Web开发
直接看代码: 代码如下: (function($){ var keyCode={ BACKSPACE: 8, CAPS_LOCK: 20, COMMA: 188, CONTROL: 17, DELETE: 46, DOWN: 40, END: 35, ENTER: 13, ESCAPE: 27, HOME: 36, INSERT: 45, LEFT: 37, // NUMPAD_ADD: 107, // NUMPAD_DECIMAL: 110, // NUMPAD_DIVIDE: 111, // NUMPAD_ENTER: 108, // NUMPAD_MULTIPLY...
标签: Web开发
写在前面 标题党是网络上一小撮利用各种颇具创意的标题吸引眼球,以达到各种个人目的网民们的自发性组织。其主要行为简而言之即发帖的标题严重夸张,帖子内容通常与标题完全无关或联系不大。 摘录自《标题党白皮书》 引用以上网友总结,是便于大家对标题党形成普适的认知。本文并无心作弄各位,吸引眼球也只是一种尝试。希望抽空...
标签: Web开发
Sample 1:普通情况,即默认情况,AutoComplete时打开的。见:IE5-工具-内容-自动完成选项。 forminput type = text name = Email/form Sample 2:有时候我们并不需要AutoComplete,例如需要用户自己再次输入密码而非自动完成。只要将所在表单元素的autocomplete属性设置为off即可。 forminput type = password name = Password autoco...

经验教程

107

收藏

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