发布时间：2019-8-21 分类： 电商动态
根据业务需求（常见于B-end产品），有时用户在运营过程中，不可避免地需要填写很多表格。我们应该如何正确设计移动长表？
本文大纲：
三个主要方案
主程序1的设计讨论
主体计划2的设计讨论
主要方案3的设计讨论
总结
1.三种主方案
对于长形式的设计，根据不同的设计思路，可分为三个主要方案，如下：
PS：图中的示例关键字段仅用于示例。
主要场景1：我们的通用设计表单，一个显示所有表单信息的界面。
主要方案2：在不同的低层接口上放置不同的分组表单，并在用户填写后返回。
主要方案3：逐步操作，一个界面完成一组表单内容，单击“下一步”以输入下一组表单。
2.主方案1的设计讨论
主方案1的设计优缺点
优点：界面显示所有表单信息。如果你想找到一些填充的信息，它会变得更容易。与主要方案2和3相比，减少了页面跳转操作和查看。
缺点：基于移动界面的承载能力较弱，一个界面显示所有表格，用户一次浏览和操作压力大，容易导致操作过程失败，导致降低成功率。
对于主场景1，在用户完成表单后，提交按钮有三个主要的设计方法，一个是提交按钮放在表单的末尾，另一个是提交按钮放在导航上酒吧。另一个是提交按钮暂停在底部。如下图所示：
在方案1.0中，如果提交按钮放在表单之后，则用户的视觉流程和操作感觉是一致，平滑和自然的。但是，当用户输入信息时，键盘调用将阻止提交按钮。可以通过单击输入法上的按钮来下载Android手机上的输入法。无法下推iOS本机输入法。您只能单击其他非编辑区域以按下键盘。这可能很麻烦，用户可能会忽略提交按钮。
解决方案1.1解决了键盘阻塞提交按钮的缺陷，但视觉流程和操作行为无序。在用户在屏幕底部输入完成后，视觉和手指返回到顶部操作。
在场景1.2中，提交按钮的底部被暂停，这解决了方案1.1的视觉流程和操作无序的问题，并解决了方案1.0的提交按钮被隐藏的问题，但是当输入文本时，键盘调用时键盘仍然被阻止。
使用动作按钮的底部悬停按钮非常重要，例如手机淘宝的即时购买和加入购物车。
同时，底部悬停按钮不适用于文本操作类。例如，文章说长文本输入。当您输入文本时，在调出键盘时它仍会被阻止。
底部悬停按钮用于使用非文本输入的情况。从手机淘宝和新浪微博可以看出，它适用于界面中非文本输入的确认，提供界面非文本输入的功能输入或选择信息。
3.主方案2的设计讨论
主方案2的设计优缺点
优点：切换到不同分组表单之前和之后查看信息比主解决方案更容易，更快3.应用程序进程的主页简洁，信息完全隐藏到接口的下一级。
缺点：来回跳转，操作负载很大，用户会晕。
在方案2.0中，用户填写已完成的组并且解压缩的组被分离，并且方案2.0被优化。例如，在填充完成后，将出现完成的标签，提示用户已完成和未完成的状态不同（例如方案2.1）。 ）
4.主方案3的设计讨论
Facebook已经逐步和非逐步注册进行了A/B测试，其结论表明逐步注册的转换率远高于非逐步注册的转换率注册。可以看出，非逐步注册强制减少了注册页面。最好适当地延长战线并给用户轻载操作，这样用户就可以在不知情的情况下完成注册过程。
主方案3的设计优缺点
优点：该过程是循序渐进的，与主要解决方案1相比，用户操作成功率大大提高。
缺点：如果用户已达到第三步并需要返回第一步以确认信息的准确性，则用户需要返回两次。
用户填写的信息被保存（缓存），用户返回上一步，并保留填充的数据。 H5仍然适用，用户填写的数据存储在数据库中，当用户返回上一步时，数据库中记录的数据也会刷新。
对于方案3.0和3.1。下一个按钮是不同的。哪一个拿？方案3.0视觉流程和操作流程是正常的，没有按钮被键盘阻挡，因此方案3.0是最好的。
移动端长表单设计总结
主要方案1,2和3各有优缺点。
交互过程的最重要标准之一是允许用户成功完成操作过程并确保操作过程的成功率以实现用户的目标。从这个标准来看，主要方案3是最好的。
接下来，让我们探讨一个详细的问题。提交按钮是放在顶部导航栏，信息内容区域还是底部？
这里分为4种情况：
情况1：键盘未覆盖内容区域和操作按钮。建议按钮放在内容区域
情况2：键盘未涵盖所需内容。它不需要被覆盖。建议将操作按钮放在导航栏上，如朋友圈，QQ空间和新浪微博。
情况3：所需的表单不止一个屏幕，建议的按钮放在内容区域中。
您无法将其放在导航栏上有两个原因：
视觉流量错误，从上到下，信息量非常大，当用户滑过时，它将被忽略，很难与单击右上角的下一步相关联。行业通常放在导航栏上，因为只需要一个屏幕; p>
当有太多必填字段时，您可以滑动屏幕以完成。将按钮放在右上角的导航栏中。当用户没有完成填充时，很容易点击导航栏上的按钮，这很容易引导用户犯错误。
情况4：需要多个屏幕，并且没有文本输入。建议使用底部悬浮液。
