向左走、向右走?表单元素设计大揭密

发布时间:19-11-09

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

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

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

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

3. 放在输入框上面

4. 放在输入框里面

排列方式的比较∴

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

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

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

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

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

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

表单除了要当温Ф柔的店员,也是充满了学问呢!

本文⿻作者Taco Chen

{{wanzhanqun_analysis}} {{website_analysis}} {{website_copyright }}