UED 案例分析：高效易用表单设计指南

2017-09-25 13:00:00

舒适的表单设计，可以引导用户高效地完成表单背后的工作流程。

表单是什么

表单是一个包含表单元素的区域，使用表单标签（）定义。

表单元素是允许用户在表单中输入信息的元素，主要负责数据采集功能。

表单页通常用来执行登录、注册、预定、下单、评论等任务，是产品中数据录入必不可少的页面模式。因此，舒适的表单设计，可以引导用户高效地完成表单背后的工作流程。——ANT Design

五大要素：标签，输入框，输入反馈，动作，帮助信息

标签：告诉用户表单问题是什么，要填写什么类型的信息；占位符文本（Placeholder text）—提示文本，位于表单文本框内，一般用于提示用户填写，开始输入时自动消失；
输入框：供给用户填写答案信息，收集用户输入的信息，每个字段包含着某一类型的信息（如姓名、性别等）；
反馈：针对用户输入给出反馈；
动作：点击一个按钮或链接，执行提交表单操作；
帮助：为如何填写表单提供帮助。

关键：产品核心价值，最快得到所需
结果：表单简短，精简问题

为什么要简化表单

减少认知负荷；
对使用屏幕阅读器的用户更友好；处理错误、更改细节更容易，降低用户放弃的可能性；
页面加载更快；
易于追踪行为和过程，为分析提供数据；
滚动操作减少，甚至被消灭；
用户对数据更有掌控力。

如何设计表单

在填写表单之前：

给用户明确期望的进程提示，表单起始页提示用户要做什么准备，比如身份证、驾照、护照、银行卡等，不要等到后期发现缺失必要信息而无法继续。

宏观排序：

按逻辑排序，条理清晰组织字段区域，如按时间，首字母。
由易至难，让用户适应提问的氛围，逐步融入再仔细思考较难问题。
与当前情境最相关的问题优先，可选问题放在最后，减少侵略性，这些问题可能会得到更多照顾。

一．标签

Tips：

1. 避免将标签作为占位符，占位符不可替代字段标签，建议使用浮动（或自适应）标签floating labels，占位符文本（提示文本）一般来说它弊大于利。标签作为占位符文本，输入时提示文本自动消失，容易造成用户短期记忆的压力以及错误；

NN Group的研究表明空字段对比有文字的字段更吸引用户注意，用户更可能跳过那些有提示文本的字段，因为扫描式的浏览很容易误会框内已经被输入了文字。

占位符文本可以使用比普通的文本更浅的颜色，但容易导致对比度不符合W3C Web内容的可访问性指南（正常文本比4.5:1）。此外，占位符文本不支持辅助残疾人的设计（如屏幕阅读器），这会让这部分用户填写表单变得很困难。

（浮动标签样式）

2.标签的命名要易于用户阅读和理解，避免模糊的描述给用户造成困扰；正确区分必填字段和选填字段；

3.选择合适的对齐方式；

右对齐方式标签的表单浏览时间仅次于顶部对齐标签的表单，网页高度有限的话推荐这种对齐方式。采用左对齐标签方式的表单是三者之中浏览时间最长的，却能放慢用户的速度阅读，让其仔细考虑。

（对齐方式概览）

二．输入框

Tips：

1. 关联标签和输入框，给出具体的输入要求或特殊格式规范；内容长度和输入框长度保持对应，利用可供性暗示填写方式，为用户提供有意义的暗示；更大的文字输入框、适度的留白空间会让人更有填写的欲望。避免一些不必要的输入，减少用户对不必要问题的反感，提高用户满意度，降低操作的错误率。

2. 自由填写支持灵活多样的格式，提高容错率。

输入掩码（Input Masks）掩码字段能在用户填写时自动编排输入的文本格式，将关注的重点放在填写信息和查错上，适用于手机号、卡号等；
邮件地址字段中提供常见的域名，输入@的时，出现常见的域名。

输入字段（Input Fields）触发对应键盘类型，如手机号、日期、邮编、卡号等弹出数字键盘

（自动编排数字组合）

3. 选择填充的表单格式（除了常规的文字框Text Field输入）可提供搜寻功能的下拉式选单，输入内容即时进行筛选、智能联想，输入与点选结合，快速方便。

常规选择填充方式：下拉框（dropdown list）、单选框（radio button）、复选框（checkbox）；
衍生填充方式：滑块（Range/slider）、微调步进器（Stepper）、开关钮（Toggle switch）、Tab选框、搜索框等。

tips：

TAB选项一次点选，效率高，选项低于6个可全部呈现；选择值只有2-3个时避免使用下拉框，建议使用单选样式。下拉框操作需点击两次，但包含多项选择时更节省空间。

（时间选择器）

4. 填写效率：自动填充 > 选择填充 > 自由填充

预填充（Pre-Fills）设计时可考虑：默认值、可选值、常用值、历史值、上次填充值

tips：

自动填写，利用浏览器保存并列举用户以前填写过的值，以实现自动个性化默认填写，敏感数据除外；
智能补充，根据地址得到邮编，根据身份证号码推测出生日；
基于定位，自动获取地理位置信息，这种预填充方式要允许用户进行微调和修改；
从更多的渠道搜集数据，第三方的帐号用户授权；
自动更正输入的拼写错误，特殊字段除外；
自动首字母大写，适用于填写姓名；

智能默认，设置满足多数人需要的默认选择，能为用户节省时间，提供参考意见保证默认选项符合大多数用户利益，比如默认用户同意条款。

（默认勾选）

三．动作

主动作：完成表单上最重要行为（完成表单）的动作。
次动作：与完成表单这一目标相悖的动作，比如撤销、返回、重置、删除等，当用户无意误操作时容易造成不可挽回的负面影响。

Tips：

表述清晰的行为动作按钮；主要操作（主动作）和次要操作（次动作）可使用差异化的设计来，当表单中不可避免出现次动作时，应该尽量弱化次动作的视觉表现，将潜在出错率降到最低，引导用户完成任务流；
流程闭环，避免用户在中途跳出；提供Tab快捷键跳转下一行；避免重置按钮和清空表单按钮，如果表单中含用户财务信息之类的敏感字段，可以提供一个“取消”按钮，让用户自行决定是否放弃表单填写。

（主、次动作区隔）

四．帮助

作用：有效说服用户填写表单，剔除负面干扰，消除用户疑问，在隐私保密或安全方面获取信任

Tips：

不要隐藏基本的帮助文本，保证帮助文字简单简洁；
合理地拆分步骤减轻填写的心理压力，相关信息分组；
自动即时帮助，在帮助信息最合适的时间和位置显示帮助信息；用户控制打开/关闭弹层，帮助文字区域体现相关性的同时不能遮盖其余的表单元素；
适当的保留空间可视化图形作为引导，配合有趣的动画。

（简洁的帮助提示文本）

五．反馈

Tips：

1.给予恰当的输入限制，限制用户的行为（如在预定机票时返回时间无法选择出发时间之前的日期，出发城市不能跟到达城市一样等），将表单填写规则标注在明显区域，或提供自动修正来预防犯错；

2.用户填写完后即时校验，进行有效的拼写检查，名称，地址等特殊字段忽略此功能；指明出错的内容，让用户能及时修改、补充缺漏的信息，采用高亮且精准的错误呈现形式，如粗边框、粗体文字提醒、下划线、斜体，不局限于色彩这一元素；若包含多个错误反馈，可另外在顶部增加横幅统一列出全部提示；

（错误反馈）

3. 可将动作按钮、跳转过程、出错提示/完成状态提醒设计成合一的多态按钮，简洁实用。

表单内容设计之后:

视觉角度Tips：

建立清晰的视觉线性流和完成路径，将所有字段如标签、输入框、主要动作按钮排成一个垂直单列，不要在表单中使用垂直分栏（列），多列布局会打断用户自上而下的阅读习惯；醒目的提交或完成按钮，放在用户的浏览线的终点更有利于用户的完成操作；
将有关联的标注和字段在视觉上进行分组，保障可浏览性，专注当前表单任务；
填写表单的界面，应该减少噪音，强调文字和背景对比，避免背景广告干扰，减少其他任务路径，避免用户退出表单填写。