产品已有明确的规范和使用场景，那么统一表单标签对齐方式即可

有一些朋友私信跟我说，已经很了解表单的基础知识了，但是在设计的时候，还是总是存在纠结困扰的地方。

我感同身受，做了几年的表单设计以后，我对各类表单及设计点很清晰，但是当我开始设计新产品的表单的时候，还是经常陷入困扰、纠结，经常为了一两个很小的设计点方案和产品经理争论半天；每次坚持自己想法的时候，甚至不能很清晰且有理有据的说明，这让我一度感到很焦虑。为此我查阅大量资料，文章，就是为了解决这种说不出为什么的尴尬无力感。

我总结出来，一些我在设计中常遇到的困扰及纠结的设计点，分享给大家。

一、标签的设计疑问指南

1. 哪种标签对齐方式更好？

这个问题基本是在新建一个产品的时候才会出现，如果你做的产品已有明确的规范和使用场景，那么统一表单标签对齐方式即可。

但是，如果你需要重新定义一个新的表单规范时，那么你就需要考虑哪种标签对齐方式更好，怎样区分使用场景！

很多的前辈们通过科学实验发现，无论是在眼动仪的热图，还是在许多可用性测试的观察结果中，用户在填写网页表单时视线主要集中在输入框的左侧。他们的视线几乎不会落到输入框的右侧，甚至都不会瞟上一眼。

以此为基础，我们在网页表单设计中有4种最常见的标签对齐方式：顶对齐标签、右对齐标签、左对齐标签、行内标签。

另外还有混合对齐标签、内联标签、图标标签等，它们基本是在这4种形式上变化，不脱离本质。

每一种对齐方式都有一定的优点和局限性；因此在合适的场景下选择合适的标签对齐样式，可以提升用户的输入效率，下面我们来展开说说：

1）顶对齐标签（Top aligned labels）

顶部对齐是标签在输入域的上方，与输入域进行左对齐，这样可以节省横向空间的使用，标签和输入框位置最为靠近，用户在填写时也比较方便，移动端产品的设计中下拉的交互比左右滑动的交互更为便捷所以采用顶部标签较为常见。

从2006年7月起马泰奥·彭佐进行眼动研究，结果表明，从标签移动到输入框，顶对其最短需要50毫秒，左对齐需要500毫秒，是顶对齐的10倍，右对齐是240毫秒。

我们通过眼动数据可以看到，顶对齐是效率最高的表单填写样式，因为眼球只需要在标签和输入框之间进行上下单向运动。