表格排版设计：别再让糟糕表单堵死用户入口

不管你从事何种产品相关工作 , 亦或者你为之进行产品设计 , 我坚信表单设计需求极为广泛且普遍存在 , 然而它却极易被置身事外之人所忽视 , 所遗漏。

跟以往所呈现出的状况有差异的是, 撰写这篇文并非是因我具备诸多经验, 而是在于我察觉到自身的表单体验极为糟糕, 长久以来，我认定表单设计的需求简易且毫无趣味可言, 更倾向于将精力投放至具备挑战性的需求之上。随后发现常常是这些糟糕的表单将用户与平台沟通的入口给堵塞住了, 于是耗费了一段时日专门针对表单设计展开研究, 对自身做一番反思。

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

数据表格设计：从功能、交互和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方案之际, 人们眼球定位所耗费的时间是最长的。

依据所收集到的数据, 在所有的方案当中, 最为有效的那种设计, 均具备着共同的特征, 即提交按钮以及关闭按钮, 呈现出左对齐的排列方式, 并且与上方的输入框以及标签达成对齐。

UI1. 营造氛围

（1）品牌基因

往表单之中植入品牌的相关元素, 像是颜色这一类, 能够让整体的界面设计风格变得协调起来, 进而促使品牌基因在人们心中深深扎根并被记住。

（2）场景氛围

会把线下的表单迁移到线上, 能够结合线下场景以使得用户获得身临其境之感, 好比预订民宿。

2. 缓解页面压力

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

要是碰到较为复杂的表单, 就得对其中的信息予以整理归纳, 不然, 杂糅在一起的表单会使得用户丧失填写的耐心。要合理且有层次地方组织整合信息, 依据不同信息的类别、属性呀以及相关性来进行区块的划分, 借助线条、空间间隔、颜色来进行视觉表现, 从而给用户留出喘息的机会。

（2）动态：渐进呈现

用户唯有达成当下操作, 页面才会逐步呈现下一步操作, 使得内容的增添顺乎自然。举例来说, 当Gogobot邀请用户予以评价时, 它巧妙地借助高斯模糊后续内容来减轻用户的压力。

3. 视觉层级

（1）必填项和选填项

必填的项目呈现为空的状态, 那么表单就不能够开展进行, 所以, 必填的项目在视觉方面所产生的效果要比选填的项目更突出。

（2）主按钮和次按钮

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

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

强调效果方面，错误信息比成功信息强, 进而吸引用户注意, 以便快速解决问题。

4. 输入框长度

输入框的长短能够对用户正确填出结果长度起到暗示作用, 像证件号所含内容数量较多, 因而输入框就得很长, 验证码通常为四位数字, 故而输入框要短。

5. 字体

运用字号去区分层次重点, 要注重强调文字的字号需相较于辅助文字大一些, 凭借文字大小使用户能够分清重点。

总结

表单, 实际上是起着连接系统与用户作用的, 一个相当重要的桥梁。经过上述的一番整理, 怎样才能够使得用户在进行表单填写之时, 呈现出如同对话那样的流畅自然状态, 想必大家也已然拥有了一些相关概念了。

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

试想一下, 你参与到了与朋友的聊天当中, 然而你却在一旁滔滔不绝地展开漫无目的的讲述, 讲得那叫一个花哨, 却和原本的主题没有任何一点关联, 情况会怎样? 那必然是果断会被嫌弃的。表单的情况同样是这样, 你要去仔细考虑“保留、删减、延迟、解释”这几个方面。

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

尽可能防止用户填完之后才去告知差错, 而我们理应选用恰当的办法去规避源头。比如说邀约友人来家中用餐, 能够预先询问你的友人忌讳的食物, 不然就白白浪费精力了。表单亦是这样的情况, 你要在合适的时候提供帮助资讯来正确引导用户。

继续浏览有关 表单设计用户体验 的文章