表单是最常见的交互形式之一，可以说每名产品的设计师——无论是产品经理、交互设计师还是视觉设计师，都会接触到表单的设计。在这篇文章中，我们将按用户路径中的时间先后顺序，与大家分享「从头到尾」设计 web 表单的那些 tips。

我们将用户的交互行为分为了「阅读表单-填写表单-提交表单」3个阶段，再分别总结各个阶段中的共5个设计要点：

除了 web 表单本身的设计，本文还简单总结了主要应用于PC端的 web 表单与移动端表单的区别，分为设备尺寸、输入方式、输入场景3点，分享在本文最后。

阅读表单

1. 让用户乐意填写

无论表单多简单，对用户来说，填写毕竟是件麻烦事儿。那么怎样才能让他们乐意填写？一方面，用流畅的视觉走向保证可读性，清晰美观的表单当然更令人愉快；另外，告知用户必要的信息，增强用户填写的动机或降低用户填写的顾虑。

1.1 流畅的视觉走向

大体上，单列布局比多列布局有着更流畅的视觉走向。

标签若长短不一，置于输入项顶部比置于左侧更整齐也更易读。

当然，并没有严格的设计规则，单列还是多列、标签置于顶部还是侧部，都要综合考虑界面空间大小、输入框长短等因素。

1.2 事先告知必要的信息

从趋利避害的道理来看，应该告知用户填写表单的好处或者不填的坏处。注意，这里的「坏处」也需要使用积极的语气，比如应说明「填写手机号，方便找回密码」，而不应说明「填写手机号，否则无法找回密码」。

另外，对于敏感的金钱、隐私信息，可以事先说明不会泄露，打消用户的顾虑。

填写表单

2. 帮助用户轻松填写

2.1 合适的默认字段或选项

通过推测用户行为，设计师应该为表单设置合适的默认值，减少用户输入。

在寻找表单默认项的案例时，我们发现了一个很有趣的情况。以下是携程、去哪儿、飞猪3个产品的酒店预订表单，都截图于3月1日下午4点。而它们的默认入住时间却都不同：携程默认在当天，去哪儿在2天后，飞猪在3天后。

为什么？也许可以从产品目标用户的角度思考。简单推测，从界面风格和功能模块可以看出，携程的产品定位最为商务，而商务人士的出行可能是即时决定、马上出发的。而飞猪最为年轻化，年轻用户订酒店的主要场景（之一）是旅行，而旅行通常是需要提前做好准备的，因此飞猪的默认时间最晚。

2.2 标明「选填」或「必填」

其实并非「选填」或「必填」哪个更应该标明，而是说标明少数情况就行了，减少相同信息的重复。对于大部分表单来说，都是必填项多于选填项，这时候，标明选填项就可以了。

当必填项少于选填项，应该表明必填项，如下图右边的淘宝的新增收货地址表单。而左边的表单，所有表单项都打上了红色的星号，是不是显得有点累赘？

2.3 支持记忆和联想输入

历史输入记忆和邮箱输入联想是大家都很熟悉的例子，就不再赘述。这里分享另外一个场景：不记得自己有没有注册过某产品，于是点了注册，输入手机号或邮箱被提示注册过，然后从注册窗口切到登录窗口，又要再次输入一次刚刚输入过的内容。

这个时候登录框如果能带入刚刚在注册时输入的内容，就不用再重复操作。 Twitter 具备这一功能，令人感觉很贴心。

其实，前一种表单的设计师可能也想到了这一点。这里就涉及到需求分级、投入产出比的问题。我所提到的场景属于非常小众的意外情况，能带入字段，用户会很惊喜；不能，也不会给用户和产品造成什么损失。对于还在完善基本功能的产品来说，无法也不值得为这种细节投入设计、开发资源。而 Twitter 已经到了成熟期，需要且能够不断打磨设计细节，然后才有了这样细致的考量。