长表单设计进阶——10招提升表单体验

有时候用户在操作过程中，不可避免的需要填写很多表单。提高长表单的操作效率显得格外重要。针对于移动端长表单，我们应该如何去正确的设计呢？

表单的定义

表单是产品设计中的重要组成部分，如果说弹框的主要作用是完成信息反馈，那么表单的主要作用就是完成信息录入。任何一个表单都可以被拆解成三个最基本要素：标签（标题）、输入框和按钮。

其中表现层主要由文本域、选择框、标签、地址、按钮等表单对象组成；交互层主要由键盘、日期控件、选择控件、调节滑块、单选框、等对象组成；反馈层主要由实时反馈、结果反馈等对象组成。

长表单设计常见问题

表单不管是对用户还是产品方都很重要，但是当表单信息较长时就会容易出现问题：

当你的表单出现这些问题，你的用户心情肯定不舒服，如果产品不是唯一的，那么他们就会弃你而去了，就算是唯一的，但是也免不了吐槽你几句，所以需要不停的优化用户体验。

如何提高操作效率

当表单过长往往会给用户造成压力，从而放弃操作，而我们常说用户体验主要指以用户为中心进行产品设计，其目的是满足产品需求、符合用户习惯和认知、能高效愉悦的完成操作。达到这些目的我们才可能提高整体的操作效率。

具体表现在框架层展示清晰、表现层展示合理、交互层操作高效、反馈层实时提醒。根据这些特点我整理了9条优化建议。

1、将长表单分步设计

当表单较长时，将表单信息进行拆分，并分步设计，可以有效降低用户输入压力。

Keep采用标签导航进行分布设计、58同城采用下一步的方式进行设计，都很好的简化了界面。

2、将相关的信息进行分组

信息较多时，将相关信息进行分组可以减轻用户输入压力。

同理在设计时可以将属性相同的归为一组、类似功能的归为一组，这样从视觉上好像信息变少了，用户才有完成的动力，如下图。

58同城将信息分为基本信息、租金详情，同时信息内容将相关联的厅室、朝向、楼层分为一组，虽然信息差不多，但是58看上去简洁很多。

3、突出核心信息

在界面中将核心信息进行差异化设计，引导用户视线，这里的差异化设计可以是字体加大加粗、添加背景色、色彩对比、留白等。

美团订单的收货地址、送达时间就采用了差异化设计，选择收货地址将字号增大、并放置在列表外的黄色背景上，送达时间采用蓝色文字。这样不仅有了模块的区分，同时加强了表现形式。

4、信息排序遵循用户习惯

信息排序指每个模块的内部信息最好能按照用户习惯进行排序，比如填写个人信息时，一般顺序为姓名、当前公司、职位，如果位置颠倒了就打破了用户的逻辑，会增加用户思考的时间，如下图。

智联招聘的个人信息界面排列顺序为姓名、公司、职位、所在地均是围绕个人信息逐步填写。

5、优化细节提升好感度

表单细节的设计主要需要注意列表对齐方式、文字层次等。

1）选择合理的标签对齐方式

左对齐、左右对齐、上下对齐

从下图可以看出左对齐和左右对齐不及上下对齐视觉流畅。但是其占地小，因此这两种用得比较常见。一般输入信息较多时可采用左对齐、选择信息较多时采用左右对齐、信息较少时采用上下对齐。

2）文字要有层次

设计时注意文字大小、默认颜色、输入颜色、强调颜色，提升表单细节的层次。

3）适当的减少输入项

尽量可能减少输入项个数，这样可使得表单更轻松，尤其是当我们需要向用户收集大量信息，根据实际情况考虑做减法，用最少的收集内容去做更多的事。

用户没有我们想象的那么勤奋，我们需要做到的是让用户最方便最快速的完成内容的输入。通俗的来说，能不填写就不填写，能选择就不要输入，能选择一下来实现的就不要选两下。

打个比方：现在有个表单，需要收集姓名、性别、出生日期、身份证号四个输入项。我们可以通过技术的一些手段从身份证号中提取出信息，那4个输入项就可以变成变成2个。身份证的倒数第二位可以判断性别：奇数是男，偶数表示女，出生年月大家都知道。

结合不同的场景去思考会发现无限多的做法，减少输入项个数的目的也只是为了让完成表单变得更加高效。

6、采用合理的输入方式

输入交互方式主要有，键盘、快捷标签、滑块、下拉控件、输入框等。采用合适的形式可以节省用户输入时间，如下图。

咸鱼输入价格时直接采用联动的数字键盘，让输入一次完成，不用来回切换。当需要输入详情时直接调用文字键盘，同时还设置了快捷标签，让编辑更顺畅快捷。

7、寻找更高效的输入方式

当输入样式设计后，我们在追问下这种输入方式真的是最优的吗。还有其他形式可以取代吗？比如加入语音输入、摄像头扫描、联动弹窗等。如下图。

8. 自动填写

和后台数据库进行匹配，自动填写已知信息。

比如用户在填写长表单前已经在平台填写了联系方式、名称或其他信息，而填写长表单时也需要这些信息要素，我们就可以将这些信息自动填入表单，减少用户的输入。还比如，后面的表单需要的信息要素正好在前面的表单中有输入，我们也可以自动帮用户填入。

9、数据自动保存

特别是对于一些填写内容多的表单，一定要自动保存。

试想一下，你正在完成一个长表单的填写，前面已经填写了很多内容，可是到了提交前可能因为系统崩溃，网络状况，或者因为其他原因不能完成提交，而你又不得不退出。当你重新开始填写表单时，却不得不重新填写一遍所有的信息，这绝对是让人崩溃的。

10、及时反馈

及时反馈可以避免所有信息都填完之后，再弹出toast提示不通过的情况，同样能提供操作效率，如下图。

58同城当我输入的数字为一位数时，会提示租金最少输入两位，这样可以有效的防止用户填错，给用户更清晰的提示。

总结

1、通过将长表单分布设计、将相关的信息进行分组让框架层展示更清晰；

2、通过突出核心信息、信息排序遵循用户习惯、优化细节提升好感度让表现层展示更有层次；

3、通过采用合理的输入方式、寻找更高效的输入方式让交互层操作更高效。

4、通过及时反馈让反馈层实时提醒，避免错误操作。

一个表单是否“好用”，视觉体验只占了整体体验一部分，初级设计师能很轻易的复制一个高级设计师设计出的表单的样式，但是其中的思考却无法直接拿来。作为UI设计师，我们需要谨记的是，通过优化视觉表现提升表单体验只是表象，更多是要考虑到表单最终要帮用户解决什么问题，表单对于你的产品或项目起到了什么作用。换言之，先想好为什么，再想怎么做。

欢迎扫描关注我的微信公众号。热爱设计，关注用户体验，分享设计思考。

公众号回复以下关键词获取设计资源

* 回复“软件”可以获取全套设计软件（包括win系统和Mac系统）

* 回复"PS"可获取最新版PS cc 2019

* 回复“字体”可获取最全的设计常用字体

* 回复“C4D”可获取从新手到进阶全套C4D视频教程

* 回复“笔刷”可获最全的笔刷资源