本文是我在学习了《案例讲解 | 移动端的长表单应该如何设计？》后，结合日常工作经验后的习作。新手上路，总结学习居多。再次感谢Echo君的原作。
基于业务需求（常见于B端产品），有时候用户在操作过程中，不可避免的需要填写很多表单。针对于移动端长表单，我们应该如何去正确的设计呢？
文本大纲：
1.三种方案
2.方案1的设计讨论
3.方案2的设计讨论
4.方案3的设计讨论
5.表单内按钮摆放位置的设计讨论
6.总结
1.三种方案
针对长表单的设计，按照设计思路不同，可以分为三种方案，如下所示：
方案1：在一个界面上展示所有的表单内容。
方案2：将表单分组，在界面上展示分好的组。将组里的表单内容放到下一级页面，用户在下一级页面填写完成后，返回上一页进行下一步操作。
方案3：分步骤操作，一个界面完成一个组的表单内容，点击下一步进入下一组表单界面。
2.方案1的设计讨论
方案1的设计优缺点
优点：所有表单内容在一个界面展示出来，与方案2、方案3相比，减少了页面的跳转，可以很方便地查看表单里面的内容。
缺点：由于移动端界面承载能力较弱，所有的表单内容在一个界面展示出来，用户一次性浏览和操作起来的压力较大，容易使操作流程失败，导致成功率大大降低。
3.方案2的设计讨论
方案2的设计优缺点及注意点
优点：填写信息的首页简洁，填写信息全部隐藏到下一级界面。与方案3相比不同的分组之间切换查看表单内容更为方便。
缺点：来回跳转，操作负荷较大，加大用户的用脑力度。
注意点：要将用户填写完成的分组和未填写完成的分组区分开来。可以加上已经完成的标签或符号来进行区分。如下图：
4.方案3的设计讨论
Facebook曾针对分步注册与非分步注册做过A/B Test，其结论指出分步注册的转化率远高于非分步注册。由此可见，非分步注册强行减少注册页面，不如适当拉长战线，给用户轻负荷操作，让用户在不知不觉中完成注册流程。
方案3的设计优缺点及注意点
优点：流程分步操作，相对于方案1，简化任务，让用户感觉到自己在一点点往前进行中，减轻了用户操作和心理压力，并且不会漏掉重要内容，减少犯错几率，操作成功率大幅度提高。
缺点：用户操作到了第三步的时候，如果需要返回第一步确认填写信息的准确性，那么用户需要两次返回操作。分步太多，容易引起用户的心理抵触情绪。一般3-5步比较合适。
注意点：
① 分步数量以及分步逻辑要合理。尽量让分步数量较少，一般3-5步比较合适。
② 表明步骤的进行方向（从左到右还是从上到下）。
③ 每一步的目的要明确。3步以上建议采用下图方案3.0的方案，导航栏上显示此分步操作目的的简短说明，每一步都有清楚准确的分步标题。
④ 要清楚地标识出当前的步数和总步数，让已完成步骤和其他步骤有所区别，标明接下来还剩几步，让用户清楚自己处于过程中的哪一步，最后一步完成时，给一个鼓励性的提示。
⑤ 允许重做每一步。让用户可以修改前几步的内容，后者检查一下。除当前步骤外所有已填写的步骤上加上跳转链接（点击跳转到对应的步骤）。
⑥ 用户填写的内容做实时保存（H5依旧适用），记录在数据库。
⑦ 用户返回前面的步骤时，同时刷新加载入数据库记录的数据。
⑧ 去掉界面上不必要的元素。让用户专注于任务。
⑨ 可以在操作完成之前，提供所有信息的整体汇总预览，让用户在最后点击“提交”之前，重新检查一遍自己所输入的内容。此条应按照具体需求决定是否加入此功能。
5.表单内按钮摆放位置的设计讨论
表单里的按钮有三种摆放位置，分别是内容区、顶部导航栏和底部悬浮。如下图：
按钮放在内容区的优缺点
优点：用户的视觉流和操作行为是一致的，顺畅自然的。
缺点：用户输入信息时，调用的键盘会遮挡到提交按钮。Android系统的键盘可以点击键盘上的隐藏按钮将键盘推下去；iOS系统原生键盘没有隐藏按钮，只能通过点击其他非编辑区域才能将键盘推下去。当表单下面是非必填选项的时候，用户需要滑动到底部才能看到提交按钮，操作过于繁重，用户可能会忽略掉提交按钮。
所以，必填表单和按钮不被键盘覆盖时或者必填表单超过一屏时，适用此方案。
按钮放在顶部导航栏的优缺点
优点：按钮的位置一直在视野内，不会被键盘挡住。
缺点：视觉流和操作行为不一致，视觉流从上往下。当必填表单超过一屏时，信息量很大，用户集中注意力滑动屏幕完成填写后，视觉流被打断，很容易忽略导航栏上的按钮，而且用户需要移动手指到屏幕顶部才能进行操作，降低提交的成功率。并且，在上述情况下，用户还没有填写完成时，很容易引导看到提交按钮的用户去点击提交按钮，导致用户犯错，容易使用户产生烦躁心理，降低提交的成功率。
所以，必填表单未被键盘覆盖，非必填被覆盖时，适用此方案。必填表单超过一屏的时候，不适用把按钮放在顶部导航栏的方案。
按钮在底部悬浮的优缺点
优点：提交按钮比较明显，不会被忽略。
缺点：当输入文本，调出键盘时，iOS系统上的底部悬浮按钮依旧会被挡住，需要来回调用推下键盘才可以看到提交按钮，操作繁重；Android系统的按钮会被钉在键盘上，但是减少了用户可视区域的面积。
所以，底部悬浮按钮适用于非文本输入的界面，或者给一个界面提供一个功能入口。适用于在界面中非文本输入、提供一个功能入口或者是界面非文本输入的选择信息的确认。
综上所述
① 必填表单超过一屏时，建议采用按钮放在内容区的方案；
② 必填表单表单超过一屏，且无文本输入时，建议采用按钮底部悬浮的方案；
③ 表单加上操作按钮不被键盘覆盖，建议采用按钮放在内容区的方案；
④ 必填表单未被键盘覆盖，建议采用按钮放在导航栏上的方案。
影响按钮摆放位置的还有其他因素，比如还有其他按钮等等，不是绝对的，要具体情况具体分析。
6.总结
方案1、方案2和方案3各有自己的优缺点，一般情况下，方案3好一些。
表单内按钮的摆放位置基本规则如下：
① 必填表单超过一屏时，建议采用按钮放在内容区的方案；
② 必填表单表单超过一屏，且无文本输入时，建议采用按钮底部悬浮的方案；
③ 表单加上操作按钮不被键盘覆盖，建议采用按钮放在内容区的方案；
④ 必填表单未被键盘覆盖，建议采用按钮放在导航栏上的方案。
规则是死板的，产品经理或者设计师应具体情况具体分析，避免被规则框住。
