表单设计: 一页只做一件事（一）

[国外设计第 172 期]

2008 年的时候，我在 Boots.com 工作。他们想做一个单页的结账页面，运用那个年代最新潮的技术，包括手风琴组件、AJAX 和客户端验证。

每个步骤（寄送地址、寄送选项、信用卡详细信息）都收在一个手风琴面板中。而每个面板都通过 AJAX 提交。提交成功后，这个面板就会收起，并且通过滑动动画展开下一个面板。

看起来就像这样：

Boots 的单页结账页面，使用了手风琴面板展现每一个步骤。

用户千辛万苦才完成了下单过程。错误难以更正，因为上下滚动并不方便。手风琴面板让人非常痛苦和分心。不可避免地，客户要求我们作出改变。

我们进行了改版，让每个面板单独成为一个页面，也就不需要手风琴和 AJAX 了。不过，我们还是保留了客户端验证，防止不必要的服务器请求。

看起来就像这样：

Boots 的结账页面：每一步都是单独的一个页面。

这个版本的转化率好多了。虽然我不记得具体数字了，我知道客户比较满意。

6 年后（2014 年），我在 Just Eat 工作，发生了同样的事情。我们设计了一个单页结账流程，其中每个部分都有独立页面。这一次，我记下了相关数据。

结果是每年能增加 2 百万订单。要清楚，这是订单量，不是利润。这个数据是基于新版本至少一周后，结账转化率提升的比例得出的。这部分转化成了订单，数量激增 52 倍。

这是我们的移动端优先的设计：

Just Eat 的结账分为多个页面。我们还在设计中进一步简化了支付页面：用户先选择“现金支付”或“银行卡支付”，然后才会转到相关的页面。可惜我们并没有对这项优化进行测试。

两年后（2016 年），GDS 的 Robin Whittleton 告诉我，把每一步分为单独页面，是一种独立的设计模式，叫做“一页只做一件事”。除了它产生的数据效果，这种模式的背后还有充分的合理性，这部分我们很快就会讲到。

不过在这之前，我们来仔细看看这种模式到底是什么。

“一页只做一件事”到底是什么意思？

一页只做一件事，并不是一定要在一个页面上只展示单一的元素或组件（虽然也可以这么做）。比如说，很可能仍然会保留页头和页尾。

类似的，也不是说每个页面上只能有一个输入框（当然，这么做也是可以的）。

这种模式是指把复杂的流程分解成多个小碎片，把每个小碎片独立一页展示。

比如说，与其把地址输入表单放在寄送选项和支付表单页面，倒不如把地址输入放在一个专用页面。

地址输入表单有许多输入框，但它对于用户来说，实际上是个单一的、独立的问题。在专用页面里回答这个问题是有道理的。

我们看看这种模式到底好在哪里。

本文转载自 Think 体验设计公众号。

原文链接：https://mp.weixin.qq.com/s/7yIAqH7nFhPHMtfmi_VeaQ