手机版WordPress网站建设中长表单只有这样设计才能留住多用户！

移动端的应用越来越广泛，多用户不再局限于 B 端产品的需求，网站建设中越来越多的企业选择同步做手机版网站。基于客户业务需求，有时候多用户在操作过程中，不可避免的需要填写很多表单，针对于移动端长表单，应该如何设计才能给多用户更好的体验呢？

移动端网页长表单的设计，按照设计思路的不同，一般有三种主方案，如下所示：

主方案 1——我们常见的设计形式，一个介面将所有表单资讯展示出来；

主方案 2——将不同的分组表单放在不同的下一级介面，多用户填写之后返回；

主方案 3——分步操作，一个介面完成一组表单内容，点选下一步进入下一组表单；

主方案 1 的设计讨论

优点：一个介面将所有表单资讯展示出来，如果想查询某些填写的资讯也变得更容易，相对于主方案 2 和 3，减少了页面跳转操作和检视。

缺点：基于移动端介面承载能力较弱，一个介面将表单所有展示出来，多用户一次性浏览和操作起来压力较大，容易使操作流程失败，导致成功率大大降低。

针对于主方案 1，多用户完成表单完成后，提交按钮有三种主要的设计方法，一种是提交按钮放在表单后，一种是提交按钮放在导航栏上。另一种是，提交按钮底部悬浮。如下图所示：

方案 1.0，如果提交按钮放在表单之后，那么多用户的视觉流和操作感觉是一致的，流畅而自然。但是会出现一个问题，多用户在输入资讯时，键盘呼叫会遮挡到提交按钮。 Android 手机上的输入法都可以点选输入法上的按钮将键盘推下去。而 iOS 原生输入法没办法推下去，只能点选其他非编辑区域才能推下键盘。这样就显得很麻烦，多用户可能会忽略掉提交按钮。

方案 1.1，解决了提交按钮会被键盘挡住的缺陷，但是视觉流和操作行为错乱，多用户在萤幕底部输入完成之后，视觉和手指要返回到顶部操作。

方案 1.2，提交按钮底部悬浮，解决了方案 1.1 的视觉流和操作紊乱的问题，解决了方案 1.0 提交按钮被隐藏的问题，但是当输入文字，调出键盘时，依旧会被挡住。

使用底部悬浮按钮的场景是操作按钮非常重要，例如手机淘宝的立即购买和加入购物车。

同时底部悬浮按钮不适用于文字操作类。例如文章说的长表单文字输入。当输入文字，调出键盘时，依旧会被挡住。

底部悬浮按钮适用于非文字输入的使用场景。从手机淘宝、新浪微博可以看出，适用于在介面中非文字输入、提供一个功能入口或者是介面非文字输入的选择资讯的确认。

主方案 2 的设计讨论

优点：与主方案 3 相比不同分组表单之前切换检视资讯方便快捷。申请流程的页简洁，填写资讯全部隐藏到下一级介面。

缺点：来回跳转，操作负荷较大，会把多用户绕晕。

在方案 2.0 中多用户填写完成的分组和未分组填写分组区分不开，将方案 2.0 进行优化，例如填写完成后，会出现已完成的标签，提示多用户已完成和未完成不同的状态 (如方案 2.1)

主方案 3 的设计讨论

Facebook 曾针对分步注册与非分步注册做过 A/B Test，其结论指出分步注册的转化率远高于非分步注册。由此可见，非分步注册强行减少注册页面，不如适当拉长战线，给多用户轻负荷的操作，让多用户在不知不觉中完成注册流程。

优点：流程分步操作，相对于主方案 1，多用户操作成功率大幅度提高。