网页表单标题和输入框排列方式设计技巧
- 2021-08-18
- 来源/作者： 优设/ 情非得已
- 8 次浏览
表单是许多小元素的集合。标题和输入框的排列起着重要作用。标题应该放在输入框的左侧还是上方？左边还是右边？如何安排表格以提高完成率？
标题和输入框常见的排列方式
1. 放在输入框左边，而且靠左对齐
2. 放在输入框左边，但是靠右对齐
3. 放在输入框上面
4. 放在输入框里面
排列方式的比较
到底这四种排列方式有什么不一样呢?其实这些排列组合最大的影响都在于用户视线的移动，在第一种排列方式中，用户的视线先看到标题，由于靠左对齐的缘 故，我们可以看到表单的左侧有着很整齐的虚拟标线，用户的视线会跟随着这条虚拟路径前进，他们会舒服的看完所有的标题，大概的这张表单要求用户输入什么数据。
但是由于标题靠左的关系，标题和输入框之间的关系就不是这么明显，距离也不固定，使用者要来回在标题-输入框之间呈现Z型的浏览路径，所以对用户而言输入上会稍微产生一点障碍，当然也就增加了完成表单的时间。
第二种排列方式可以减少上面所提到的困扰，因为标题靠右对齐，标题和输入框之间的关系既清楚又明显，Z型路径变短了，输入数据就会比较轻松。但是由于左侧的虚拟标线也变得崎岖，用户对于整个表单的概念就会稍微减低，但还不致于造成障碍。
第三种排列方式是直接把标题放在输入框上面，这个方式完全消除了让人感到烦躁的Z型路径，从头到尾可以较为流畅的阅读与完成表单，左侧的虚拟标线也很整齐，所以使用者的输入时间也比较短。唯一的缺点是表单看起来变长了，让使用者心理上感觉好像会花最多时间。
最后一种方式最常出现在注册或登入的表单上面，把标题直接和输入框结合，当使用者开始输入的时候，在输入框里的标题便慢慢淡出。视觉动线流畅、垂直高度 短、也很容易快速浏览表单要求的项目。这个方式最大的缺点大概就是当用户开始输入数据的时候，标题就消失了，偶尔会让使用者产生混淆。
这四种排列组合各有优缺点，适用于不同的地方。设计者可以考虑各种情况，采用不同的排列组合。如果你的网站对垂直空间要求很高，第三种布局就不能采用；如果您需要用户快速填写表单，第一种安排可能不是一个好的选择。
