表单设计总结：构建有趣的界面“对话”

无论你是做什么产品的，我相信表单设计的需求都是非常常见的，但是也是容易被忽略的。

跟以往不同的是，写这篇文章并不是我多有经验，而是我意识到自己的表单体验很糟糕，一直以来我觉得表单设计的需求简单且索然无味，更愿意去把精力投入有挑战性的需求上。后来发现往往是这些糟糕的表单把用户与平台沟通的入口堵死了，于是花了一段时间专门研究表单设计，反省下自己。

写完这篇估计可以集齐夏日缤纷全家桶了。

数据表格设计：从功能、交互和UI进行全方位分析

图表设计总结：数据可视化的精益之道

表单设计总结：构建有趣的界面“对话”······就是这篇

前言

定义： 表单在网页中主要负责数据采集功能。

原则

1. 减少用户操作

繁琐的表单一直被人们所诟病，减少用户的操作可以提高用户的输入效率，从而提高用户的转化率。比如表单中需要用户提供地址信息，点击“我的位置”可以自动获取地理信息，避免了用户填写长长的地址的烦恼，在移动场景下大大节省了用户的操作时间。

2. 减少用户思考

凡是涉及数据的设计都有这个特点，你需要很直观的向用户展示他最终所要付出的或他所能得到的。比如AA收款，用户填写总金额和总人数，这时候自动展现人均收款，是不是更人性化了~

3. 减少操作误差

给表单配上规则，会使你的表单更加聪明。比如需要用户输入银行卡号，自动空格断行可以避免填写错误。

内容

1. 保留

保留必要信息的录入框，比如用于找回密码的联系方式，手机号或邮箱。

2. 删减

要明确表单填写的目的，剔除掉其余非必要的信息。比如购物网站的注册表单，像学历的录入框，不但增加了用户的操作时间，而且毫无意义。

3. 延迟

有些问题不需要马上获得答案，可以在使用过程中引导用户完善，有效简化了用户的注册流程。比如等到用户进行结算时再请求输入收货地址。

4. 解释

涉及到用户隐私问题的选项，给予解释，降低了用户的使用负担。比如要求用户填写手机号，可以告诉用户手机号是用于登录和找回密码。

功能

1. 标签

（1）必填项和选填项

只标注少数，减少信息量。大多数必填，标明“选填项”。大多数选填，标明“必填项”。如果差不多，标注必填项即可。

（2）标签大小写

建议句首字母大写，更快地遵循语法。避免使用全大写，不专业而且难读。

2. 输入框

（1）选择适当的类型

合理选择输入框的类型可以引导用户正确填写表单。比如时间选择器限定了该输入框的输入内容为时间类型。

（2）默认内容

默认内容可以提示用户需要输入的内容，避免用户误操作。也可以预填充输入框内容，减少用户操作，但是预填充内容必须是用户需要的，不然会达到适得其反的效果。

3. 帮助信息

为用户填写答案提供有用的线索。

（1）不熟悉要求填入的数据。 比如什么是PAC代码？

（2）质疑为何要填入特定数据。 比如为什么要填写邮箱？

（3）关心数据安全或者隐私。 比如填写信用卡账号。

（4）系统推荐数据填写方式。 比如用逗号分开标签。

4. 反馈信息

（1）成功信息

用户填写成功，需要有清晰的成功反馈，给予用户鼓励。

（2）错误信息

明确每个输入框产生错误的原因，并给出清晰的解决方法。

（3）警告信息

格式正确，但是有外部条件限制，比如用户名已被占用。

（4）提示信息

给予用户正确填写表单的线索，减少操作误差。

5. 操作按钮

（1）主动作和次动作

主动作表示用户填写表单的主要操作方式。比如保存、提交。主动作也可以包含两个意思，比如同意并提交。次动作表示用户填写表单的次要操作方式，大多数是用来撤销内容。比如取消、重置。

（2）按钮反馈

用户提交数据到服务器进行交互需要一定的时间。为了避免重复提交，可以将按钮置灰让用户无法点击，并且加入进度条或加载样式表示提交正在进行中。

6. 步骤条

步骤条可以让流程的所有步骤清晰可见。这里有四个原因可以解释多步形式的有效性：

（1）表单各模块性质不同 ，比如注册微店设置账号信息和设置店铺信息是明显不同的模块。

（2）表单是基于不同时间点。 比如淘宝买家退款的流程进度条，分为退款申请，退款处理和退货给卖家，十分清晰地告知用户退款的每个进程变化，给予用户安全感。

（3）通过在一个多步骤表单的最后一步请求敏感信息（电子邮件、电话），用户更有可能填写这些字段——否则它们会丢失填写前一步所取得的进展（这是一种被证实的认知偏差，被称为“沉没成本谬论”）。

（4）通过查看进度条，用户更有动力完成表单。这又是基于许多被证明的认知偏差，如被赋予的进步效应。

交互

1. 逻辑排序

有逻辑性地组织标签，使表单像对话一般自然流畅。比如通常情况下会要求提供用户名才设置密码，先设置密码再要求填写用户名真的不要太奇怪！还要考虑使用频率，按使用频率由高到低排列。

2. 清晰的浏览线

合理地组织标签、操作按钮和提示文字的排版，引导用户的视线在同一方向流动，降低用户的视觉负担。

3. 即时校验

（1）确认

适用于错误率高、或者有特定格式要求的问题。比如确认用户名是否被占用。

（2）建议

适用于有大量可选择有效答案的情况。比如建议密码的格式，从而保证账号安全性。

（3）限制

适用于有填写限制的情况。比如输入框有字数限制时，显示限制上限和当前的输入字数，让用户把握输入字数。

4. 提供帮助

在标签和输入框旁边增加帮助文字，告诉用户应该如何回答问题。

（1）自动即时帮助

显示在对应输入框附近，表示对应输入框的提示。适用于帮助文字较少的局部说明。

（2）用户激活的即时帮助

通常采用图标、按钮、图片、文本链接提示人们有帮助可提供，例如问号图标。适用于帮助文字较少的全局说明。

（3）用户激活的区域帮助

始终显示在某个特定区域而不是输入框附近。适用于帮助文字非常多的全局说明。

5. 对齐方式

（1）标签

根据马泰奥·彭佐的2006年的标签对齐眼动实验结果表明。标签的对齐方式在理论效率上比较：顶对齐>右对齐>左对齐。

① 顶部对齐。适用于水平空间有限的情况。

• 优点：和输入框联系非常紧密，从上至下的视觉路径清晰流畅，填写效率很高。
• 缺点：大量占用垂直空间，不适用于输入框较多的表单。

② 右对齐。适用于垂直空间有限的情况并且需要用户快速填写的情况。

• 优点：和输入框联系较为紧密，并且减少占用垂直空间。
• 缺点：标签可读性不强，降低快速浏览完表单的效率。

③ 左对齐。适用于垂直空间有限并且需要用户谨慎填写的情况。

• 优点：标签可读性强，并且减少占用垂直空间。
• 缺点：和输入框联系不紧密，增加用户填写表单的时间。

④ 输入框内对齐。适用于水平和垂直空间有限的情况。

• 优点：与输入框联系紧密，并且减少占用水平和垂直空间。
• 缺点：标签随输入内容而消失，复核表单信息较困难。

⑤ 悬浮标签。结合了顶部对齐和输入框内对齐的情况。

• 优点：和输入框联系最紧密，填写效率最高，并且减少占用水平和垂直空间。
• 缺点：稍微占用了垂直空间，标签字号太小容易造成可读性问题，不过缺点不是很明显。

（2）操作按钮

为了评估哪一种主动作和次动作的效果最好，Luck(Web表单设计作者)和伦敦的可用性测试公司Etre使用眼动跟踪和可用性指标对此进行了 测试 。

方案A、B和C完成任务更快、更有效。只有E方案表现很差，错误点击了取消按钮。使用F方案时，人们的眼球定位时间最长。
根据收集的数据，所有方案中最有效的设计都有共同特征：提交和关闭按钮左对齐排列，与上方输入框和标签对齐。

UI

1. 营造氛围

（1）品牌基因

在表单也植入品牌的元素，比如颜色，会使整体界面设计风格协调，使得品牌基因深入人心。

（2）场景氛围

将线下的表单搬到线上，可以结合线下场景让用户身临其境，比如预定民宿。

2. 缓解页面压力

（1）静态：利用线条、空间间隔、颜色。

对于较为复杂的表单，需要对信息进行整理归纳，否则杂糅的表单会让用户失去填写的耐心。合理有层次的组织信息，按照不同信息的类别、属性和相关性进行区块的划分，利用线条、空间间隔、颜色进行视觉表现，给用户喘息的机会。

（2）动态：渐进呈现

用户只有完成当前操作，页面才渐进展现下一步操作，让内容的增加顺其自然。比如Gogobot在邀请用户进行评价时，巧妙地运用高斯模糊后续内容来缓解用户的压力。

3. 视觉层级

（1）必填项和选填项

必填项为空，则表单无法进行，因此必填项要比选填项的视觉效果强。

（2）主按钮和次按钮

主动作的视觉效果要比次动作的视觉效果明显。

（3）错误信息和成功信息

错误信息的强调效果要比成功信息强，从而吸引用户注意快速解决问题。

4. 输入框长度

输入框的长度可以暗示用户正确填写结果的长度。比如证件号的内容较多，所以输入框要很长。验证码一般是四位数字，所以输入框要短。

5. 字体

通过字号来区分层次重点，强调文字的字号要比辅助的文字要大一点。通过文字大小让用户分清重点。

总结

表单其实是连接系统和用户的一个重要的桥梁。通过上述的整理，如何让用户在填写表单时像对话般流畅自然，相信大家也有一些概念了。

1. 沟通前：选取问题要精

想想你跟朋友聊天，你在一旁讲得天花乱坠，但跟主题毫无相关，那是果断要被嫌弃的。表单也是如此，你需要考虑“保留、删减、延迟、解释”。

2. 沟通中：沟通效率要高

尽量避免用户填写后才告知错误，我们应该采取合理的方式规避根源。比如约朋友来家里吃饭，可以提前询问你的朋友忌口的食物，不然就白费心血了。表单也是如此，你需要适时提供帮助信息正确引导用户。

3.沟通后：信息反馈要全

别人在讲话时，偶尔的点头或者提问可以让讲话的人得到反馈，他会觉得自己是“联网”了，而不是在玩“单机游戏”。表单也是如此，及时的反馈能让用户感觉到自己正在和系统交互中，而不是进入了死胡同。

参考资料：

1. 《 表单设计及Axure原型 》作者：晓梦蝉君
2. 《 如何打造一个高可用性网页表单设计？ 》
3. 《 表单设计的思考 》
4. 《 表单设计-学习笔记 》作者：丹顶鹤的日记本
5. 《 与用户体验死磕到底：不简单的表单设计 》

其实我觉得还是刷《 Web表单设计 》比较系统，逃(￣▽￣)~*

PS：本文用到的绘图工具是Balsamiq Mockups，炒鸡稀饭这种风格，详情介绍请戳链接 PM工具盘点：那些鲜为人知却好用到哭的效率神器

 

作者：安琪Angela，公众号：idatadesign。互联网数据行业UX&PM，参与过数据中心，商业智能和数据分析平台等产品设计。关注大数据、人工智能和互联网金融。欢迎大家一起交流~

本文由 @安琪Angela 原创发布于人人都是产品经理。未经许可，禁止转载。

（题图由作者提供）