设计沉思录 | 如何高效完成表单输入 ?

小提示：您能找到这篇{设计沉思录 | 如何高效完成表单输入 ?}绝对不是偶然，我们能帮您找到潜在客户，解决您的困扰。如果您对本页介绍的设计沉思录 | 如何高效完成表单输入 ?内容感兴趣，有相关需求意向欢迎拨打我们的服务热线，或留言咨询，我们将第一时间联系您！

针对复杂表单信息多，填写慢、体验差等问题，我们以58简历发布与赶集房产发布为例，从六方面进行用户体验的全面升级。

表单是收集用户信息的方式。如果你的产品需要收集大量用户信息来完成为其提供的服务，那么在用户进行信息输入的过程中一定要考虑到输入成本和输入效率对用户体验的影响。

针对复杂表单信息多、填写慢、体验差等问题，我们以“58简历发布”与“赶集房产发布”为例，进行表单发布流程的再设计。主要从以下六个方面进行体验的全面升级：

1. 聚焦核心信息，减少认知成本
2. 联动式键盘，提高输入效率
3. 实时反馈，传递规则信息
4. 合理规划层级，减少输入压力
5. 从实际场景出发，抓用户核心诉求点
6. 专注独立任务细分

一、了解在前

表单具有三种状态，默认态即用户输入信息之前的状态，该状态告知用户需要填写什么类型的信息；焦点态即用户正在输入信息时的状态，该状态使用户聚焦输入信息时，能够更好与表单交互并完成信息填写；反馈态即用户填写信息后的校验状态，该状态能够对输入信息进行实时判断。

二、聚焦核心信息

在表单处于默认态时，通常会用标签提示用户填写什么类型的信息，用占位符作为额外提示告知用户如何填写信息等规则，当用户开始对信息进行输入时，标签不变，占位符文本消失。

在复杂表单展示中，占位符的存在会分散用户对核心信息的阅读，消失会影响用户对输入规则的关注。

如何让用户在不同的状态下聚焦最重要的信息，减少认知成本成为设计的关键点。

不同状态下聚焦核心信息 图片来源：58简历发布

信息输入前聚焦标签内容，输入中聚焦规则信息，输入后聚焦结果内容。让用户在不同状态下，聚焦核心信息，减少认知成本，提高输入效率。

三、联动式键盘

在用户进行表单信息输入时，怎样跟输入控件亲密无间的合作，从而降低用户的输入成本，提高用户的输入体验？

控件反复调入跳出 图片来源：赶集旧版房屋发布

旧版表单进行信息输入时，每个字段的输入过程均为“点击选择输入—弹出对应输入控件—信息输入—收起控件”，完成表单输入的整个过程中，对应的输入控件在频繁交叉的弹入弹出，用户也在频繁的选择要输入字段。如何从根本上改变用户对输入控件的使用效率？

联动键盘输入更高效 图片来源：赶集房屋发布

为了避免让用户频繁的跳入跳出相同类型的输入项，首先整合表单的信息字段，将同类型的字段进行合并，同时结合输入控件，设计联动式组件，让用户在表单输入时更加高效。

在58简历发布改版项目中，我们使用了同样的设计思路，改变用户的输入方式，提高用户输入效率。

联动式键盘 输入更高效 图片来源：58创建简历

通过提高用户对工具化产品的使用效率，避免了让用户频繁跳入跳出相同类型的填写项，让输入更高效。

四、实时反馈

无论是规则引导还是错误提示，都要在用户输入时实时进行反馈与提醒，合理有序的向用户传递规则信息，可以有效减少表单页面中无效信息的同时，使信息传递更加具有通用性和规范性。

在联动式键盘中增加提示信息，帮助用户在输入过程中及时了解输入规则。

1. 规则信息提示

在用户输入时不再消失输入规则，而将提示文案与联动式键盘相结合，辅助用户正确完成信息填写。

左图来源 赶集-房屋发布；右图来源 58-创建简历

2. 实时反馈

在用户输入过程中，错误是不可避免的。如何将错误以高度可见的形式实时告知用户，降低用户错误输入中带来的挫败感是尤其重要的。

左图来源 赶集-房屋发布；右图来源 58-创建简历

信息填写实时反馈，来源赶集-房屋发布

3. 对话式引导

Justin Mifsud 曾提出“表单应该像一个对话，而不是审讯”。良好的对话式表单，能够提高用户信任度和转化率。采用亲和、生动、容易理解的语言来引导、告知和激励用户完成对应的任务，文案往往在细节之处起到重要作用。

合理的规则提示、实时的错误反馈，友好的对话引导，会降低用户出错带来的挫败感，提升正确率，提高用户信任度和转化率。

五、合理的规划层级

1. 自动填写/匹配预设值, 减少用户输入

表单的自动填写或自动匹配功能，能够帮助用户降低输入负荷、提升填写效率。

在对表单设计时，以下四种情况，可自动填写或匹配表单信息：

• 将用户在平台中已输入的相同信息自动带入表单；
• 将通过移动设备各种传感器获取准确的信息自动带入表单，如用户当前定位可通过移动手机的GPS获取；跨境电商网站开发
• 将内容相关联的信息通过匹配分析自动带入表单，如用户输入身份证号后，可根据第7-14位获取出生日期、第17位数字获取用户性别，为用户自动将匹配信息带入表单。

自动匹配 减少用户输入 图片来源：赶集房屋发布

赶集房产发布，将旧版的“选择区域”与“小区名称”调换位置，用户先输入小区名称，后台数据即可通过小区定位，自动匹配小区所在区域。通过此设计用户即可减少一项表单的填写，提升填写效率。

2. 按步骤分解复杂表单, 拆分任务

表单是收集用户信息的一种方式，并不是每个表单都是简短的，多数情况下我们需要用户填写大量繁琐的信息。对于这样复杂的表单，在设计上合理分组、引导用户分步完成表单的填写是很重要，不但可以降低用户对冗长表单的填写压力，同时能够缓解对复杂、较长表单的恐惧感。

合理分解复杂表单 拆分任务 图片来源：58简历发布

58简历发布，将繁杂的填写信息进行合理划分、重新定义新表单的页面规则。

整个表单填写分为三步：

• 用户基本信息填写：姓名、性别等；
• 求职意向填写：期望职位、薪资、求职区域；
• 完善简历：基础简历创建成功后，引导用户填写选填信息，使简历内容更加丰富，当然此时用户也可直接发布基础简历。

对用户来说，分步填写信息不仅缓解了对复杂表单的恐惧感，而且能够对填写的内容更聚焦。

3. 运用动效提示信息层级关系, 避免用户迷失

合理的运用动效，能够通过覆盖、滑出、推移等动效设计帮助用户构建界面空间与信息层级关系，避免用户在一级页面与二级页面的表单切换中迷失，同时统一的转场效果能够让用户在复杂的操作中，抓住最西宁房地产朋友圈微信广告核心的表单页面。

从实际场景出发

无论是项目迭代还是一个新项目的开始，收集到的用户诉求点往往是零散的、逻辑性不强的，所以我们需要在这些离散的诉求点中抓住核心诉求，梳理实际使用场景并分析问题。

抓住核心诉求 缩短操作路径 图片来源：58简历发布

58简历发布的头像选择与赶集房屋发布的图片上传功能，旧版是通过让用户先选择类型，再选择内容，该逻辑结构并无问题，但经过用户调研，我们发现多数用户在此操作时会直接添加头像或照片。根据调研结果反推旧版设计的合理性，该设计增加了用户的选择和操作成本。改版后将内容直接用一个页面进行组合，满足大多数用户的核心诉求，同时为少数用户提供入口。

打破逻辑思维的桎梏，从用户最直接的诉求出发，缩短用户使用路径和无缘由的选择成本。

七、专注独立的任务细分

从扁平的任务平铺到更加沉浸独立的任务细分，分支流程，在一个控件内快速完成整个流程，减少整体表单页面信息压力的同时，也让单个任务的完成更加专注和聚焦。

聚焦独立任务 图片来源：58简历发布

58App简历创建页面，需要插入认证手机号的任务，而这一任务是与建立简历本身无关的，会干扰主流程的进行；优化后，把认证相关信息分割独立，用户进入新场景执行新任务，使单个任务更聚焦。

八、总结

通过明确的信息提示、高效的输入方式、实时的错误反馈、合理的信息层级与任务拆分，让整个表单的输入流程更加易懂与流畅，操作体验更加符合移动端用户的使用习惯。

赶集房产与58招聘发布体验升级的尝试，发布成功率有了大幅提升、页面跳出率与输入报错率相对下降，同时通过可用性测试，用户发布输入的平均时长也相对短缩，用户满意度提升。

作者：杜玮宁，交互设计师，迷恋AR，喜好狗，玩点颜料，懂点代码

本文来源于合作媒体@58用户体验设计中心（微信公众号@58UXD），作者@杜玮宁

题图来自 Unsplash，基于 CC0 协议