B端产品中的表单设计与思考

一、前言

在B端产品设计，由于业务体量庞大、信息复杂。对于信息的准确性也要求非常高。那么，对于承载信息录入的表单来说，表单的设计就变得尤为的重要。如何快速的让用户在最短的时间内录入好正确的信息。是我们在设计表单时常常值得思考和深究的问题，本文的分享，主要是自己在B端产品表单设计中所遇到的一些问题以及经验的总结和分享。希望可以给到大家一定帮助

二、表单的定义

那我们先来说说什么是表单，在B端产品中，表单是数据信息的添加和编辑的唯一方式，是系统获取用户信息的重要交互方式。是人机交互中，采集、传递、提交数据的中间谋介。

三、表单的结构：

一个完整的表单，应该又以下7个部分组成：

1.标题：表示用户录入和编辑信息的所属层级，主要位于表单的左上方或者居中位置。通常在信息较多时，对信息进行分类和编组，方便用户对于信息的录入操作。

2.标签：告诉用户录入的是什么信息，即信息的含义。

3.必填标符：信息的录入主要分为选填和必填。我们常常用有无红色的“*”对此进行区分，一般来说带有“*”表示必填，反之，为选填。当然，有些表单的设计对选填和必填直接用文字            进行区分。

4.提示信息：主要通过icon的鼠标悬停展示，对表单信息的解释和帮助。

5.操作反馈信息：主要是对于输入信息的反馈，一般在操作失败的时候进行提示错误的原因。反馈信息一般为输入中反馈和输入后反馈。

6.输入域：对用户输入数据信息的采集。我们常见的输入域主要包括输入框、单选框、复选框、时间选择器、开关、文本上传、滑块选择、密码输入框等等

7.Button：为表单信息录入完之后的操作，通常为【取消】【重置】【确定】等操作，是对于信息进行后台传输的重要操作。

3.1标题

关于标题的设计，我这里把它分为三种样式：一是纯文字的标题，二是文字+icon样式。三为文字tob切换。

3.1.1纯文字形式

适用于标题切换模式以外的所有表单标题，并且在不同使用场景下使用居中或者左对齐。一般在分组表单使用的是左对齐。登录注册等表单中使用居中或者左对齐。  

3.1.2文字+icon形式

主要用于分组表单中，在表单组类比较多时，使用文字+icon的标题对分组进行一个比较强烈，方便用户快速的查找。

3.1.3文字切换形式

主要针对用户可以选择不同的种类表单的进行填写。常被用户登录方式的选择等。

3.2标签

根据标签的文字与输入域的存在方式我们分为内联标签和外联标签。其中外联标签根据文字的对齐方式分为：顶部对齐、左对齐、右对齐三种标签。内联标签根据文字的的形态与样式可以分为：文字、图标、浮动三种标签。

对于这6种不同样式的标签，每一种都有不同的优缺点，适用于各种不同的用户场景。当然我们在进行B端产品设计的时候，根据公司业务场景特点，选择合适的标签，来提高用户的阅读速率，降低用户的填写错误率。同时，在对一个系统或产品进行设计的时候，我们最好只选择其中一种标签，来保持设计的统一性，降低用户的认知度。

3.2.1左对齐

标签左对齐，文字阅读有一个统一的阅读视线，符合用户的阅读模式，有利于用户对信息的读取，

但是受限于标签字数的长短，造成右边的视线不能够统一。与输入域视觉间距大小不一。标签越短，与输入域的间距越大。根据菲茨定律，既起始位置离目标位置距离越远，我们到达目标位置所花费的时间就越长。反之，离目标位置越近，我们所花费的时间就越短。所以对于整个表单的浏览速度也会变得缓慢一些。当然如果对于数据信息比较敏感或很重要（比如驾驶证号、身份证号、银行账号、手机号码、邮箱等），故意设计使用户的读取速度偏慢，会让用户认真的阅读，保证信息采集的准确性。

3.2.2右对齐

标签右对齐，与输入域距离固定，有一个明确的视觉关联，对于阅读时间相对来说也是比较短。对于标签比较简短且信息相对来说不是那么重要。使用右对齐能够快速的完成表单信息。但是因为标签的长短不一，导致左边参差不齐，在阅读习惯上体验相对比较差。

3.2.3顶部对齐

在左对齐和右对齐中，眼动视线路径呈现的是‘z’路线，即从左到右，从上到下。在顶部对齐中，眼动视线路径呈现的是‘l’路线，即从上到下。所以在表格信息填写时间上，顶部对齐是优于左对齐和右对齐的。同时在顶部对齐中，对于长短不一的标签长度都能够更容易的融入到表单页面中，

但是顶部对于页面的纵向空间的占有率非常大，一旦填写的信息非常多的时候，页面会非常长，然而我们在B端产品设计时，很看重单个页面的空间利用率。

3.2.4框内文字标签

文字标签就在输入框内，与输入域的联系紧密，对横向和纵向空间的占比很小。由于文字标签就是输入域的提示性文字，随着用户的信息输入，文字标签会被信息替代。导致用户在复核表单信息时，不知道填写的信息是否准确，增加一定的错误风险。

3.2.5图标标签

由于框内文字在复核表单信息时不够准备，为了防止出现一定的错误，设计师演化使用图标标签对该表单进行说明。但是如果意识符表现不强或者不够明确，用户就会猜测和思考所表达的含义。

3.2.6浮动标签

用户在输入前后，标签会有一个移动和颜色变化的效果。在页面的横向和纵向节省了一定的空间，同时，因为提示信息也存在。保障了用户填写的信息准确性。但是因为标签的文字太小，对信息的阅读会造成一定的影响。同时因为标签的移动和变化，对开发的实现的成本相对比较大。

3.2.7总结6种标签样式的优缺点和使用场景

3.3提示信息

主要通过icon的鼠标悬停展示，对一些业务的专有名词进行解释或者提供表单准确性填写的说明。

其中，建议气泡悬浮于上方，为什么呢？因为人的阅读习惯是从上到下，如果气泡暂时在下方，不但会挡到下方的表单信息，同时在鼠标移入下一个悬浮图标时，会被上面的气泡给挡住。

3.4必填标符

对于我们B端产品信息的录入，分为选填和必填。对于我们常用的必填标符，经常会使用红色的“*”来标记为必填。当然还有一种的样式，就是对表单中的选填进行文字的说明，因为毕竟在大多数B端设计中，80%以上的信息是必填，选填只是占了很少的一部分，文字解释的不多。但是由于标签的长度增加了，相对的增加了横向空间占比。

3.5操作反馈信息

反馈提示是后台系统对用户输入信息的校验，并对校验结果给予前端页面一定的形式的展示，根据输入信息的时间前后，我们可以分为及时校验反馈和输入后反馈。

3.5.1及时校验反馈

常见的及时校验反馈是系统根据用户输入字符数量和样式的不同，时刻提醒用户输入的字符是否符合要求。该方式的校验条件基本上放在本地，不需要实时向服务器发出信息校验。

比如Adobe网站的表单注册页面，密码的设置要求以下符合条件，根据用户输入的字符样式，给与用户一定的反馈提示。

3.5.2输入后反馈

在完成表单信息或者阶段性完成时，用户通过button操作，触发与后台系统实现数据校验。在前端界面展示所有不合乎要求的反馈提示。列如微盟里面的店铺信息的页面

3.6输入域

输入域是表单的核心主题，是用户输入信息的表现形式，在B端产品设计中，我们常见的交单主要分为两大类：输入型表单和选择型表单。其中输入型表单包括单行文本框、多行文本框、数量输入框。选择型表单包括单选框、多选框、时间选择框、下拉选择框、开关、滑块选择、上传附件。

在输入域中，存在这么多的控件样式，那么在设计B端产品时，我们该怎么选择适合的控件样式，来提高用户表单填写的速率。

3.6.1单行文本框

1.针对单行文本框的设计，它的宽度应该向用户暗示用户填写内容的长度来减轻判断的负担，同时，对于一些数量的填写加入合适的单位，能够减少用户的读写成本。

如下图的案列，对于注册资本的填写，我们将其改为以“万”为单位，同时对输入框进行宽度的处理。让用户在填写数值时，不但能够减少用户的记忆成本，也能符合用户对数值的心理预期。

2.对身份证、电话、银行卡等一连串长数字信号来说，采用空格进行间隔，根据米勒定律（对短时记忆能力进行了定量研究，他发现人的短时记忆能力广度为7±2个信息块，记忆信息超过了该范围就容易出错），通过用户的记忆结构来提升用户的阅读体验。

3.6.2多行文本框

针对多行文本框的设计，使用可拉伸的的文本框比固定框的更好，从用户体验讲，可变化的文本框适用各种用户的阅读习惯。同时，因为固定文本框常常会出现滚动条，会使页面出现多个滚动条，给用户的使用操作上带来一定困扰。

在对文字字符有限制输入时，给与用户一定的明确提示，增加用户感觉，减少用户出错。

3.6.3数量输入

在B端产品设计时，对于数量的输入，我们常常会是有一个范围值。不能输入超过范围的数值，并且在临界值时，对于数值调整的图标应该有一个不点击的状态，给与用户操作一定的提示。

3.6.4单选框

对于用户单项选择的设计，如果用户可选择项目较少时，将选项全部排列出来会比下拉操作更好，比如以下对于【状态】的选择。采用全部展示的方式设计，用户能够一眼就能看到所有选择，只需要一步操作就能够完成。

那么如果用户的可选择项目比较多的时候（一般超过5个时），则优先考虑使用下拉样式。比如以下对于【机构类型】的选择，采用下拉选择的方式进行设计。因为B端产品中，用户对于选项往往有自己预期。然而同类选择项目之间很类似，容易混淆，需要进行强烈的对比，在这种场景下，下拉选择比单选框的对比效果更加强烈。因为下拉选择只有纵向的对比，单选框不仅需要左右对比，还需要纵向对比。所以在此情况下，下拉选择能够提升用户的选择效率，降低用户的错误率。

如果选项过多，超过二十个时，我们最好采用一定的规则进行排序（数字排序或首字母排序），方便用户知道选项的大致位置，甚至可以通过模糊搜索来找到用户想要的选项。

3.6.5复选框

在一组可选项中进行多项选择时进行使用。如果进行单独使用，则表示两种状态的切换，比如在登录注册页面对于用户协议的勾选。这一点与switch开关的作用很类似，区别在于switch开关是直接触发状态的改变，而复选框一般用户状态的标记，通过提交button进行状态的切换。

关于对于复选框与下拉选框的选择设计，其实和单选框与下拉选框的设计是类似，唯一不同的一般我们在用户可选择项目超过7个时，我们才会考虑使用下拉多选框

在表格设计中，常常对于信息的的批量操作使用复选框进行勾选。这个时候对于的表头中全局选择就会存在部分选中这一状态。

3.6.6时间选择框

时间选择框主要分为时间点和时间范围。对于时间范围的选择，主要在格式上需要一定的注意，当时间点使用的是中文，则采用“-”进行连接，当时间点使用的是“-”，则采用“至”进行连接。

3.6.7下拉选择框

对于地址这种类似的联级选择框，设计下拉框时，将省份、城市、区信息合为一处，减少点击次数。下图两种形式相比较，鼠标点击次数上右边形式更少，操作交互更加流畅，比较符合用户的使用习惯，右边下拉框比左边视觉效果上会更简洁。

3.6.8 Switch开关

主要表示开关状态或者两种状态的切换，除了常见的开关之外。还有带文字或者图标的，对状态进行一个强区分。

3.6.9 滑块的选择

当用户需要在数值区间进行选择固定值或者区间值的时候，我们就设计使用滑块输入条。并且应该对其中的固定值或者区间值进行数据的标明，保证用户在录入数据信息的准确性，减少用户在数据复核时操作。

对于用户来说，如果要求调节一个单位值时，这个时候，滑块移动的距离非常短，用户很难把控操作，那么我们在设计时，应该结合数据键盘中的上下左右键进行数据的微调。

3.6.9 附件上传

附件的上传一般是指将信息（网页、文字、图片、视频等）通过网页或者上传工具发布到远程服务器后台的操作。一般分为文件的选择上传和拖拽上传两种。

文件的选择上传

如果用户需要上传的文件过多，那么可以使用上传文件夹的设计方式。减少用户不必要的重复操作

拖拽上传

把文件拖入到指定区域，完成上传。根据菲茨定律中的目标面积越大，我们定位到目标的所花费的时间就越短。反之，目标面积越小，精准定位到目标上的时间就越长。所以我们设计的指定区域时，一般空间都比较大。方便用户的定位操作。

3.6.10按钮

标记一个（或封装一组）操作命令，响应用户的点击行为，触发相应的业务逻辑。在表单设计中，常见的按钮可分为以下五类：

• 主按钮：用于主行动点，一个操作区域只能有一个主按钮

• 次要按钮：重要性仅次于主行动点。

• 默认按钮：用于没有主次之分的一组行动点

• 虚线按钮：常用于添加操作

• 文本按钮：用于最次级的行动点

  
  

并且对于每一种按钮，都可以分为常规和禁用两种状态。禁用状态的出现一般是表单所呈现的内容未达到能够触发按钮点击。比如在网易七鱼的登录页面中，【下一步】按钮最初禁用状态，只要当所有信息填写完全之后，【下一步】按钮才能够被点击。

关于在同一页面中主按钮，次按钮、默认按钮三种样式的摆放位置以及顺序。根据古腾堡设计原则，当用户浏览一个陌生界面时，他们的视觉焦点会从左上角一直到右下角。并停留在视觉的终端休息区（结尾处）。如果按照用户的阅读后再进行操作的话，按钮摆放的最佳位置为页面右下角。

那么对于这三个按钮的摆放顺序如何呢？如下图，如果使用样式一的摆放顺序，根据用户的视觉觉焦点会从左上角一直到右下角，但是因为主要按钮放在最左边，其使用主颜色来吸引用户的焦点，所以对于用户阅读会有一个眼动阅读的跳动。但是对于样式二的选择，主按钮放在右下角，用户的视觉觉焦点一直从左上角到右下角，眼动路线流畅。

对于一些改变表单信息相关状态的按钮时，比如删除、移动、权限修改等操作的时候，一般需要进行二次确认，主要是防止用户的误操作。

4表单的类型

在我们常用的B端产品设计中，对于不同的用户场景和任务的复杂程度，使用不同类型的表单。根据任务的复杂程度分为：

1.基础表单

2.分组表单

3.分步表单

4.Tob切换表单

5.其他表单

4.1基础表单

适合内容项比较少的、内容项无法按照相关性分组的表单。一般是平铺所有需要填写的信息，在日常项目中，我们会采用单列、双列或者多列的表单进行设计。双列或者多列表单能够提高横向空间的利用率，但是单列表单往往浏览和填写的速率更高，用户的视觉路线更加的流畅，能够有效的减少用户的疲劳度。因此，根据表单设计的目标，推荐使用单列表单。

4.2分组表单

对于单次任务的表单页面中需要填写的内容众多，并且在不同内容之中存在一定可分类归纳的类别。对于内容进行适当的分割处理，让用户在填好一组内容后进行心理上和视觉上的停顿休息，减少用户的数据疲劳和所填表单过多造成的心理压力，降低用户出错率。

4.3分步表单

对于用户所填的表单信息过多，在用户操作上有着明确的先后关系，那么就将用户需要填写的信息按照线形流程组织，利用步骤条告知用户完整流程和进度，并且每一屏只展示该步骤下的表单信息，校验反馈也分布进行。在流程结束后给与所有步骤的的结果反馈。

4.4Tob切换表单

把所有表单信息进行一定的分类归纳，并且不同类别之间的关系的相互对立的，通过tob切换的方式，把所有类别中的表单展现出来。用户只要选择其中一种类别的表单信息进行填写。通过信息提交，就能够完成当前的任务。

4.5其他表单（非重要必填项默认收起状态，点击展开）

对于表单内容很多，且存在一些没那么重要的非必填项，可以选择默认隐藏，用户有欲望填写时点击展开可进行输入填写。比如搜索条件太多，默认收起，展示更多的重要信息内容；需要搜索时，点击展开。同时根据展开表单数目的多少，我们可以设计为折叠面板表单和抽屉式表单。当隐藏的表单少于等于8项时，一般采用折叠面板设计。当隐藏的表单多于8项时，采用抽屉式表单。

5表单的设计原则

表单的设计主要是帮助用户明确当前页面任务，快速查找和定位修改目标，轻松准确地理解表单项含义及生效后果，同时简化填写流程，确保用户准确、轻松、快速地完成任务。

主要按照以下设计原则：

a高效

通过合理的信息组织形式和表单组件的使用，使用户可以快速完成表单页任务

b明确

1. 快速定位重要信息和目标选项；

2. 标题、选项、提示等内容准确传达含义；

3. 让用户感知不同大小操作的前因后果，并及时响应相关反馈。

c安全感

合理的操作后果保障机制，例如针对复杂表单提供分布或即时保存机制；针对不同场景任务提供返回、重置、取消、清空、撤销等后悔药和速效药功能。

根据相关的设计原则和用户场景，得到了一下几点相关的结论和技巧：

1、选择框优于输入框

任何高密度的操作，都会引起用户的不适。因此，在对用户信息的输入选择时，能够使用选择框的尽量不选择输入框。用鼠标点击的选择来代替键盘输入。

一方面，简化用户的操作，点击次数远小于输入，减少用户的操作密度，

另一方面，减轻用户的认知、记忆负担。相较于输入框，选择操作步骤少，相对来说效率较高，同时，用户用思考输入值，也不用承担输入错误要重新输入的风险。

用户可以通过选择项，清晰明确的知道有哪些值可以选择，对于一些无关紧要，或者用户较难理解的输入项，可以预制默认值，可以照顾到各阶段的用户。

2、统一样式

一个表单页中针对同一种内容类型的表单项不要使用不同的组件或表现形式，会增加用户理解成本

3、文案提示

表单项的提示文案不要使用不易理解的词汇或过长，造成理解成本，如不可避免使用少见词汇，可使用帮助说明等元素辅助设计。

使用『良好的默认值』、『结构化的格式』、『输入提示』、『输入提醒』等方式，避免让用户在空白中完成输入。

4、智能联想

智能联想是给予用户键入字段的联想功能，方便用户进行选择，将原有输入变成了选择。如：邮件可以给予常见域名的联想，@后会出现163.com、126.com、qq.com等域名让用户选择。

比如我们在注册百度账号时，由于百度使用基数大，注册用户数多，很多常见的字段都已被注册占用。当用户输入某个已被注册的用户名时，除了后方出现的反馈提示，下方还出现了根据用户输入的用户名相类似的推荐用户名。

5、精简不必要的输入项

在能完整获取需要信息的前提下，输入项越少越好，能够对用户的输入信息进行充分的利用。例如：让用户输入了身份证号后，就不要让用户再一次输入生日，此时可以从用户的身份证号中读取用户的生日，从而减少用户的输入

5写在最后

对于表单的相关设计，看似容易。但是在设计原则和技巧远远不止文章说的这些。想要提高用户对于表单的体验，需要平常的日常积累和项目的研究。

希望此文章能够对大家有一定的作用。关于文中的一些设计观点，如有不足的地方，可以再评论中留言，大家一起讨论。

参考文献如下：

1.《B端产品中，Web端表单如何设计》

2.《Ant Design表单设计》

3.《5个方面阐述：web调单设计》