在前几节里，我们已经把表单看作一条完成任务的路径。真正落到界面上，这条路径往往由五类元素搭建而成：名称、标签、输入框、帮助文字和动作按钮。名称交代这是哪一张表单，标签负责提出问题，输入框承接回答，帮助文字给出补充说明，动作按钮用来提交结果。

①名称、②标签、③输入框、④帮助文字、⑤动作按钮。

这几类元素中，标签看似不起眼，却决定了整张表单的理解成本。用户是先看见标签，再决定要不要填、怎么填，如果标签用得不好，后面所有精心设计的控件都会打折扣。所以这一节我们只谈一件事：标签的摆放方式，也就是常说的对齐类型。

一、标签的几种常见摆放方式

在表单设计中，标签和输入框总是成对出现，但受屏幕宽度、语言长度、多设备适配等客观条件限制，二者的空间关系可以有多种安排。常见的五种结构是

• 上下对齐
• 右对齐
• 左对齐
• 框内标签
• 框上标签

不同类型各有优缺点，也适合不同业务与设备。很多设计师在实际项目中之所以犹豫，往往不是不知道有哪些选择，而是不清楚每一种到底牺牲了什么，又换来了什么。下面我们逐一拆开来看。

二、上下对齐标签

上下对齐指的是标签在上，输入框在下，两者沿垂直方向排列，并在左侧对齐。

这种结构在网页和移动端的表单里非常常见，也是大量研究认为最有利于填写效率的一种方式。它的优点主要体现在三方面。

1. 阅读与填写路径清晰

标签与输入框之间距离很近，视线可以沿垂直方向自然滑动，用户几乎不需要在横向上重新寻找位置。对于需要快速完成的大量字段，这种清晰的浏览线可以显著减轻视觉负担，让用户更容易进入节奏。

2. 扩展能力强

标签和输入框各占一行，横向空间彼此独立，不会互相挤压。当需要支持多语言，或在窄屏设备上适配时，上下结构可以容纳较长的标签文案，而不至于与输入框发生冲突，也不容易出现尴尬的折行。

如图：英文First name适配北方萨米语时，标签长度会变长

3. 便于在横向上组合相关字段