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

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

　　

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

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

　　数据表格设计：从功能、交互和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.沟通后：信息反馈要全

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

　　参考资料：

　　《表单设计及Axure原型》作者：晓梦蝉君

　　《如何打造一个高可用性网页表单设计?》

　　《表单设计的思考》

　　《表单设计-学习笔记》作者：丹顶鹤的日记本

　　《与用户体验死磕到底：不简单的表单设计》

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

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

*请认真填写需求信息，我们会在24小时内与您取得联系。