表单设计

上次提到最近的工作涉及到大量的表单设计，也写了一篇文章介绍自己在检查表单反馈时用到的小技巧。经过一点时间的思考，觉得有必要再进一步，从整体来描述表单设计。

前言

在没有互联网之前，人们已经经常接触表单。办一张身份证，申请一个银行账户……诸如此类的事情都需要填写一张甚至多张表单。几乎没有人会喜欢填表。首先，表单上大量的问题和术语都不是熟悉的，需要填写的地方也让人茫然：该填什么？填写的格式有没有问题？其次，花大量时间写了一大堆文字上去之后，工作人员经常会告诉你：这里填错了，重新填一张。如果是去政府机构办事，大概率还会遇到冰冷的语气与白眼。

以上这些问题，在互联网时代不但没有减少，反而越来越多。毕竟在网络上用户面对的只是不会说话的屏幕，无论是想在网上购物、发表言论、投票，还是想加入一个网络社区，都需要填表。企业想要获得用户信息，了解用户的想法，也只能让用户填表。无论是线上还是线下，表单的本质都是向用户提问题，用户提供答案。

那么，当需要设计一个表单时，该怎么做？尤其是想要设计一个对用户友好又能满足产品需要的表单，需要哪些技巧？

一、探寻

任何设计工作的开端，都要求设计师沉浸在所涉及的领域，通过感知、碰撞、思索，获得对领域知识的认知，从而才有机会寻得正确的方向。

一个表单是用户关心的吗？肯定不是。用户使用网站或者APP的目标当然不是为了填表。那企业关心表单吗？我想也不是。无论对于用户还是企业，表单都是横在他们关心的目标之间的一道障碍。对于填写表单，当然是越快越好。最理想的情况是根本不需要用户填写任何内容，而企业又能获得想要的东西。表单仅仅是工具，就如同汽车只是将人们从A点运送到B点的工具，如果打开一道门就可以从A点到B点，那还需要汽车干什么。

由此可见，设计师首先应该关注问题的本质：用户目标是什么？企业目标是什么？为了达成目标用户需要提供什么？需要用户提供的东西是否一定需要表单？有其他方式可以获得吗？在当前的技术条件下，有很多事情确实还是需要表单。比如在网上购物，需要用户填写收货信息，支付的时候还需要填写账户信息，当然，有的网站还需要注册一个账户；想在网络社区发表一点想法，需要输入文字；想分享一张照片，需要上传。

以上这些在设计师看来司空见惯的活动，背后隐藏着用户的期望。设计师需要不断的与不同的用户交谈，观察他们如何使用现有的产品，在什么时间、什么地点、什么情况下使用产品。设计师需要了解用户为何使用产品，为何要如此使用产品，他们有什么痛点，对产品有什么期望。设计师也需要不断地和产品相关人员交谈，了解产品的目标，企业的目标，技术上的限制……

在通过访谈、观察、查看资料等各种方式对用户、企业两方的背景、目标有了深入了解之后，设计师开始尝试“角色扮演”：

当你是用户的时候，对产品有什么期待？你会如何使用产品？有什么感受？对什么感到厌恶？什么让你愉悦？

这是设计前期最关键的时刻。设计师自己就是用户，并且不是单一的用户，而是典型用户特征的集合。或者说设计师自身就是用户画像的代表。由此设计师才能建立与用户的同理心，从而洞悉用户的内心。

二、定义

在探寻阶段设计师能得到什么？用户的背景知识，用户真实的目标，用户使用产品的场景，产品与用户的关系，当前的技术限制…… 由此开始思考：表单的目标是什么？需要用户提供什么？如何获得？

现实中我们需要了解一个人，会和他交谈：你叫什么名字？你从哪里来？你的职业是什么？平时你都有什么爱好？…… 简单的来看，表单就是企业了解用户的工具。企业与用户的对话，通过表单来完成。

因此，在第二阶段，设计师的目标是定义问题的范围。

每一个表单都有特定的目的，都是为了获得特定的信息。比如，在用户购物的时候，获得用户的收货地址、联系电话、收货人姓名、收货时间就是必须的，而用户的职业、年龄则是不必要的。设计师需要反复问自己：企业是想知道这个问题的答案吗？用户会怎样看到这个问题？这个问题是否表达清楚了自己的意思？这个问题的答案能不能系统自动获取？在目前的场景下问这个问题合适吗？这个问题的答案真的需要现在就得到吗？

设计师需要反复在企业需要用户提供的信息与问题之间来回巡视，并结合使用场景与背景知识，尽力去除不必要的问题。

三、设计

在谈表单设计之前，先来看看表单包含的基本元素：

– 标签。告诉用户需要回答什么问题。

– 输入域。供用户回答问题的控件，比如输入框、选择框、下拉框、滑块等。

– 操作。供用户执行动作的控件，比如提交、取消、返回、重置。

– 帮助。帮助用户回答问题的信息，比如帮助文字、图文示例。

– 反馈信息。用户输入内容后的系统反馈，帮助用户及时了解输入情况。比如正确提示、错误提示。

前面说过，表单是产品（企业）与用户之间的对话。那么，好的表单如何设计？这就如同问”如何让一场对话表现完美“一样，答案只能是”视情况而定“。毕竟目标不同，场景不同，用户不同，方式也当然有所不同。不过，虽然不同的表单设计的表现可能不同，但是一个好的表单设计还是具备一些相同的因素：

– 好的表单使用用户的语言。

– 好的表单让用户感觉平等。

– 好的表单尽量节省用户的时间。

– 好的表单不会或者尽量减轻用户的输入痛苦。

– 好的表单避免用户犯错。

– 好的表单在用户犯错时不会指责用户。

– 好的表单在用户犯错时提供及时的建议和帮助。

– 好的表单在用户茫然无助时及时提供帮助。

– 好的表单及时响应用户的输入。

– 好的表单让用户在填写之前就看到完成的路径。

– 好的表单考虑具体情境。

– 好的表单给用户预期并提供一致的结果。