目录
表单设计
前言
一、表单思维框架
二、表单五要素实战
三、填写的交互流程
四、提交反馈与结果闭环
目录
表单设计
一个完整的表单页一般由五种元素（名称、标签、输入框、帮助文字以及动作按钮）构成，如下图所示
名称用于描述表单任务，标签则负责提出问题，输入框用于用户作答，帮助文字给予填写引导，动作按钮用于任务提交。在本章的5节课程里，我将逐一介绍以上5类元素的设计要点，以及使用注意事项。本次课程我们着重讲解一下标签的使用。
在表单设计中，标签与输入框一定是成对出现，但因受客观条件（显示屏幕宽高度限制，多语言扩展要求等）的制约，二者呈现出不同的结构关系。常见的标签结构有5种类型，分别为：上下对齐、左对齐、右对齐、框内、框上。
5种结构类型的标签，各有优缺点，但少有设计者能够清晰的总结出彼此的差异，所以在面对表单设计任务时，很多设计者经常在选用何种标签完成设计上犯难。下面我们逐一讲解，这5类标签的标签特性以及使用条件。
上下对齐标签是指：标签和输入框在界面分布上，为上下结构，同时以左侧对齐方式，进行排列的标签类型，如下图所示。
上下对齐标签是在网页表单设计中，应用最为广泛的标签类型。这种类型的标签优势明显，具体总结如下。
由于上下对齐标签中，标签和输入框的距离很近，且为上下结构，这就保证了阅读和填写可以沿着垂直方向进行，这种清晰的阅读和填写路径，可以保证用户在填写这种类型的表单时，效率更高。
由于在上下对齐的标签中，标签和输入框在横向空间彼此独立，不存在冲突，所以这种类型的标签扩展性极强。当有小屏设备适配，或是本地化多语言支持需要时，设计者不会因标签长度的剧烈变化，而被迫调整表单布局。
上下对齐标签可以节省横向空间占用。如果在表单设计中，多个标签之间存在相关性，那么我们可以考虑在横向空间内，逐一增加这些标签。
由于上下对齐标签在垂直方向上，空间占用较大，如果表单设计有严格的高度限定，那么选择使用上下对齐标签进行设计，往往不是一个恰当的选择。
左对齐标签是指: 表单中全部标签，都以右对齐方式进行排列，同时这些标签和各自对应的输入框，都以水平居中方式进行组合，如图所示
如果用户对于表单要收集的数据类型较为熟悉，那么我们可以考虑，在表单方案设计时，选择使用右对齐标签。右对齐标签相较于上下对齐标签，有以下优点。
由于标签和输入框的排布在一条直线上，这就能节省大量的垂直空间。如果表单设计有高度要求，那么选用右对齐标签会是一个不错的选择。
右对齐标签中，由于标签和输入框距离很近，用户在阅读完标签问题后，能够很快的进入填写状态，所以使用右对齐标签进行表单设计时，用户的填写效率通常会很高。
虽然右对齐标签在垂直空间占用和用户填写效率上优势明显，但其在表单设计中，也有明显的不足之处，具体表现如下。
由于标签长度很难做到相同，使用右对齐标签进行设计时，标签的左侧通常不齐，这就会影响到用户对整体问题的把控。如果是在不熟悉的场景任务中，使用右对齐标签，会严重影响用户对标签上下文的理解。
使用右对齐标签进行表单设计时，如果标签长度因设备适配，或是多语言需要发生“剧烈”变化时，有时单行标签无法呈现全部内容，这时为避免和输入框冲突，就会以双行文本形式，来展示标签内容。这种展示上的变化，显然会影响到用户的阅读。
左对齐标签是指，表单中全部的标签，都按照左对齐方式进行排列，同时这些标签和各自对应的输入框，都以水平居中方式进行组合，如图所示
在表单填写过程中，如果用户对于表单要收集的数据类型较为陌生，那么我们可以考虑，在表单方案设计时，选择使用左对齐标签。左对齐标签相较于上下对齐标签、以及右对齐标签，有以下优点。
左对齐标签相较于上下对齐标签，在垂直方向上，同样有空间占用少的优点。如果表单设计有高度要求，那么我们可以考虑使用左对齐标签。
左对齐标签相较于右对齐标签，标签文案沿左侧对齐排列，用户可以通过这些排序整齐的标签，对表单结构进行整体把控。
相较于上下对齐标签，左对齐标签可以有效避免用户的阅读路径，被输入框体打断的问题。所以说，左对齐标签是三种标签中，阅读性最好的标签类型。
由于标签长度很难做到相同，使用左对齐标签进行设计时，标签的右侧通常不齐。这就会造成输入框体和标签之间的间距大小不一。这种距离的存在，会降低用户的填写速度。如果在表单填写中，用户对标签设定的问题较为陌生，那么使用左对齐标签，可以有效减缓用户的填写速度，进而让用户有更多的时间去思考问题。
尽管左对齐标签，有如上优点，但在表单设计中，其也有明显的不足之处，具体表现如下。
和右对齐标签一样，使用左对齐标签进行表单设计时，如果标签长度因设备适配，或是多语言需要发生“剧烈”变化时，有时单行标签无法呈现全部内容，这时为避免和输入框冲突，就会以双行文本来展示标签内容。这种展示上的变化，显然会影响到用户的阅读
尽管在陌生表单填写语境下，左对齐标签可以让用户留出时间，更好的思考答案。但是在熟悉的表单填写语境下，使用左对齐标签，会显著降低用户的填写效率。
框体内标签是指，标签被放置在输入框内进行展示的标签类型。如下图所示
框体内标签主要用于屏幕空间紧张的表单设计环境中，使用框体标签后，可以为我们节省近一半的屏幕空间占用。这种标签类型粗看起来非常优秀，但在使用这类标签时，需要注意以下要点。
首先，使用框体内标签应该选择用户非常熟悉的表单任务中，这是因为用户一旦在输入框内执行输入，标签就会自动消失。
其次使用框体内标签，一定要严格控制表单问题的个数，如果问题数量过多，那么使用框体内标签通常会体验不佳。试想一下，如果用户在表单中，回答了大量问题，而整个表单中的标签确全部消失不见了，那么用户将无法通过这些“消失”的标签，复核填入答案的完备性了
当我们在使用框内标签的表单中，进行答案填写时，只要输入框体被激活，标签通常会消失不见，此时我们只能按照，记忆中标签的要求填入答案。但有时这种消失也会给我们带来困扰，如果标签问题设定比较复杂，为了进一步确认即将开始的输入，是否能满足标签要求，我们不得不退出激活的框体状态。
所以有的设计方案会在用户正式开始输入前，一直保留框体内的标签内容，只有用户键入第一个文本时，标签才会消失。
但即便是这种优化，依旧解决不了，用户记忆的难题。试想一下，如果标签问题设定较为复杂，当我们输入若干文字后，突然忘记了标签要求，那么我们只能清空已输入内容，然后退出框体，才能查看到标签的全貌，可以说，这种体验非常不好。
如果我们在表单设计中，使用框体内标签，那么在视觉呈现上，标签内容也需要与答案内容做出有效区分。一般情况下，我们会在设定标签时，使会用浅色的文字，而在设定用户的答案时，使用较为醒目的深色。
同时我们也会在标签文案使用上，和用户输入文案进行区分，比如，有的输入框内的标签后会使用省略号后缀，而有的选项输入框的标签前后会使用横线符号
框体上标签是指，标签被放置在输入框内进行展示，当有内容输入时，标签会上移到输入框上或者边缘位置的标签类型。
框体上标签可以理解为框体内标签的“进化体”，他保留了框体内标签的优点（屏幕空间占用少）的同时，又弥补了其使用上不足（标签消失、问题场景和个数限制）。
框体外标签和框体内标签，在交互方式上存在明显的区别。在框体内标签的输入框，执行输入时，标签通常会消失不见。但在框体上标签的输入框中执行输入时，框内标签会移动到框体上或是靠近框体上边缘的位置处，永久保留。
框体上标签在对标签信息的保留，对于用户顺利完成表单录入意义重大，而框体内标签能节省近一半屏幕空间占用的强大优势，使得这种类型的标签被广泛应用。
在使用框上标签进行方案设计中时，一定要在最长标签长度，和最短输入框体长度之间做出评估，否则很容易造成标签溢出的问题。
混合对齐标签是指在表单方案设计中，因客观需要，杂糅使用了多个标签对齐类型，如下图所示
使用混合对齐标签时，意味着打破了设计一致性的原则，而在单一表单中，使用多种类型的对齐方式，也会让用户填写产生适应性障碍。所以在具体的方案设计中，是否选用混合对齐标签，需要设计者依据客观需要，做出均衡界定。
通过以上5种标签类型的讲解，相信你会在表单设计，选用标签类型时，更加“有理有据”。在本文的最后，我们后再通过一个表格，梳理一下，各种标签的优缺点。
1. 如果想要提升用户的录入效率，兼顾标题长度扩展（本地化多语言支持，窄屏设备适配）那么我们可以考虑选择上下对齐标签。
2. 如果用户对表单任务较为熟悉，那么我们可以选择右对齐标签进行方案设计。
3. 如果屏幕垂直空间有限，并且我们有提升用户的录入效率的打算，那么我们可以选择右对齐标签。
4. 如果用户不熟悉表单任务，想要提纲挈领的了解表单问题设定，那么我们可以选择使用左对齐标签
5. 如果我们希望用户留出时间，审慎的回答问题，那么我们可以选择使用左对齐标签。
6. 如果需要回答的问题只有一个，那我们可以选择使用框体内标签。
7. 如果表单中问题条数少，并且用户对问题熟悉且易于回答，那么我们可以选择使用框体内标签。
8. 如果表单高度有要求，同时又有设备适配以及兼顾本地化多语种，那么，我们可以考虑使用框体上标签。
9. 如果我们想要在设计中使用混合对齐标签，那么，我们需要在设计一致性和特殊需求之间，做均衡界定。