B 端表单设计方案总结

近期浏览各网站一些B端设计分享，结合实际项目的经验，总结了关于B端表单设计方案，交互细节及使用模式场景的相关设计及应用规范参考。

表单的设计原则

原则 1： 填写过程尽量简洁、容易

原则 2：目标明确，路径清晰

原则 3：符合目标用户情景

原则 4：确保用户操作与反馈正确性

一.表单的模式和使用场景

在B端设计中，表单是非常常见的设计需求。根据表单的复杂程度以及业务场景不同，我们对表单的呈现方式也需要根据实际场景做出相应的调整和设计。下面针对不同业务场景，对表单的呈现模式进行一个总结。

1.表单的设计模式

(1) 平铺

平铺是指将表单内容简单完整地排版在界面中，是最基础的表单排列模式，适用于表单信息简单，内容关联性强的一组表单任务的填写。

项目用例：短临预警系统中的新增短信模版，字段信息少且简单，可直接采用平铺模式。

(2) 分组

很多时候，业务所涉及到的表单内容是非常复杂的，如果都采用单一的平铺模式，内容呈现则会变得非常杂乱不清晰，用户填写起来也会感到非常繁杂，所以，分组在表单设计中则显得非常重要。分组的形式大致分为三类：区域分组，折叠分组，标签分组。

区域分组

划分界面区域，通过间距调整，矩形分类等方式，对表单内容进行分类展示。

项目用例：土地整治的填报，所涉及的填写内容多样，采用的区域分组；必要的时候，对于分组内的信息，可以进行二次分组，使表单填写过程的逻辑更加清晰。

折叠分组

表单信息分类展示，可通过点击展开一组表单信息，不用时可收起来。折叠分组的优点是用户可以一眼概览表单的主题内容，方便快速锁定目标，完善对应的表单信息，这样用户就可以不用在庞大的表单信息中去寻找自己需要完成的内容。适用于分类后，所展开的表单信息内容不多的情况。

项目用例：矿山系统专项资金使用情况的填报，可以选择对应的文号展开，填写各类资金的使用情况。

标签分组

标签分组是将表单信息以标签的形式分为几个小组，有上下结构和左右结构两种。标签分组也能帮助用户一眼浏览表单的分组大类，如果一个表单涉及到多种内容字段，且每类字段信息相对独立，则可以使用标签分组。标签分组在每类信息较多的情况下，适用性也强于折叠分组。

项目用例：矿山系统的任务书下达使用了上下结构的标签分组，分为资金信息，任务书信息和项目分配三个大模块；项目进度填报则采用的左右结构，进行调查设计，施工，初验及终验等不同阶段的信息填报。

2.表单的呈现方式

(1) 弹窗

弹窗是最常见的弹窗呈现方式，结合底部暗色遮罩层，出现在屏幕的正中间，让用户能更专注于填写当前的内容。弹窗模式的表单一般是针对表单信息量不大的情况，且填写表单不需要关注底部页面的信息。

项目用例：日常项目中，类似列表新增功能，大都采用弹窗模式呈现相应的表单内容。

(2) 抽屉

抽屉模式是指信息从侧边弹出，有时也从底部弹出。适用于填写内容较多，且与底部内容关联性较强的表单信息的填写。抽屉的形式具体还可以分为：有遮罩层的抽屉模式，无遮罩的抽屉模式和挤压模式。

有遮罩的抽屉模式

该模式是指抽屉下层有透明遮罩层，与底部内容隔离起来。适用于展示信息较多，且与底部内容关联性强，但是不需要同时操作抽屉内容和底部页面内容的情况。

项目用例：矿山进度填报，用户在选择文件时需要查看相关文件目录，此时目录信息从右侧弹出。

无遮罩的抽屉模式

指底部没有半透明遮罩的抽屉模式，抽屉从侧面弹出，通过对抽屉底部添加适量投影来与底部内容进行区分。该模式下，用户在填写抽屉信息时，可以同时操作底部内容。

项目用例：隐患点查询统计，用户需要对隐患点进行属性查询，同时与底部地图联动，所以采用无遮罩抽屉模式侧边弹出查询表单，查询结果列表从底部弹出。

挤压模式

挤压模式从侧边弹出，同时减少原本的内容空间。挤压模式与无遮罩层的抽屉模式具有相同的特点，此外挤压模式还可以完整看到原本界面中的内容，右侧表单可以自由展开和收起。

但是挤压模式不适用于表单信息内容复杂的场景，因为挤压通常会影响原本界面内容的展示，界面适配难度增加，甚至造成原本内容变形，用户体验感也会降低。

(3) 页面

当表单信息庞大且与原界面无强相关的可以直接采用新页面呈现。使表单单独成页更好地展示表单信息减少其它信息的干扰。

项目用例：斜坡调查pc端，隐患点调查表作为一项独立的表单内容，且所填写信息较多，所以采取单独页面进行填写。

总结

设计模式：

1. 表单内容简单可采用平铺。

2.表单信息多样，想要实现快速定位，采用标签分组或折叠分组。

3.可根据实际业务情况，灵活组合使用各种分类模式。

呈现方式：

1.表单信息量不大，与底部无相关采用弹窗模式。

2.表单内容与底部相关，但无需操作底层内容，采用有遮罩抽屉模式。

3.表单内容与底部强相关，且需要同时操作，采用无遮罩抽屉模式。

二.表单的对齐方式总结

为了应对不同的使用场景，我们需要根据实际情况，采取不同的对齐方式，以达到想要的效果。

总的说来，表单的对齐方式包含以下几种：

1.顶对齐

优点：填写表单速度最快。

在顶对齐模式下，标签和输入框的距离是最相近的，用户只需要简单地眼球向下移动，就可以非常迅速地捕捉到目标信息，并对应填写进相应的输入框中。

除此之外，在顶对齐模式下，横向扩展性提高，从而大大减少因标签长度差距过大而造成的界面布局的负面影响。特别是涉及到跨语言的标签类型，举个例子：在相同的内容下，英文所占的横向距离远大于中文字符，所以当标签为英文或者是其他语言时，顶对齐的优势则显而易见。

2.右对齐

优点：标签与输入框相邻，便于填写

右对齐模式下的标签和输入框相邻，所以同样有利于表单的填写；相比顶对齐，纵向距离也有所减少。

但是右对齐会造成左侧空缺不一致，特别是遇到长标签的情况；而如果长标签使用换行，人们从左至右的阅读习惯，则视觉效果凌乱感会加强，进而降低可读性。具体展示情况如下：

3.左对齐

优点：布局整齐，标签容易被浏览

左对齐模式下，对于用户获取标签内容是有利的，因为用户只需要上下移动视觉即可。但同时，长标签的存在，增加了标签与输入框之间的距离，使得用户在填写表单时为了准确对应而花费更多的时间。

即便如此，虽然左对齐填写时间最长，但为什么后台系统的表单几乎都采用左对齐模式呢？

统观各类对齐方式的优缺点，我们可以总结出左对齐的优势：

1.输入重要信息时，正好需要放慢用户浏览速度，提高表单填写的准确性。

2.视觉整体的规范统一，能提高用户第一感官，进而提高表单填写准确度。

4.输入框标签

优点：占用空间最少

在标签内容短，屏幕空间有限的情况下，可以使用输入框标签，能节约接近一半的面积。

输入框标签通常用于登录注册界面，在业务系统中很少使用，因为用户在输入框聚焦，填写完内容后，所填写内容会覆盖原标签内容，如果用在业务系统中，会极大影响用户对表单内容的再次核对。

总结

1.标签内容尽量简洁，字数在可能的情况下，尽量保持接近

2.注重填写时间，且标签长度需要灵活多变，采用顶对齐

3.注重填写时间，且需要缩短垂直空间，采用右对齐

4.注重整体整齐，且需要用户准确填写信息，采用左对齐

5.标签内容短，屏幕空间极其有限，在符合用户场景情境下，酌情采用标签对齐

6.单一表单需保证对齐一致性，不可随意变动

三.表单的交互细节

表单设计的最终目的，是在确保获取准确信息的同时，尽量提高效率，简化用户操作。每一次表单填写，就是一次用户与系统的对话。所以，除了基本的表单排列方式以外，为了让用户能够更高效地输入信息，在一些交互细节上，也值得我们不断去思考和总结。

1.提供即时验证

很多时候，即使标签提供的信息准确，用户却不一定能准确输入相应格式的内容，为了能够即时给予反馈，则需要在用户填写表单时，提供及时验证或提示的相关信息。

(1) 确认

用户在填写表单时，不清楚自己填写的内容是否正确，所以及时给予用户确认反馈，能让用户尽快修正内容，提供正确答案。

例如：用户注册界面，通常用户名及密码都有其规定的格式与字长，若此时不及时提供帮助，则用户无法知晓正确格式，只能通过一次次尝试，这将会是一个非常糟糕的交互体验。所以，通常在类似这种界面，我们会要求及时并清晰告知用户正确规范，避免重复多次错误操作。

(2) 建议

为用户预先提供回答建议，也是即时验证的重要途径之一。

日常用例：登录时，提供用户经常输入的用户名，实现快速登录；查询时，根据用户输入的关键字，及时提供对应可供选择的枚举等。

(3) 限制

为了防止用户任意输入内容，给输入框添加某些限制也是常见的措施。

例如：备注填写，因其内容的多样性，通常没有固定的格式，但会给予一定的字数限制，避免用户输入过多冗余文本。

2.减少多余输入

在向用户提出问题时，如果有的问题非必要，或是可以根据用户填写的某些内容自动推断出正确内容，则不需要用户手动输入，这样可以简化用户的输入过程，更高效率地完成表单填写。

(1) 去除问题

在满足能满足用户需求或运营目的的基础上，减少填写多余的输入框

日常用例：添加银行卡，在输入银行卡号后，自动回显所属银行等信息。

项目用例：资金管理系统中，选择文号之后，对应会回显相应的批次，文件印发时间等和文件相关联的信息。

(2) 智能默认

通常用于选择框的表单中，在用户未选择答案情况下，默认选择满足通常情况的某一答案，减少不必要的选择次数，加速表单的完成过程。

项目用例：地灾智防app日常巡查，日常定点巡查过程中，通常现场情况默认选择无异常。

(3) 个性化默认

除了智能默认以外，常见的，也会根据用户的自身情况，设置默认选项。

日常用例：疫情期间我们经常用的健康上报，因为上报操作可能会比较频繁，隔一段时间需要更新一次，所以系统会默认记住第一次填写的内容，之后的上报就无需再填写所有的内容。

3.提供额外输入

有时候，针对不同的用户和场景，需要填写的数据量也并非是统一的，这时候可以提供额外输入。

(1) 即时增加

即时增加，即提供额外的输入框给需要的场景，同时不妨碍不需要的人进行简单操作。

项目用例：风险管控的预警模型配置，不同的地区，需要配置的预警模式不一样，用户可以根据实际情况自主添加模式，并填写对应阈值。

(2) 叠层

叠层是实现额外输入的另一种展现形式，额外的输入框以类似浮窗的形式显示在表单上方。

日常用例：日历控件，用户可以在叠层的日历控件窗口，选择特定日期，回答输入框的问题。

项目用例：在隐患识别成果管理中，筛选条件输入框和新建项目输入框以叠层形式显示在表单上方供用户输入相关信息。

叠层使用场景和注意事项：

1. 希望为用户提供一个清晰的编辑区域，且页面上下文内容对编辑任务不会产生影响，可以使用叠层。

2.用户不会频繁编辑的内容，可以使用叠层。

3.叠层中的多个输入项，是一个整体。

4.基于选择的输入

基于选择的输入，根据用户的初始选择提供不同的表单，并要求用户继续回答。

(1) 页级选择

页级选择，把表单填写过程分为明确的两步，是解决表单选择性输入问题最简单的方法，通常采用两个独立的页面来展示相关问题：

第一页向用户展示初始选项，用户做出选择后，则进入第二页显示相对应的表单内容。用户一旦做出选择，就无法查看并访问到初始选项中的其他未选选项，除非退出重来。

页级选择的优点是初始选择和相关输入之间的关系明确，步骤清晰，填写不易出错。

项目用例：斜坡调查系统，在进行斜坡易发性打分时，需要用户先选择斜坡的类型，再进入相应的页面，填写该类型斜坡相关需要填写的表单内容。可以看到，用户选择过后，若要查看其他类型斜坡的表单，则需退出该页面，否则无法访问。

(2) 水平选项卡

水平选项卡即标签页，也是表单系统中非常常见的一种实现选择性输入的方式。

水平选项卡位于表单上方，显示一组初始选项，用户可以浏览表单并选择进入相应的表单模块进行填写。

水平选项卡的优点是指示性强，且方便用户任意切换，出错率也较低。

项目用例：矿山生态修复系统任务书页面，采用了水平选项卡，用户可以切换并填写资金，任务书和项目分配相关信息。

(3) 垂直选项卡

垂直选项卡为自上而下排列的标签，相比于水平选项卡，垂直可提供展示的选项更多，且能更方便用户快速寻找目标。

项目用例：斜坡调查隐患点调查表，左侧采用垂直选项卡的形式展示隐患点列表，用户选择隐患点并进入相关表单页面填写。

(4) 单选按钮选项卡

单选按钮做法的优点在于能保持所有初始选项，以及这些选项中的个人选择始终可见。初始选项和其额外输入之间关系表现很明确。但是，单选按钮不适用于额外输入内容较多情况，否则，用户在切换选择后刷新界面的改变容易使用户短暂迷失方向。

总结

1.如果每个初始选项所对应的输入框内容较多，采取页级选择。

2.水平选项卡和垂直选项卡两种方式综合可用性较高，便捷度和效率提升效果也较强。

3.如果每个初始选项所对应的输入内容少，可选择单选选项卡形式。