表单页设计

表单（Form）是软件产品录入数据的经典页面。一个典型的表单页面中，要包括数据录入控件，以及提交、取消按钮。表单一般设计成独立实体的信息录入界面，例如客户信息录入与商品信息录入，也可以设计成几个实体的总和录入界面，例如一张表单中同时录入客户、联系人、公司几个数据实体的信息。

表单在B端产品中使用频繁，对于很多企业用户，每天都要通过表单录入大量数据，执行业务逻辑。例如销售要录入客户线索，采购要录入采购清单，运营人员要录入商品信息。表单设计不合理，会严重降低用户的工作效率和使用体验。

土豆：“说真的，我曾经有很多次被一个表单搞崩溃的经历！在咱们公司就经历过！”

大可：“是么，说来听听！”

土豆：“入职以后，HR让我在线上再次把个人信息填一遍，也不知道这是谁做的系统，填这个表单都快把我搞崩溃了！足足折腾了两个小时，我当时还专门把录入界面截图了，就是图7-x！”

图7 x  一个冗长的信息采集表单页面 

大可（脸上火辣辣，印象中当年好像是自己团队的成员设计的这个信息收集页面）：“呃，你还挺有心。。。”

土豆：“必须的，当时被这个页面搞崩溃了！简直就是人机交互反面教材的合集！心想着将来如果写书，一定要拿这个当案例！”

土豆（喝了口水，义愤填膺的回忆道）：“

第一个问题，内容太多。几十个字段，让人在一个页面操作完成，一看到就让人头大！

第二个问题，没有暂存机制。这么多字段，如果录入一半，不小心关掉页面，再进来就全没了！

第三个问题：重复录入。很多个人信息入职时已经录入过了，又让人填一遍，真的很烦！

第四个问题：不懂字段含义。例如公积金缴费年限这个字段，我就不太理解这是指连续缴费年限，还是累计缴费年限。

第四个问题：校验延迟。录入不合规的数据，只有在点击提交时才会提示错在哪里，非常被动！

第五个问题：提示文案太技术化，比如说，校验后提示说‘当前住址子节点非法’，这谁能知道是啥意思，后来我琢磨很久，才知道说的是地址选择没有到区县一级。

第六个问题：Session设置不合理，这个才是最让人崩溃的，这么多字段，这么多不清晰的校验，我认认真真仔仔细细经过多次尝试终于填完了，结果点击提交按钮，系统提示说‘会话超时，请重新登陆！’，然后页面就刷新了，再回来，所有东西都没了！我真是欲哭无泪！”

大可（尴尬的笑了笑）：“确实很让人恼火！”（心想着，当时我就应该多看一眼设计，没想到之前那个产品经理设计的这么个玩意儿）

土豆：“说实话，这都什么年代了，移动互联网APP的体验已经如此丝滑了，但现实中依然有很多toB/toG的软件，把表单设计成这个德行！每次看到这样的设计，我真想把产品经理绑起来！”

相信大家都有和土豆类似的经历。作为B端产品最常见的界面，如何将表单设计的好用、易用呢？这里总结几条建议：

自动化数据录入：产品经理设计表单时，首先要思考，哪些字段数据可以通过自动化的手段获取，避免用户手工录入。例如，从其他系统通过接口拿到字段，通过手机摄像头让用户扫描卡片证件经过OCR识别字段，根据前边的字段联动填充字段（常见的做法，先让用户提交身份证信息，接下来生日、性别都能自动带出来）。总之，尽量减少表单的录入工作，才是提效的根本。

拆分长页面：做过C端产品设计的人都知道，页面录入项不能太多，用户根本没有耐心全部填写完，将内容分解成几个页面，可以减轻用户的负担，也能实现内容的暂存。同理，对于内容比较多的B端表单，也可以按照数据的分类，将录入步骤拆成几个，通过清晰的导航，一步一步引导用户填写完成，并且要呈现出完成的百分比和进度，减少用户的填写压力！

信息分组：在拆分页面时，或者对页面内的字段进行重组时，要按照一定的逻辑做信息分组，有几种分组办法，按必填项、非必填项分组；按内容的相关性分组（例如基础信息一组、家庭信息一组）、按内容录入成本分组（例如拆分页面后，每个步骤的录入复杂性应该接近，不应该某一步录入简单，某一步录入复杂）。

视觉优化：基于CRAP原则，对页面元素进行合理的视觉处理，方便用户阅读、理解页面内容。

提供暂存机制：要么系统自动暂存填写的内容（保存时要能够通过toast等组件轻度提醒用户），要么提供一个暂存按钮，让用户自己点击暂存。谁都受不了填写好的内容莫名其妙丢失了。

字段解释：对字段的名词、规则进行解释。有歧义的字段，或者含义复杂的字段，或者对填写有特殊要求的字段，应该有提示说明，帮助用户理解。

错误预防：字段数据的校验，必须及时反馈，常见的做法，是控件失去焦点后触发校验逻辑，关于错误预防、文案优化这类反馈机制的设计，在下一章我们会深入探讨。

通过这几个思路，我们尝试对土豆入职时遇到的表单页面进行优化。先将页面拆解成三个步骤，分别录入基本信息、社保档案信息、教育工作经历，如图7-x。

​

图7 x  拆分后的页面1：基本信息录入 

在基本信息录入界面，我们还将联系方式拆分出来，和基本信息一起，各自使用虚线矩形框分组，降低用户的认知、理解难度，让页面看起来更有逻辑性、简洁。

对于必填字段，加了星号提示；对于需要解释的字段，加了小问号，用户指向问号后会对字段做出解释说明。

对于地址信息，可以让用户输入完整地址，自动识别省、市、区，避免用户手工选择。

用户点击下一步以后，来到了步骤二的页面，如图7-x。

参保类型、保险缴费年限这些用户有疑问的字段，都增加了小提示做解释。同时界面中采用了大量CRAP原则的对齐思路，大家可以仔细检查，看看哪些控件做了对齐处理。是不是看起来更清爽一些？

图7 x  拆分后的页面2：社保档案信息录入 

最后来到了步骤三，如图7-x。

在教育经历、工作经历的文本框中，用淡灰色文字做了格式要求的示意，这并非强制要求，但通过提示，希望用户尽量能按照清晰地逻辑结构描述相关信息，否则用户填写的方式，绝对五花八门。

图7 x  拆分后的页面3：教育工作经历录入 

经过重新设计，新的表单录入界面是不是清晰了很多？当然，这也需要更多精力的投入，包括设计的精力，研发实现的精力。

用户体验优化，本来就是需要付出额外成本的工作。

阅读原文：https://mp.weixin.qq.com/s/2C6gFO17A5vxAGaExVtqPg