B端表单设计的思考

以前设计的表单比较单一，一直秉承着快速录入的原则去设计，但是最近的一个项目，有个页面需要填写二十几个表单，录入的同时还需要注意数字的范围、单位等，整个过程比较复杂，因为业务的原因也不能减少内容，这时候我开始问自己，表单设计到底要遵循什么样的规律，在设计上如何去做取舍？下面就是自己的一个思考过程。

一、表单构成

在说表单设计之前，我们先了解一下表单的构成，从本质出发帮助我们解决问题。表单包括表单标签（或标题）、表单域、按钮三部分组成，如图：

在表单设计过程中，需要考虑到交互逻辑等方面内容，又可以将表单细分成八个元素，可以根据重要性、适用性等原则在设计中进行有效组合。表单细分如下：

二、设计过程

1、项目背景

项目主要是给政府部门做项目填报，因为客观原因，内容必须一页展示不能分步处理，确定了业务需求后，开始进行页面设计，下图是需要设计的页面（字段有进行脱敏处理，但是最大程度还原项目本身）。

2、页面信息排布

页面中表单有二十多个，如果进行信息归类丢给用户，会增加用户负担，影响操作效率。首先根据填写内容的相关性，对表单内容进行了分类，分为项目信息、项目指标、项目申请信息三大模块，帮助用户快速获取页面信息。将如下图：

3、标签的对齐方式

确定标签对齐方式前先简单了解下标签对齐的三种方式及其优缺点：（参考了马泰奥·彭佐从2006年7月进行眼动研究数据）

项目中的页面表单数量大，表单内容复杂，用户对所需录入的内容不熟悉，从而导致出错率高。用户在页面中的实际需要有两个，一是需要快速浏览内容来确定是否有需要录入的数据，二是录入数据，相反用户对录入速度埭要求并不是很高，同时多个重要数据的录入需要降低操作效率来提高准确率，因此选择了左对齐标签的形式。

4、确定设计细节

确定了设计的大方向之后，需要考虑更多细节内容：

1）“ * ”号的位置，标签左边还是右边？

用 “ * ”来表示必填大家达成了共识，但是“ * ”应该在标签左边还是右边没有明确的定论，参考了腾讯云平台、京东云平台等，都是在左侧，这么做的好处是，用户从左到右的阅读习惯，第一眼就会注意到“ * ”并留下必填的印象，这正好符合这个页面设计的目标，最终确定了标签左对齐的形式。“ * ”放在右侧，会因为标签的长短出现“ * ”位置不同的情况，红色的视觉焦点会打乱用户浏览的节奏。不过在设计中我们要根据实际情况来确定“ * ”的位置，比如下图中放到右侧完全没有问题（“ * ”在右侧时，标签不建议加“：”号，两个符号会互相影响）。

2）标签末尾是否需要“ : ”号？

通过调研可见，对于有没有“ : ”号，还是比较主观的取决于个人习惯。新华字典中冒号有提示下文的作用，考虑到用户是政府单位人员，比较严谨和稳重，本次项目中采用了使用“ : ”的设计，更贴合目标用户的习惯。

3）输入框是否需要一样长？

所需设计页面中表单的录入类型有：直接录入、下拉选择、日历选择、内联选择；录入的内容有文字、数字（金额、面积、电话、人数、天数等）、日期等，录入的内容不同所需输入框的长度也不同。表单的长度对用户有心理暗示的作用，如果录入金额的输入框和录入标题的输入框一样长，会增加用户心理的不确定性（用户会想我是不是看错了，少写了，数据是不是不对等，怎么还有这么多内容没有填？）从而导致录入速率降低，同时页面中有二十多个表单，输入框长度一致，会导致用户视觉疲劳，所以选择了不同长度的输入框设计，如下图：

4）数值录入需要注意什么？

页面中有近10个表单需要录入数字，录入前要先选择大于、等于、小于、等范围值，数字的单位也有万元、 ㎡、人、个、月等，对于这些复杂信息如何快速帮助用户理解呢，下面是思考过程：

5、输入结果反馈

页面设计是用来操作和交互的，用户输入内容后需要告诉用户输入的是对还是错，那么什么时候反馈结果，反馈什么结果，反馈的形式是什么，应该如何确定呢？设计中将反馈时机分为聚焦和提交两块，那么一些数字输入框，如果用户输入的不是数字就会在录入过程中提示，必要内容没有填写则需要点击提交按钮时来提示用户；录入结果正确的我们默认不给用户反馈，错误的会给用户提示并告诉用户为什么错了；用户点击提交后成功或不成功都会给用户提示，让用户明确知道页面提交的结果。具体反馈模式如下图：

6、最终方案：

根据以上思考，输出最终方案，如下图：

三、结语

文章主要是讲自己设计的一个思考过程，通过实例的方式更清晰的表达自己的思考逻辑和问题侧重点，其中也有不完美的地方，主要就是想和大家一起交流学习，表达设计思路，共同成长。