编者按:你设计过结构复杂、内容繁多的表单吗？设计上有什么技巧可以简化复杂度，提高填充器的体验？本文作者列举了表单设计中可能遇到的一些问题，并给出了解决方法。让我们一起学习。

距离上次出版已经快半年了。我真的很惭愧。好久没输出内容了。看着每周越来越多的零星关注者，我的内心更加焦虑。

这半年来，换了工作，适应了新的环境，思考了新的方向。估计和大多数设计师一样，困惑一直伴随着我。前段时间写了几个星期的产品体验日记，因为缺乏深度没有发出去。以后会继续写产品体验日记，改进后分享给大家。

2020年剩下的不多了，我将陆续和大家分享一些积累的内容。感谢大家的关注和阅读。哈哈哈哈

一.导言

你通常填写的最复杂的表格是什么？问卷或文档信息录入？如果一个表单有很多字段，结构多变，填充费时费力，你会如何设计自己的表单让它体验更好？

面临的问题:

1.这项业务很复杂，有许多功能

不知道你有没有看过法律合同之类的文件，从几筐到厚厚的一摞；如果类似的文档在网上结构化，需要耗费巨大的人力来填表，完成基本信息录入。

同时录入时间不确定，流程不清晰，也制约了表格的填写。

2.过程漫长，操作繁琐

很多不同的表格都是相关的，互不相同，填写时需要来回核对确认信息，咨询和填写是并行的，操作繁琐。

3.有更多的字段和相关项目

几乎每个字段都有对应的相关项，每个单选字段的不同项决定了不同的内容。同时，由于字段数量多，层次不清，填写的人会失去职位，很迷茫。

二、解决方案

1.将内容分组并逐步填写

根据业务内容分类，通过合理使用颜色、间距、字号、卡级进行信息分类。

2.实时保存，避免数据丢失，提供草稿功能，避免任务中断

3.场分组、图式结构和链接隐喻

4.信息自动输入，节省时间

一般表单都链接到某个功能，信息会在多个入口录入。因此，在填写长表单时，如果可以从系统自动获取数据，则可以自动填写，根据业务场景判断是否修改或更新。

5.提供二次编辑功能，防止信息输入错误

一般长表单涉及非审批流时，可以无限编辑；如果是在审批流程中，需要根据业务场景限制其编辑次数或编辑规则(草稿可以编辑，但一旦提交就不能编辑)。

6.提供多人协同编辑功能

如果长表单需要不同业务领域的人填写，需要协同编辑，编辑后的人员信息会实时显示。

同时，为了避免信息丢失和编辑混乱，在同一表单下，同一时间只允许一个人编辑，提交后可以允许其他人编辑。

7.实时检查

前端实时验证字段输入规则，后端统一验证信息交换规则。

比如数字输入框、电话号码、身份证号码的验证都要在前端实时完成。

当鼠标离开焦点区域或定位到下一个字段时，提示填写不正确；这样做的目的是减少后续修订的数量。统一提示他们在长表格下填写错误将是一场灾难。

当您点击保存并填写下一步或点击提交信息时，您需要与后端交换数据以验证输入的信息；如果不匹配，会提示错误，相应的错误字段会从上到下定位。

8.完成引导功能

有许多方法可以指导表格的填写。

1)在开始填写之前，简要说明表格的业务目标和需要的时间；

2)填写后，需要标出每个字段的特殊说明。重要的要显示在页面上，不重要的要放在标注符号中；

3)在填写过程中，切记不要在最后告诉用户哪里出错了，重要信息一定要提示到位，否则一旦出错，之前的所有成果都将被放弃；

4)填写完毕，指导下一步操作，或返回列表。

9.详细页面还需要注意信息分级

表单填好后的输出是详细页面，需要浏览。因此，在设计细节页面时，我们应该遵循方便用户浏览的原则，并注意以下几点:

1)结构清晰

结构清晰的意思是不要讲页面上堆砌的全部内容，要把信息分类好；同时注意规划页面的层次。

2)设置快速导航

如果一个表单很长很复杂，那么它对应的详细页面就会变得复杂冗长，所以需要在页面的右侧或者顶部设置合理的快捷导航。

三、小细节，大体验

1.提供一个按钮来快速返回顶部

使用快速返回顶部按钮时，请注意场景。如果您的页面很长，并且没有用于组浏览的导航，您需要设置快速返回顶部按钮。

但是在组浏览导航和顶部浮动标签的情况下，不建议使用按钮快速返回顶部，因为在填写表单时，很少有使用快速顶部的场景。

2.提供分组模块的折叠和展开功能

当一个模块混合了各种信息时，模块的复杂程度就不再是简单的模块分组可以处理的了，所以需要将频率高、信息量大的模块打包，这样可以合理的降低页面的复杂度。

 

3.该步骤提供填写完成程度提示的信息

步骤栏可以简单地用作步骤指示器，或者作为表单完成的提示区域。

4.重要的说明文字应尽可能显示，而不是折叠起来

当填写一个包含大量字段的表单时，阅读表单的内容和填写表单一样耗时耗力。

如果我们把所有的提示信息都隐藏在提示里，用户一般不会去查。但是如果逐个查看提示信息，点击或者悬停查看提示信息会多一步，浪费很多时间。

所以，如果涉及到重要的提示信息，请直接显示在字段后面，不要隐藏。

5.产品中的组件应该标准化和统一

在后端产品上，组件的标准化和统一必须是众所周知的设计原则。

无论是各种基于平台的设计组件，还是各种公司制作的设计组件，保持统一性和标准化在产品设计中起着重要的作用。在这里，我们不再重复如何标准化和统一组件。

因为Ant Design和其他设计语言都有详细的组件定义方法，我在这里讲一下产品设计更高或更深层次的原因:

构件的标准化和统一不仅是为了节省时间和精力，也是为了使用户在使用过程中达到认知和行为的统一。高频操作后，界面流程或组件风格在用户心目中形成了固定印象。

因此，在操作同类流程时，用户会有更多的控制感。想象一下:如果你在操作完人事相关流程后，在填写绩效部分的时候发现了不同的界面或者弹出窗口，你肯定会认为出了问题，甚至怀疑是不是同一个系统。

目前大部分公司的管理系统都被多次修补过，内部跳转逻辑一直极其感人，界面风格也大放异彩，但却无法开始使用，让他们感到迷茫。

因此，从界面风格到间距大小，产品设计的标准化和统一应该是最基本和不可或缺的原则。

6.对于庞大的信息输入，内部表单要逐级填写，外部表单可以拆分成不同的表单分别填写

处理复杂表单，你需要解决的主要问题不是填充方式或者页面设计，而是信息分级和结构拆分。解决了这个问题之后，业务问题基本解决了，剩下的和我们常用的形式一致。

降低复杂度并不意味着减少页面的信息，而是通过设计师合理的信息划分，降低视觉复杂度和流程复杂度，从而达到当前场景下的“最优解”。

四.结论

随着互联网信息化的深入发展，复杂性不可避免。

我知道大家都提倡简约设计，但这只是视觉和风格的定义，而不是信息的定义。

我们生活的世界很复杂，行业更复杂。信息的复杂性日益增加。如果要处理复杂的信息，就需要从复杂中寻找规律，这些规律与业务密切相关。

b端360线，线深似海，朋友们，一起慢慢练吧~