二表b是什么意思啊(二表a和二表b是什么意思)

这是表单B端产品中的常见功能。在设计和输入表单时，要尽量减轻用户的思维和理解负担，提高表单的运行效率，降低用户出错的概率。笔者总结了一些B端表格设计的知识点，分享给大家。

一、概念

在B端产品中，表单是高频的载体。因为B端产品的主要目的是为企业降本增效，方便管理者管理，所以经常会出现一种场景，就是流程表单。除了在端上填表，流程还需要结合审批流程，用户角色相对复杂，这是B端设计的重点和难点。所以我就从表单的基本结构简单入手，为大家梳理一下我对B端流程表单设计的一些想法。

“入口”是B端产品常见的任务场景，常用于收集或验证用户的信息。也就是说，大部分具有数据采集功能的模块都可以称为表单。比如登录注册模块进行信息采集和评论编辑页面；OA中的请假流程等。具有数据采集、验证和提交功能的表单，包括复选框、单选框、输入框、下拉选择框等元素。

在设计输入表单时，要尽量减轻用户的思维和理解负担，提高表单的运行效率，降低用户出错的概率，从而提高输入任务的完成度和满意度。

要针对不同的用户数据设计不同的表单，以适合每个场景功能。

二、B端表单构成&种类

一个基本表单由四部分组成，即标签表单字段中提示信息的操作按钮。此外，还会根据表单的复杂程度派生出其他内容:验证提示、帮助信息、占位符信息和提示。

1. 标签

标签用于解释表单项的含义或要输入/选择的内容，并指导用户填写和识别内容。

合理的标签布局结构可以提高用户的阅读效率，降低信息填写的错误率。常见的标签布局形式有:左右结构、上下结构、右对齐结构和内部结构。

1)左右结构

左右结构是目前B端产品设计中常见的形态布局。减少了空的垂直占用，增加了空的水平占用。由于PC端水平空空间较大，所以在条目不多的情况下可以采用这种结构。

从阅读和填充效率来看，左右对齐的表单的填充速度相对于自上而下和右对齐的表单是最慢的。由于左右对齐的表单在解析问题时眼睛定位次数最多，所以用户一般可以将左右对齐布局中的标签与输入框关联起来，但这需要很长时间。根据matteo Penzo的研究，典型的扫视时间为500毫秒，这表明用户经历了沉重的认知压力。

优点:易于访问标签，突出标签；占用的垂直空间更少空。

缺点:

标签和输入框的相邻间距增大且不统一；造成用户视线浏览定位反复跳动。左右对齐适合于用户不熟悉表单的内容数据需要首先定位问题的标签，浏览表单会使得用户更聚焦标签内容。用户只要上上下下阅读标签左栏，不会被输入框打断。

适用场景:

表单中有许多复杂或敏感的信息。希望用户能慢下来，仔细思考。

2)上部和下部结构

上下结构具有很强的信息浏览和填充效率，用户的视觉浏览路径比左右结构更短，是目前B端产品中使用最多的表单对齐方式。这种结构适用于需要在一行中放置多个条目的情况，或者具有长标签名称的表单。

Matteo Penzo在2006年7月进行了一项眼球运动研究，发现从标签到输入框只需要50毫秒。比左右结构标签快10倍，耗时500毫秒；它比右对齐标签方法快2倍，后者可达240秒。顶部对齐的标签表单能够快速填写的原因之一是眼球只需要在标签和输入框之间单向上下移动。

优势:

最利于减少表单填写时间（标签和输入框位置最为靠近）；用户视线固定，动线一直向下（清晰的完成路径）；节省大量横向空间（可用于以多种方式组合的相关输入框）。

缺点:

占用额外的垂直空间（如果可提供使用的垂直屏幕空间较小，应当谨慎使用顶对齐标签）；建议使用输入框50%至75%的高度作为相邻输入框间距。

适用场景:

希望用户快速填写表单，完成任务；同时，当输入项存在主次之分时，对标签扩展性要求高。

3)右对齐结构

右对齐结构和左右对齐结构一样，在很多B端产品中频繁出现。还减少了空的垂直间距，增加了空的水平间距。

右边对齐的表单由于标签字数不一致，看起来很乱，左边也没有对齐，一定程度上影响了表单的整体布局。

如果您希望最小化窗体在垂直屏幕上所占的空间空，右对齐可以提供快速的完成时间。Matteo Penzo的眼动研究发现，专家用户和新手用户扫描(眼动)右对齐标签表单的标签和输入框的平均时间分别为170毫秒和240毫秒，完成时间是左对齐标签表单的两倍。

右对齐布局造成左侧不齐，可读性降低；不够灵活，如果标签需要两行文字进行展示，会导致阅读困难。

4)内部结构

内部结构广泛应用于移动表单中。这里只对用户需要输入的内容保留提示词。当用户输入时，内部的标签/提示文字会消失，用户很难判断输入的信息是否准确。该表单适用于条目较少的表单(如登录)。

内部标签消失，很难判断信息。

5)如何选择

运营效率:

具体怎么选？我们需要考虑四个方面:操作效率、标签长度、屏幕效果、视觉对齐。

根据Matteo Penzo的研究总结得到的浏览时间表，发现标签移动到输入框的最快时间是顶对齐50ms，其次是右对齐240ms，左对齐500ms。

因此，当表单根据业务需求基于运营效率时，建议顶部对齐。

标签长度:

当标签长度超过8个汉字，或者需要考虑国际中英文版本时，推荐使用顶部对齐方式，可以容纳更多的标签词，扩展性更好。很多国际上的B端产品也采用顶对齐的方式，比如自己施工任务的标签，所以采用顶对齐的方式:

屏幕效果:

如果只考虑屏幕效果，标签可以左对齐和右对齐。但如果还考虑表单录入效率，建议使用标签右对齐方式，比如蜂鸟报表:

视觉对齐:

一般我们都是设计表单，优先考虑效率和屏幕效果。但在竞品分析中发现，50%的表单采用标签左对齐的方法，因为这样可以保持标签与其他内容对齐，如神策网:

所以在选择标签对齐方式的时候，首先要知道什么是主要的，什么是可以牺牲的。例如，Shence.com选择了视觉对准，但却牺牲了操作效率。

单从效率的角度来看，顶对齐>:右对齐>:左对齐，根据不同的业务场景，效率不是唯一的考虑因素。

用户希望放慢速度，仔细考虑每个表单的内容，所以采用左对齐，适合填写重要信息和确认；

当顶部对齐标签中的单词太多或者需要英文时，扩展性更好；

右对齐要考虑标签内容是否可以简化，并确定表单和界面之间的间距。如果标签长度差异太大，请小心使用右对齐。

2. 表单域

表单是表单的输入区域，输入字段是收集用户数据信息的核心内容。每个输入字段包含一种类型的数据信息。

对于用户来说，在设计表单时，要尽可能减少用户的思考和理解，选择合适的输入字段类型，提高表单的输入效率。

3. 提示信息

提示是复杂表单的必要内容，用户在填写表单之前，会对标签的内容产生疑问。工具提示可以用来解释并让用户知道表单的内容。

另一种提示信息是用户填写表单域后出现的验证提示信息。如果我们填写手机号时的位数有误，这种提示可以提前告知用户可能出现的错误，减少下一次操作的出错概率。

4. 操作按钮

当用户完成信息输入后，按钮可以对表单内容进行检查、提交、保存或执行下一步操作；操作按钮只有一个主功能按钮，其他都是辅助按钮；

关于按钮顺序，最常见的问题是确定按钮应该在取消按钮的左边还是右边，这是一个长期争论的话题。这里建议使用基于Ant设计的设计原理，将规范定义为:从左到右左对齐读取，从右到左右对齐读取；

5. 表单类型

对于复杂的表单，需要在设计中进行合理的归纳和简化，以减轻填表的负荷。一般来说，表单可以分为基本表单、分步表单、锚点定位和tab页面。

1)基本形式

当表格中的条目数在7以内时，表格相对简单。这时候我们一般直接用基本形式。基本的表单样式如下:

当一个表单中的条目数超过7个时，可以将其归类为复杂表单。这时候就要根据表格的复杂程度、逻辑性、关联性进行判断，选择合适的分组方式，进行总结和简化，减少填表的负荷。

2)逐步形成

如果各组之间有逻辑顺序的话，那么建议采用循序渐进的形式，比如购买阿里云。

3)定位点定位

如果各组之间有很强的相关性，则不适合分离。建议使用锚点定位。单击锚点可以快速定位相应的表单内容。比如销售帮编辑销售机会、创造新客户等形式，都是使用主播定位。

4)标签页

如果每个分组既没有逻辑顺序，也没有关联性，建议使用tab分组。例如，舒菲的发票管理是一种相对独立的形式。

三、表单布局选择

表单的布局需要先考虑内容的关联度，合理汇总复杂的表单，简化表单页面的布局，可分为一般布局、弱分组、区域分组、卡片分组。

1. 普通布局

当条目数在7以内时，仍然使用常用布局，例如增加了网易互保的新企业信息:

当一个表单中的条目数超过7时，可以将其归类为复杂表单。此时仍然是根据表单的复杂度、逻辑性、关联性进行判断，选择合适的布局方式，提高表单的浏览效率和屏幕效果要求。

2. 弱分组

当表格空有限且相关性强时，建议使用弱分组，将多个表格组合在一行，形成分组的建议。

3. 区域内分组

当词条数量在7-15个以内，相关性较强时，使用区域分组比较合适，比如网易七鱼新上线的质检模板。

4. 卡片分组

条目数超过15条时，建议使用卡片布局，如阿里云服务购买表单:

四、表单按钮位置

网页，除了顶部和侧面导航栏，主要内容页面中的按钮应该如何放置和排列？我们可以将内容页面分为以下三个部分:

1.标题栏(header)-主要是全局操作按钮，如编辑、创建等。

2.机身-有两种操作按钮。

第一种是本地操作按钮，如表中的操作项；

第二个是全局完成按钮，跟随内容，如取消、确认、上一步、下一步等。

3.页脚——主要是全局页面完成按钮，需要粘贴固定底部。如取消、确认、保存等。

按钮的位置、顺序、组织和视觉重点是用户寻找按钮的线索。警告色可以吸引注意力，避免误操作。精确复制可以预测按钮的执行结果。

按钮设计的目标是引导用户采取我们希望他们采取的动作，尽量帮助用户快速找到需要操作的按钮，并知道这个操作的结果，同时尽可能避免误操作。

按钮位置有三种:页面右上角、下面的内容、固定的底部操作区。

1)标题栏在右上角

表单按钮放置并固定在右上角的标题区域，不随表单内容滚动。与固定在底部的操作区域相比，将操作按钮放置在右上角可以进一步减少按钮对表单内容的干扰，使用户可以更专注于表单内容进行填写。

操作按钮放在右上角，与操作路径不一致。右上角也是视觉上容易忽略的地方，可能会增加点击操作的难度。

2)跟着内容走

按钮跟随表单内容是一种常见的设计方法。用户已完成的表单内容下方是操作按钮，适用于表单内容不超过一屏的基本表单场景。

在具有多个屏幕的复杂表单中，一些需要手动保存的操作按钮可能需要在单击保存之前滑动到页面底部。

3)固定底部操作区域。

在复杂的表单中，表单的内容区域通常会超过一个屏幕，要填写的内容很多。考虑将操作按钮固定在底部操作区，并添加手动保存的按钮。复杂的形式很多，用户在使用过程中可能会中断和退出。此时，保存功能可以帮助用户在下次再次回来编辑时使用它们，并继续上次填写的内容。

固定在底部操作区的按钮会干扰用户，从而影响用户忽略表单的内容。

设计:按钮要放在用户的浏览路径中，让用户容易找到，并且要尽可能靠近它所控制的对象。

指导原则:使用经典的“F”或“Z”视觉引导模型。

当只有一个窗体时，建议采用“F”模式，按钮位置跟随左边的内容；当表单包含在容器中时，建议使用“Z”模型，将“确认/提交”等行为放在合适的视觉终点。

表单的基本单列布局可以将操作按钮和内容放在一起。如果复杂表单的多栏布局超过一个屏幕，可以考虑将按钮固定在底部操作区。

1. 表单内容视觉要平衡吗

在设计表单的时候，我们总觉得视觉重心偏左，会让用户的视觉不舒服，所以在设计的时候总想让视觉更加平衡。

比如在京东云，当你使用大屏电脑时，所有的信息都集中在左侧，但右侧却是大空白，让你感觉自己的视觉有点失衡。类似于舒菲的中心设计，左右空白区域会有更平衡的视觉。所以我在设计的时候，也在考虑要不要中间设计。

但是，当我继续搜索资料的时候，我发现，其实在表单的设计上，我们并不需要过分追求视觉平衡。第一，人的视觉动线遵循F模型。同时根据行业相关信息的可读性研究，眼球运动舒适角度为30度。

所以在表格信息量较少，不考虑屏幕效果的情况下，采用自上而下的单栏布局。据研究，这种布局是完成任务最有效的方式。

为了证实这个结论，我收集了近50种形态的B端产品，发现只有2款产品使用了以视觉为中心的设计。

这两款产品分别是舒菲设置表单和百度云购买表单。

其他的CRM、ERP、云产品、OA、项目R&D、文档产品、在线教育、HR、BI等系统产品的输入表单都采用了可视化左设计方式，无论表单展开多复杂的信息，都不会影响整体的一致性。

因此，在设计表单时，不必过分追求视觉平衡，而要优先考虑信息操作效率和信息阅读效率。

五、表单页面适配方式

b端设计师在设计表单时也需要考虑页面适配。如果设计不考虑适配，前端会站在他的角度按照自己合理的方式去适配，导致实际使用体验不好。后来要调，还得再等排班。所以你需要在设计的时候设置适配方式。形态设计中的适应方式一般有两种，一种是固定适应，一种是间距适应。

1. 固定适配

表单中信息的宽度是固定的，不随分辨率的变化而变化。需要保证最低分辨率也能正常显示。

采用弱分组布局时，随着分辨率的降低，数据项会自动下降，其他不变。列数取决于屏幕宽度。

我在设计中把1366X768定为最低分辨率，可以保证笔记本电脑的使用。最小页面分辨率可以根据公司产品的客户或用户的屏幕分辨率来确定，因为有些公司可能还在使用1280X720的分辨率，所以设置1280为最小兼容分辨率。

采用弱分组布局时，随着分辨率的降低，数据项会自动下降，其他不变。

2. 间距适配

间距适配是使用固定的左右间距，不跟随页面宽度。当页面宽度变大时，组件会自适应地变宽。

这种自适应的方法在弹出窗口和抽屉中应用广泛，但在表单页面中不推荐使用，因为分辨率增加时，眼动视野变大，不利于信息浏览。

本文由@陈怡原创发布。每个人都是产品经理。未经许可，禁止复制。

来自Unsplash的图像，基于CC0协议。

此观点仅代表作者本人，大家都是产品经理。平台只提供信息存储空服务。