在表单中，标签用来提出问题，输入框用来填写答案，而动作按钮则用来执行最终的提交。

一、主次动作

表单中的动作按钮，包含两种类型，一种是有利于表单提交完成的，这类动作按钮，我们称之为主动作按钮。常见的有：“下一步”、“提交”、“完成”“登录”等

还有一类动作按钮，则是有悖于表单提交完成的，这类动作按钮，我们称之为次动作按钮，常见的次动作按钮有：“返回”、"取消"、“上一步”、“预览”等。

由于次动作与表单完成的目标相悖，所以一直以来，有很多设计者主张，在进行表单设计时，减少或者取消次动作按钮的使用。

多数设计者更倾向于在主次动作中通过某些设计处理机制，以达到强化主动作，而弱化次动作的目标。比如通过配色或样式特征的差异。最常见的设计处理方法是，在设计主动作按钮样式时，采用实体按钮，而在设计次动作按钮时，则使用强调级别较低的文字按钮。

当然使用不同的配色也能达到同样的目的，比如主动做使用主色或者深色，次动作使用较浅的灰色。

还有的设计者为了表单样式美观，在主动做和次动作按钮选择中，都使用了实体按钮，为了达到区分二者的目的，将主动做按钮设计成绿色，而将次动作设计成红色。这种处理方案虽然能够有效区分主次，但由于红色多表意禁用，或者出错，很容易让用户产生不适。

二、按钮排布类型

我们在表单设计中，有时候会反复调整按钮摆放位置，一方面我们有表单设计美观性的诉求，但另一方面我们需要重点关注用户的提交效的。那什么的按钮排布方式更利于用户提交呢？为此我们归纳了5种常见按钮排布类型。

A型按钮排布方案中，主动做按钮和输入框对齐，这为用户提交提供了清晰的路径，所以这种类型的按钮排布方式，更利于用户提交。用户在使用这种按钮排布方式时，提交效率最高

B型按钮排布方案中，相较于A型按钮排布，主次按钮位置互换，次要按钮和输入框对齐，尽管主动作按钮失去了对齐输入框的最优位置，但用户在填写表单后，仍能够在较短的视觉路径中，找到主动做按钮。但由于次动作按钮和输入框平齐，用户很可能因路径惯性，而发生错误选择。

C型按钮排布方案中，主次按钮位于表单中距离输入框较远的边角位置，用户在选择主次动作时的视线路径较长，这类按钮排布谈不上提交高效。但长路径的视线转移，可以让用户有一定的思考时间，这也能避免错误选择的发生。

D型按钮排布方案中，主次动作按钮分别位于表单的两侧，用户的视线路径会在两者间“奔波”，尽管这一设定可以有效的避免用户发生选中错误，但由此产生的视觉疲劳感，以及对动作相关性的“分割”，也是我们在方案设计时，需要认真思考的问题。

E型按钮排布方案中，主次按钮在表单页中居中排列。

这种类型的按钮排布方式，可用于窗口宽度窄小的表单页设计中，此时两个按钮的设计宽度，和窗口宽度近似。如果将这种表单设计方案，应用于宽屏网页表单中，往往不是一个很好的选择，因为这种方案既难保证设计的美观度，也无法达到高效提交的使用目标。

三、按钮状态

用户在进行表单填写过程中，为了帮助用户建立明确的填写预期，我们常常会对动作按钮的可用状态进行处理。这种处理结果，可以向用户有效传达，表单填写的完善度，比如一些表单设计中，会将默认态的主动做按钮做置灰处理。只有当表单中的必填项被填写完毕后，主动做按钮才会被激活。用户可以通过主动作按钮的激活状态，来判定自己的填写是否完善。

还有的设计者还采用了另外一种设计方案，在这种方案中，主动做按钮会被被隐藏，只有当用户表单中的必填项被填写完毕后，主动做按钮才被显示出来。这种设计方案非常糟糕，用户很可能在进入表单页后，因找不到动作按钮，而误认为是网络问题导致加载不全，或是浏览器适配问题，导致样式显示出错，他们不得不更换浏览器，来做进一步的确认。

如图，表单设计，在未完成填写前，动作按钮被隐藏，只有的那个job category 被完善后，才露出动作按钮

四、同意条款

很多表单页，都会在表单的最后部分，为用户提供一些需要勾选同意意见的选项，比如同意隐私协议，或是其他的法律文本。当然有时也会包含开通邮件订阅等利于商业营销目标的选项。

在同意条款的设计中，有的表单页设计很不恰当，因为会给用户的理解和使用带来麻烦。比如有的设计师在同意条款处，错误的使用了单选按钮。由于单选按钮不可以单独被使用，这就会给用户理解造成障碍。

如图，同意协议控件错误的使用了单选按钮

还有一些设计方案中，同意条款的复选框按钮被设计的非常隐蔽。很多用户在填写完表单中的其他的内容后，始终无法激活提交按钮，他们不得不仔细定对自己的填写项是否有误。

一个比较好的设计解决方案是把同意协议和主动作按钮结合，这样用户在点选主动作按钮时，就可以实现双重任务目标（同意和提交）。

五、提交响应

如果网络流畅，表单中的数据量不大时，表单提交往往很快的完成，但当表单数据量偏多，或是网络运行不畅，表单提交完成，通常需要等待较长的时间。在这一过程中，如果用户选择关闭网页，那么大概率会造成提交任务失败，用户会损失掉已填写内容。

有很多新手设计者，在表单设计中，往往对表单提交的极端情况缺乏深入思考，比如对表单数据量大小的预估，以及网络异常的预判。所以当用户在极端情况下使用这些产品时，就会遇到麻烦。

这类产品表单页设计的通病是，没有对流程节点进行有效关注。用户执行提交后，页面没有任何的状态反馈。这会导致用户多次反复执行重复提交。多次提交无响应后，用户会非常焦虑，进而执行关闭网页，或是重复刷新等极端操作，这类操作很可能会导致数据上传失败。

有的产品会在用户重复点击提交按钮后，给到一个文本提示框，警告用户不要重复点击提交按钮，并说明当前的数据传输正在进行中，但这种反馈方式并不友好，用户无法预知这种上传需要等待多长时间

为用户提供明确的数据上传进度条，可以有效减轻用户的焦虑，明确预期下，用户也不会重复执行提交操作。如果进度条进程缓慢，配合进度指示，再为用户提供相应的文案说明，能够很好的化解用户焦虑，比如“因提交数据量较大，该上传可能需要较长的用时，请您耐心等待”，那么用户可以确认自己的提交无误，并且上传的确需要很长时间，这样就不会因进度条进度缓慢，而乱了分寸。

Design tips

1.在表单设计中，主动做按钮利于表单任务的完成，而次动作按钮与任务完成相悖，所以在表单设计中，我们应该不用或者少用次动作按钮

2. 在表单设计中，我们可以通过样式特征以及用色处理，来区分主次动作，主动做应该被强化，而次动作应该被弱化。

3. 不要使用红色实体按钮来设计次动作，这会给用户造成理解障碍

4. 主次按钮的摆放位置不同，会影响用户的提交效率，合适的位置设定，更有利于用户完成提交

5. 在表单设计中，我们可以通过主动作按钮的状态变化，向用户传达表单填写的完善度

6. 不要在表单设计中，尝试隐藏主动作按钮，这样会给用户理解造成困难

7. 不要在同意协议条款中，为使用单选按钮

8. 同意协议和主动作按钮相结合，可以实现“一键”多用

9. 用户提交表单后，需要有明确的状态提示，来避免重复提交。

10. 表单提交进程缓慢，应该使用可视化的反馈提示，结合文字说明，安抚用户的情绪。