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

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

表单是什么

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

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

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

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

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

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

为什么要简化表单

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

如何设计表单

在填写表单之前：

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

宏观排序：

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

一．标签

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：

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

（主、次动作区隔）

四．帮助

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

Tips：

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

（简洁的帮助提示文本）

五．反馈

Tips：

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

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

（错误反馈）

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

表单内容设计之后:

视觉角度Tips：

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

（背景干扰）

极端场景角度Tips：

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

文/倒爷001

关键字：产品经理

版权声明

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处。如若内容有涉嫌抄袭侵权/违法违规/事实不符，请点击 举报 进行投诉反馈！