移动端的表单页实在是最常见也最容易出岔子的页面，最近就因为一个长表单页的设计，产品经理和交互设计师撕了起来。正巧看到另一位设计师分享的“one thing per page”的经验（原文链接：https://www.smashingmagazine.com/2017/05/better-form-design-one-thing-per-page/），找到了一些共鸣。

两方方案大致如下：

方案A

方案B

此表单页包含多种填写方式（单选/多选/输入框）。A方案将所有填写项放置在一个页面上，使用“手风琴”将部分已选项隐藏。B方案将填写项分组，分别放置于不同页面。
哪个更清晰更简单？有人说：A方案只有一个页面，B方案有5个，肯定是A更简单呀！（笑而不语.jpg）

什么是“One thing per page”？
“One thing per page”不是指一个页面只有一个元素或者一个填写项。而是指将填写表单这个复杂的任务分成几步来完成，每个步骤由一个页面呈现。各步骤可能是以信息属性来划分（例如将填写地址和选择支付方式放在不同页面），也可能两步骤之间有填写顺序（例如先验证手机号，后设置密码）。
“One thing per page”这种设计形式非常适合移动端。移动端因为其屏幕小，页面空间受限，所以要求表单的设计要最简最精。比起PC端大空间可以让信息更全面的展示，对于移动端来说任务清晰、流程感强更为重要。总有人跟我说某个方案让用户多点了一下，页面多跳转了一次，体验很不好。别逗了好吗，用户才不关心是不是多点了一下，他们更关心我点的这一下是不是更接近成功了！

举个简单的栗子：
这是一个验证订单的页面，用户需要填写3种不同的编码（暂不管减少填写项的问题）。从数量上来看，填写内容不多，需求方希望一个页面搞定。但考虑到填写编码本身是个极复杂极容易出错的任务，并且填写3种编码还有顺序要求，最后还是分成2个页面完成。见下图
这样做的好处：
1.第一步若服务码错误就不会进入下一步，避免用户颠倒填写顺序，白填了半天（当然可以添加填写顺序的提示或完成服务码填写后当前页面再出现后面的填写项。但我更倾向减少当前页面的提示和跳动，越简单越好嘛）。
2.第二步填写的2个编码无先后顺序，且都会用到另一个硬件设备（坏掉的手机），所以把他们分为一组，放在一个页面上，方便快速填写。
3.每个页面填写的内容极少，从视觉上不会让用户感到畏惧。且没有其他干扰信息，填写或找错都更专注更方便。

“One thing per page”长什么样？

主要有2种形式 

1.一个总表单页，点击填写项跳转至单独页面进行填写，完成后返回到总表单。 

多用于需要最后确认所有信息的表单，例如填写订单页。 

总表单页看似复杂，但重要的操作都分散到各自单独的页面操作。

2.每页有一个或一组填写项，按顺序分步骤填写。 

多用于流程性很强的任务，特别是涉及到分步验证的任务。且不需要进行最后的信息确认，例如注册、申请售后等

One thing per page 有什么优点？
1. 降低认知负荷
复杂的表单填写任务被拆分成了若干小任务，每个页面承载的内容也就少了，因此
①信息少，干扰就少，就能减少用户思考的时间，让用户能专注于当前单个任务上。
②一定程度上缩短页面，减少滚动发生。滚动并不是个大问题，但如果页面没有滚动，信息就能更直观。
③给用户最少且最有用的信息，更多信息可以藏在“详情”里。放心，如果用户真的需要某个不常见信息时，他们是不会介意多点一次的。
栗子：

千机网手机维修下单是个很复杂的任务，但是分页分步骤填写，配合简短说明和默认项，让整个过程变得简单了。

2.更容易处理错误
①填写一个短小的表单时，能更容易发现和处理错误。移动端除了采用错误项标红提示，有时也会用toast弹框提示。在各种信息中去找填写错误的项，也是挺抓狂的…
②修改细节更容易。如果发生了错误，返回到一个专门的页面去修改比去一个信息超多的页面更容易，也减少了二次错误的发生率。想象在手机屏幕小+卡顿严重+填写错误的情况下，用户面对满屏的信息，十分着急想要修正错误。结果手一滑，点出了个键盘，又一滑，点出了个滚轮…(ノಠ益ಠ)ノ彡┻━┻

3. 降低了信息丢失的风险
一个页面填写很多信息，必定会耗费大量的时间，发生意外的可能性就很大了，断网没电点错取消（当然你可以添加防错提示和自动保存）。分页面进行信息保存，完成一页保存一页，再次进入已填步骤还能直接跳过。（虽然这一条不能全部适用）

4.  给用户增加积极的反馈（特别是第二种形式）
①每完成一步，用户都会得到一个更接近于成功的反馈，增加了用户的信心。填写表单最希望看到的就是“恭喜，完成了”
②对于有验证的表单（比如只有图片验证通过了才能填写下一项），分页面填写就能避免用户不按顺序填写可能造成的错误，避免挫败感。
栗子：
网易严选注册第一步需要先输入手机号，通过图片验证，第二步才能发送手机验证码。

5.页面加载更快
页面承载元素越少，加载速度越快。这也能减少用户放弃填写的可能，增加网站信任度。

6.跟踪行为更容易
后期对页面进行跟踪优化，这个页面为什么会让大量用户离开？页面内容越少，越容易确定问题根源。

7. 解决性能问题
内容少的页面更少出现性能问题，如果出现了也很容易找到问题所在。

这种设计形式到底多有用？我没有数据，但有设计师提到，用“One thing per page”调整后的订单填写页，每年增加了200万的订单量。好惊人的数字…
 
当然，即便有了这么多好处，也不能适用所有情况。也有研究表明，单个页面例如登陆页，用户并没有因为所有填写项都在一页上就降低了填写效率。关键在于怎么将填写项更合理的分组。表单页的设计本来就是“视情况而定”，如果遇到复杂的表单，我认为“One thing per page”可以一试。
说了这么多，你认为文章开头的两种方案，哪一种更好一些呢？