B端表单页设计总结

B端表单页是用户提交信息的主要场景，同时也是平台向用户展示数据信息的主要方式，换句话说表单是用户和数据库之间的桥梁，它可以确保用户按照要求填写信息交给后台处理或引导用户进行各种设置，好的表单可以提高用户的使用效率和完成度，增加用户对产品的满意度，在表单设计中不同的场景所对应的设计会有所不同，此次是对团队在表单设计时遇到的一些争议比较大的问题进行复盘总结。

表单的设计原则

B端产品的核心诉求是，平台需要有更多业务场景的功能以及高效率处理各类工作任务的能力。在表单页中业务功能和使用效率体现得尤其明显，通过多种输入组件组合完成信息编辑，确保用户按照系统要求录入信息或进行应用设置，总结下来表单页的设计要遵循以下原则

高效性：通过合理的信息信息输入组件、布局及交互形式，清晰，有条理的操作体验，可以让用户快速的完成表单页信息的录入

准确性：准确通常是指符合事实标准和规则，也就是说平台向用户传达的信息与常规的标准及规则一致，让用户准确了解意图，避免操作时的恐慌与不确定

一致性：包括交互和视觉的一致性，让用户在使用时，能快速的产生操作和认知记忆，B端产品的界面元素复用性比较高，所以要求尽量保持同一元素的交互和视觉保持一致性，避免用户在不同的操作体验中横跳。

安全感：用户对产品有掌控感、操作符合预期时，才可能获取安全感，总体来说主要来自三个方面，可信赖、可控制、控理解。

1. 操作应该是可逆的，可以支持“撤销”和“重试”，以此来离开“非预期” 的状态

2. 及时有效的风险提示与反馈，单项填写的提示说明

3. 多重保护与确认，来防止用户由于疏忽、误操作所造成的损失

表单的类型 

基础布局，分步表单，锚点定位，标签页

当信息内容小于7条时采用基础布局，采用单列表单或者双列表单清晰展示信息；当信息内容大于7条时，就属于复杂表单了，这时需要根据表单的复杂度、逻辑性、关联性进行判断，选择合适的分组方式，进行归纳简化，降低表单填写负荷。

1. 当信息之间有明显的先后逻辑关系可采用分步表单

2. 当信息之间关联性较强且不存在先后的逻辑关系，可以将信息进行归类分组，内容信息不多时可在页面内进行分组展示，内容信息较多时可采用锚点定位展示

3. 如果信息之间没有关联性且不存在先后的逻辑关系，信息内容较多时，可以采用标签分组

表单的构成

标签/信息录入/提示信息/操作按钮

标签的作用是为了告诉用户此项表单需要输入什么信息，根据规范和场景的不同标签的位置会不同

标签对齐问题是设计表单页中常常遇到的问题，标签的布局主要包括左对齐/右对齐/顶对齐/图标标签/内联标签五种方式，其中前面三种是表单中比较常用的方式，每一种方式都有一定的优点和局限性，设计师需要规范的是在特定场景下选择最合适的方式和标准

左对齐：最常用的一种对齐方式之一，需要的横向空间比较大，左对齐可以很好的平衡视觉，使表单页更加工整，但是对于标签文案字数比较参差不齐的表单页空间浪费会比较大，标签与文本的亲密性也会降低，填写也会相对费力一些，阅读效率优于填写效率，所以一般用于表单详情页

右对齐：最常用的一种对齐方式之一，与左对齐一样需要的横向空间较大，右对齐由于标签长短不一致导致用户视觉动线不在同一垂直线，标签与文本的亲密性较高，填写效率会优于阅读效率

顶对齐：顶对齐是标签位于输入框上方，比较节省纵向空间的使用，用户在浏览和填写的时候都相对舒适，但是不适合用于信息条目比较多的表单

“这里要注意的是，B端业务涉及中，‘缓慢完成率’并不总是一件坏事，如果表单数据复杂程且安全性高，可以故意减缓用户的填写速度，来确保填写的准确性“

标签必填/非必填问题

填写内容过多会引发用户负担，填写的信息过少不足以支撑后续的管理维护，所以在不影响表单收集信息的前提下需要遵循最少填写原则，表单内的填写信息分为必填/非必填/不填

必填项是指用户必须要输入有效的文本信息，否则该表单就不能正常提交、保存等操作，是后续管理维护的保障

选填项是指该项信息用户可填可不填信息，根据用户意愿和需求度来自愿选择，该项的填写不影响后续的管理维护

不填项是指该项不需要用户填写，由系统自动生成例如填写企业收款人信息，选择收款人后自动生成收款人银行账户。

如果表单中大多数字段或者全部字段都是必填的仍然需要标记必填，这样用户能直观的评估工作量，了解输入信息的最低限度，在表头或者标记非必填项的形式会增加用户的记忆负担，直接标记必填项相对更加直观

必填星号通常放在标签前面，这样用户只需要扫视最左边字符，就能轻松定位必填哪些字段

为了增加表单的填写机会和效率，设计表单页时要尽量减少用户需要付出的努力和他们需要记住的信息、

信息录入

表单页的信息录入主要形式包括输入域/选择框/上传文件等

信息录入交互形式：原位编辑，气泡，弹窗，抽屉，页面跳转

原位编辑，信息复杂度较低，但是关联性较强时可使用原位编辑，原位编辑随用随变，反馈及时所见即所得，保证用户对主要功能的高效操作

气泡，也用于信息复杂度较低，是比较轻量级的操作，与表单的关联性比较高

弹窗，会中断用户当前操作，需要用户立即响应，与表单本身的关联性较弱，容纳的信息相关可以多一些

抽屉，是表单中比较常见的交互形式，承载的信息会更多，相当于页面的分支操作与表单存在层级关系，可以保证用户在不离开当前流程上的插入操作，同时也能随时退出操作

页面跳转，承载的信息最多，但是与表单页关联性最低，容易打断用户的注意力。页面跳转分为两种，新页面跳转/跳转当前页面流程，新页面跳转一般为当前页面的分支流不会干涉用户对主页面的操作，页面功能独立。跳转页面为当前页面的关键步骤，提示用户已经进入下一步操作，表单的填写避免页面跳转，尽量让用户专注于当前表单的填写中。

使用哪一种方式的容器一般要从以下几个因素去考虑

1. 内容数量

2. 复杂程度

3. 内容分类

4. 父级关联

提高信息录入效率的几种方式：

1. 选择框优于输入框

2. 平铺单选优于下拉选择

3. 智能联想提高用户输入效率

4. 智能默认减少不必要的选择和输入

提示信息：输入前，输入中，输入后提示

输入前，一般是引导信息或者提示信息，包括全局提示或者单项提示，全局提示一般位于表单的最开始，是对整个表单说明，告知用户填写的用途、注意事项、告知用户的信息安全性；单项提示对应单个输入域，只对此项输入域进行解释说明，便于用户理解，单项提示一般有输入框内提示，提示图标hover时气泡提示，输入框下方文字提示，输入框后(下)方文字提示及输入框气泡提示，可以结合表单业务的实际情况选择。

输入后输入中一般是反馈信息，提示用户当前输入域填写的内容是否符合填写规则，反馈信息要精准到用户看到信息就能明确填写的问题，不能让用户产生歧义。反馈一般是与用户操作行为相关联的，在表单页中的反馈分为单项触发，或者提交触发。单项触发是在单项填写完成或者失去焦点时，一般用于通用信息录入，例如金额/排序文本域等，即时校验金额输入是否为数字，文本域输入是否超过数字等，也用于表单信息较多且某个输入项有先决条件，会对接下来的输入产生影响，这样可以避免用户输入完所有信息后才反馈，增加用户犯错成本。

提交触发是在用户填写完表单后点击提交统一校验的，用于表单体量较小且出错率比较低的情况

操作按钮：提交及校验

当表单信息非常少时一般为3个或以下的情况，可以采用主按钮禁用原则，这种场景下主按钮禁用很容易被用户理解，且单项输入内容会得到即时的反馈，但当页面表达比较复杂时，不建议使用主按钮禁用原则，因为表单本身可能包含必填/非必填等，任务较复杂时，用户不易识别主按钮禁用原则，会让用户产生疑问，所以一般时在主按钮可用，用户提交时校验并对表单进行单项提示。

输入框宽度的设定

在表单设计中，对于单选/多选等控件，可跟随内容自适应处理，但对于输入框和选择框选择定宽好还是跟随内容好会产生一些思考，框体的宽度其实也给用户传达了不同的心理暗示，即输入内容的长短，用户很自然会思考为什么会这样。跟随内容存在框体宽度不一致等问题，在具体表单设置中，一般会设置一个默认宽度，以此为基础增加长度，并考虑不同宽度适用的场景，从而定义出有规则的框体宽度，为了保证效果，不要用太多宽度的框体，这样反而会显得凌乱，如果全部一致，四四方方，很多内容简短的信息输入也会给用户造成心理负担，所以需要选择合适的模度和数量，让表单更加简洁有序。

表单的自适应：

为了保证不同屏幕下用户的操作体验，需要规范表单的自适应规则，我们日常设计以1440宽度为例，减去导航214，容器宽度确定为1192，减去两边的边距24px，内容区宽度为1144px，

多栏表单中：最多三列，默认标签和文本框左右布局(当标签字数60%以上超过8个字时，可采用标签文本框上下布局。定义好在1440屏幕下三列/二列框体宽度、标签宽度及间距，固定标签宽度和间距，框体按照与容器的占比进行自适应

单列表单中：固定文本框宽度，按照框体和容器比例适配，当框体最大宽度为647px时不随容器拉伸，右边留白。

以上就是平时工作中总结的关于表单设计的一些问题，根据各个业务的不同可能还存在很多值得钻研和探讨的部分，希望大家批评指正～