移动端长表单设计方案

长表单是产品设计和开发时不可避免的业务

常见应对长表单的三种设计方案：

iamge

• 界面方案1：所有表单按类别放置于单页面
• 界面方案2：按大类分，子类放置于相应子界面
• 方案3：按顺序填写，填完一类进入下一页填写下一类

界面方案1讨论：

优点

1. 单页信息全面，可以快速查找和修改想要查找的内容
2. 相对界面方案2和3，减少了跳转操作，使交互逻辑更简单。

缺点

1. 表单太多，给用户造成心理压力，操作流程容易失败
2. 如果中途出现问题，造成页面清空，用户的重写操作负担大

在完成表单填写后，对于界面方案1，也对应有三种提交按钮放置方案

image

• 方案1.0：按钮放在表单最后。

• 方案1.1：按钮置于右上方菜单栏。

• 方案1.3：按钮悬浮于底部。
  三种方案的分析如下：

  方案1.0

  优：在操作流程上符合逻辑且流畅。

缺：

1. 表单很长的时候未显示提交按钮，会造成一定的迷惑性。

2. 用户在输入状态下调用键盘会遮挡提交按钮，输入最后一个表单后需要将键盘缩回才能看得见。增加了一部操作，且在一定程度上有使用户困惑的可能性。

   方案1.1

   优：提交按钮一直处于视线区域，直观明了。解决方案1.0表单过长，以及调用输入框时按钮被遮挡的问题

缺：

1. 用户在填写表单的时候是从上往下填写，提交却又要在页面上方操作，视觉流和操作行为相对混乱

2. 和界面方案1单页面组合，如果表单过多需要往下拖动填写，极有可能导致用户未填写完表单就点击了“提交”按钮，增加了误操作几率。

   方案1.3

   优：解决方案1.0表单过长按钮被遮挡问题；解决方案1.1视觉流和操作行为混乱的问题。

缺：调用输入框时按钮依旧会被遮挡

界面方案2：

优点

1. 界面简洁，按钮不会被遮挡，提交操作简单

   缺点

2. 用户需要点击进入，填写完一类后又要退出，再点击下一类，操作复杂。

3. 单页信息展示不充分，万一有误填或漏填查找极不方便。
   不需要考虑提交按钮的放置问题，因为单页内容比较简单，不存在超过一屏的内容，提交按钮放在表单之后即可。

界面方案2的缺点可在一定程度上优化，以减少用户的操作负担。如图：

iamge

1. 在主界面显示部分详细分类内容

2. 在主界面显示该分类是否完成

   界面方案3：

image

优点

1. 和方案1相比界面简单，和方案2相比操作简单

缺点

1. 严格的顺序执行，如果填到最后一页想要确认第一页的内容，需要返回两次

图中可以看到这种方案的提交按钮放置方式，一般情况下单页内容也是可控的，不存在遮挡提交按钮的情况，所以还是采取视觉流和操作行为统一的方案，即把按钮放在表单之下。

表单设计方案总结

存在即合理，没有适用于所有情况的最优解，只有根据需求选择最合适的方案。
交互流程的好坏，一个重要的标准之一就是用户是否能顺利完成流程操作，保证操作流程成功率。
facebook做过调查，方案3的流程成功率远高于方案1。

原文及图片来自公众号“UI中国”，本文加入自己的思考和理解