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

大云南旅游

大云南旅游

2016-02-17 00:18

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

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

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

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

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

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

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

3. 放在输入框上面

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

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

4. 放在输入框里面

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

排列方式的比较

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

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

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

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

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

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

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

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

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

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

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

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

展开更多 50%)
分享

猜你喜欢

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

平面设计 海报设计 广告设计 画报设计 签名设计 服装设计 名片设计 画册设计 版式设计 商标设计
网页表单标题和输入框排列方式设计技巧

网页设计关于表单输入框技巧代码

Web开发
网页设计关于表单输入框技巧代码

什么是极简主义 如何打造极简风格家居

家居设计 装修设计
什么是极简主义 如何打造极简风格家居

网页设计关于表单输入框的技巧代码

Web开发
网页设计关于表单输入框的技巧代码

网页输入框的样式触发效果

Web开发
网页输入框的样式触发效果

2017榻榻米书房设计装修效果图 榻榻米书房设计图片

榻榻米 书房 装修设计 书房设计 平面设计
2017榻榻米书房设计装修效果图 榻榻米书房设计图片

Javascript对网页输入框的字数限制

Web开发
Javascript对网页输入框的字数限制

关于搜索输入框

Web开发
关于搜索输入框

2017春夏女装风衣外套流行趋势

服装设计 平面设计 设计 服装搭配
2017春夏女装风衣外套流行趋势

5招摄影技巧教你打造唯美少女风作品

5招摄影技巧教你打造唯美少女风作品

当用户体验设计遇见色彩情感

当用户体验设计遇见色彩情感
下拉加载更多内容 ↓