Web系统中，表单作为人机信息交互的重要接口，通常由标签、信息输入控件（文本框、下拉列表、单选按钮、多选按钮等）和提交按钮组成。其中，标签一般和信息输入控件成对出现（我们暂且称这个组合为信息项）。表单中信息项的多少，往往和其相关业务的信息量大小有关，少则几个，多则几十上百个。众所周知，填写数据是Web系统中重要的用户操作之一，因此，设计一个用户友好的表单至关重要。

       为了探寻表单的设计之道，我访问了大量的Web系统，目前有两种主流方案，我根据其特点分别称之为分步表单和分组表单。它们都是在对信息项归类的基础上，分步表单将归类后的信息项拆解为由引导按钮（“上一步”“下一步”）联系起来的多个子表单，用户一次只能看见其中一个，填写完成后点击“下一步”继续，也可点击“上一步”回退，如图1；分组表单将归类后的信息项在同一页面中分组展示，理想状态下，用户填写时只需关注当前信息组，如图2。

图1

图2

       分步表单采用隐藏的方式，迫使用户将注意力集中在当前某个或某几个信息项中，在一定程度上排除了干扰，提高了所填信息的准确性；同时，分步填写能指引用户更好的梳理信息结构，加快填写速度。然而，其弊端也是相当明显：

       第一，信息展示不直观，用户很难一览信息项全貌。更严重的是，有些用户在点  击完“下一步”按钮就已忘记自己刚填的信息，这非常不利于子表单间有参照关系的信息项的填写。

       第二，修改不方便。用户若确定“上一步”中有内容填错，一定要点击按钮回退后才能修改；用户若在第N（N > 1）步时确定第1步中有信息填错，一定要点击N - 1次按钮才能修改；即便能在最后添加一个总结步骤让用户确认或修改之前所填信息以避免多次回退，那也需要用户在点击完多个“下一步”后仍记得填错的信息项，否则就只能逐项排错。

       遗憾的是，分步表单的这些弊端是“分步”这个特性本身所带来的，是很难改变的，因此我们只能按某种原则为信息项归类，使得在使用分步表单时能扬长避短。我总结了一下，该原则大概包括以下两个方面：

       第一，由业务拆分出的上下步间有明显的流程导向，“下一步”的开始建立在“上一步”完成的基础上。比如，购物结算流程，一定是先在购物车中选择商品，再填写配送信息，最后支付。

       第二，子表单间的信息项相对独立，填写当前表单不需或极少依赖上下步表单的信息。

       下面我们来看两个使用分步表单的例子。       

        1. Amazon中国（www.amazon.cn）购物结算

       登录状态下，用户在购物车中点击“进入结算中心”按钮后，依次进入“填写配送地址”、“选择送货方式”、“选择付款方式”、“检查订单”，如图3。我认为“填写配送地址”和“选择送货方式”应该合并为“填写配送信息”，原因如下：首先，配送地址和配送方式之间无明显的流程导向，换句话说，先填哪个都可以；其次，配送地址和送货时间是可以相互影响的，用户完全有可能在周五（工作日）下单的时候选择了公司为配送地址，然后在下一步中填写送货时间时想起明天（送货时间）是休息日，若想尽快得到货物，就不得不退回上一步修改地址。

图3

       2.花瓣网(huaban.com)个人信息填写

       用户注册成功后，依次进入“基本信息填写”、“兴趣领域选择”、“画板选择”三个子表单，如图4。我认为“兴趣领域选择”和“画板选择”应该合并：虽然它们有明显的流程导向，即用户一定要先选择感兴趣的领域，再选择属于这些领域的画板，但这两个信息项耦合度太高，缺乏独立性。这样可能导致的后果是——用户在选择画板的时候未发现想要的，需点击回退按钮重新选择领域。

图4

       接着我们来说说分组表单，如图2。说到其优势，一言以蔽之，分步表单的痛点就是分组表单的卖点，即其具有信息直观、修改方便的特点，但这仰仗于将所有信息项简单的放在同一表单上，如果业务所涉及的信息量较大，即便对信息项有合理的分组，也会使页面看上去很粗暴，这可能会给用户带来心理负担，从而影响数据的准确性和填写效率。那么对于信息项多的表单，有没有改进的方法呢？答案是肯定的。我想到的一种方式是将所有的分组收起来，用户进入新增表单时，展开第一个分组供其填写，其他分组什么时候展开由用户自己决定，如图5。

图5

       综合以上分析我们会发现，分步表单和分组表单是两种互补的表单，那我们为什么不考虑将它们结合起来用呢，这样产生的表单既具有分步表单流程化带来的优势，也融合了分组表单直观方便的特点。比如，在Amazon的购物结算流程中，将“填写配送信息”子表单（“填写配送地址”和“选择送货方式”合并后产生）中的信息项用分组的形式展示；或者在花瓣网的个人信息填写中，将选择兴趣领域和选择画板合并在一张分组表单中。