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

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

　　

　　表单是什么

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

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

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

　　建立清晰的视觉线性流和完成路径，将所有字段如标签、输入框、主要动作按钮排成一个垂直单列，不要在表单中使用垂直分栏(列)，多列布局会打断用户自上而下的阅读习惯;醒目的提交或完成按钮，放在用户的浏览线的终点更有利于用户的完成操作;

　　将有关联的标注和字段在视觉上进行分组，保障可浏览性，专注当前表单任务;

　　填写表单的界面，应该减少噪音，强调文字和背景对比，避免背景广告干扰，减少其他任务路径，避免用户退出表单填写。

　　

　　(背景干扰)

　　极端场景角度Tips：

　　保存表单进度。当表单过长，一些特殊原因导致表单关闭，如网页崩溃、用户误操作，提供保存表单进度功能，再访问表单时保留上一次的填写进度。

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