展示设计如何分类-超级实用！ B边桌设计指南，果断收藏！

好的产品设计就是利用有限的基本能力来实现高满意度的功能。 本文作者分享了他设计B面桌的一些经验。 他希望能帮助大家理清表格设计中的一些难点和困惑。 让我们来看看。

在B端项目中，除了大量的表单页面之外，出现频率最高的复杂组件就是表单。

前面和大家讲B端设计规范和表格的时候，我提到我负责设计的项目里有很多表格和表格。 在爱上表格和表单的这些天里，我不断学习和实践，总结了一些Web端复杂的解决方案。 业务场景下如何设计表格？ 一方面，我对企业后台的数据表做了简单的阶段性汇总。 另一方面，希望得到更多前辈的指点，多和同事们交流。

表格作为最清晰、最高效的数据展示方式之一，还具有复用性高、可扩展性强的优点。 它们是B端产品中最常见的信息展示形式，也是浏览和操作数据最便捷的设计方式。 。

合理的表格设计可以为用户带来高效的信息获取率，但如何设计表格相信是大多数刚进入B端行业的设计师面临的问题。 以下是我在设计表格时总结的一些经验。 希望能够帮助大家理清表格设计中的一些难点和困惑。

从事B端产品的设计师都知道，为了提高开发效率，我们的前端在投入开发之前，通常都会选择第三方的前端框架作为底层来封装组件。 所以在开始内容之前，我想先讲一下第三方UI框架。

01 第三方Table框架

目前国内已经在个人工作中使用的主流UI框架包括：

对于其他不太常用的框架我不太了解。 如果您有了解的朋友，欢迎在留言区讨论。

我个人比较喜欢用【蚂蚁设计】。 一方面，我是第一个接触Ant设计的人。 另一方面，资源非常全面。 下载的源文件基本可以满足大部分常用功能。 有很多控件（如：各种选择器、穿梭框等）具有比较好的视觉和交互体验，而且组件可以直接复制粘贴到设计稿中。

但前端同学更喜欢【Element】。 我目前正在做的几个项目都是基于Element组件封装的。 据前端同学反映，他的组件封装简单，易于修改，也方便没有接触过框架的同学上手。 所以基于此，为了提高开发效率，顾全大局，我们的项目都使用了【Element】。 我还花了一些时间来熟悉新组件。

1、主流框架内【Table】组件对比

1.1 UI风格对比

截取各个官网Table的基本界面风格，如下图：

两个产品示例中显示的默认组件样式略有不同。 【Element】直接列出不同的风格类型，而【Ant design】则结合功能进行全面展示。 可以根据相应的参数修改样式。 开发过程中，前端同学可以根据设计稿的注释直接修改样式。 如果样式一致的话，直接使用组件的默认样式也是可行的。

如果是数据信息扁平化、单一的项目，可以直接使用第三方组件库表的基本用法。 视觉和交互也能满足大众的审美和习惯。 普通后台简单的数据表就可以满足需要。

我目前负责的项目之一是供应商后台管理系统。 直接使用【Element】就可以了，对于显示数据和统计信息来说完全足够了。 运维同事使用时也表示满意。

但一些复杂的B端后端接口不仅承载信息，还有很多相关的操作和处理。 产品面向B端客户，数据文件量大、类型复杂，相互关系各异。 很多时候，需要根据需求重新设计，并在设计中尽可能找到折衷方案，才能兼顾开发工作量。 这就要求最好能够从框架组件中派生出来，用最少的修改满足更多的需求。

1.2 组件功能对比

既然我们决定使用【Element】，那么下面所有的对比都是基于这个框架中Table组件的功能来比较功能的有无以及相关的差异。

从上面的对比看来，【Element】和【Ant design】的功能基本是一样的。

需要说明的是，上图中未显示的功能组件并不意味着不能实现。 前端同学可以根据组件进行重写。

2.如何使用第三方组件

很多人可能会问，市面上已经有像Ant Design这样成熟的B端设计框架，可以选择直接使用，为什么还要增加开发的负担呢？

开源确实是一件非常好的事情，但另一方面，市面上的Ant Design、Element等平台之间也存在很多差异。 同时，并不是所有的组件Ant Design都会提供，企业级产品会有很多个性化的需求。 我所从事的项目通常使用Ant Design作为基础框架或底层参考，并在此基础上构建设计框架。

当然，在项目较小或者初期产品的情况下，为了提高效率、降低成本，会直接使用开源组件库。 各有千秋，最终目的都是为了更有效、更轻松地完成项目。

那么需要如何进行设计呢？

使用元件时展示设计如何分类，无需设置间距等规格。 直接选一个就可以了，一般不会有太大问题。 更加关注表中携带的数据字段的类型。 例如：

文本字段：可点击字段、普通文本类型、数字和字母等。如果此类字段的长度不同，最好保持对齐；

建立的字段：日期、时间、一些枚举类等，字符数相同且长度较短，可以与表头标题居中；

特殊字段：金额、状态标签、类型标识符等业务性较强的字段，可根据相关特征和阅读习惯进行对齐。

无论对齐如何，您都需要考虑该字段中可能的边缘情况。 例如：如果普通文本太长，当鼠标悬停时可以展开单元格以列出所有字段信息。 或者以提示的形式，跟随鼠标位置显示所有信息。

02 表的基本理解 1. 什么是表？

表，又称表格，是用来收集、排序、组织和分析数据的二维矩阵。 是B端产品中常见的信息展示形式。 它是所有B端组件中信息显示密度最高的，是覆盖所有B端场景的重要组件。

表格是列表的一种。 有两种类型的列表：

1.1 单维数据组织——列表

列表具有一对多的数据结构，可以让用户整理出一条数据下的多个对应关系，多个对应关系是并列的。 列表可以将数据按列有序展示，保持数据有序、干净。 常见的使用场景包括电子邮件、待办事项等。

1.2 多维数据·组织、数据分析-表

在多维度数据分析中，最常见的就是表格，它利用多维度数据进行统一结构化展示，让用户清晰的看到同一主题下多条数据的对比情况，让数据以多个维度。 ，确保数据完整性。

本文的重点是多维表格样式。

2.表格的优点

表格经常与排序、搜索、过滤、分页等其他界面元素一起出现，在企业级中后端，它具有以下优点：

3、表格设计痛点

3.1 单一形式

列表是一个形式非常简单的组件。 对于经验不足的设计师来说，会认为可以调整的地方太少，往往会导致思维上的缺陷。 对于B端表来说，需要有数据浏览、数据添加、数据操作、数据统计等功能。 所以它的功能很多而且很全面，很难想办法解决问题。

3.2 多组件联动

通常设计者在设计单个组件时会有良好的整体意识。 当涉及到多个组件的联动时，就会出现问题。 例如，在一个表格中，除了表格本身之外，还有搜索、过滤、视图、分页等操作，如果不考虑多个组件的交叉使用，也会缺乏设计对于这些场景。

3.3 多种数据形式

列表中会携带多种字段类型，每种字段类型都会有对应的差异。 不同的格式会导致列表上的呈现形式不同，键值的处理也会不尽如人意。 所以，看似简单的列表，其实有很多需要设计的点。

设计过程中，如何在满足业务需求的基础上，平衡用户的浏览目的和设计者的沟通目的，如何让表格在表现层更加合理，在操作层更加易用，将会考验数据产品设计师的整合能力。

03 使用场景及设计目标 1. 表场景

对于大多数B端管理系统来说，数据查询和管理是非常重要且经常使用的功能，因此常规项目中都会包含大量的表格页面。 即使在一些中小型项目中，90%的导航一级页面都使用表格，不存在其他页面形式。 因此，表单的质量能够对用户的工作效率和平台体验产生决定性的影响。

优秀的B端项目表不能只使用Excel这样的固定模板。 不同项目、页面、模块对表格的视觉需求差异很大，需要根据具体情况具体分析。

表的使用场景主要分为四类：数据浏览、数据添加、数据操作和数据统计。

1.1 数据浏览

表数据浏览本质上是对大量数据的搜索和操作。 在这种场景下，用户需要进行高效、准确的数据搜索。 当用户需要对信息进行排序、搜索、过滤以及相关业务处理等复杂操作时，表结构可以很好地保持页面效果的稳定性和一致性，提高用户的操作和阅读效率。

1.2 新增数据

添加表数据的场景本质上是通过系统字段类型对应的规则将复杂的数据结构录入并保存到系统中。 这就是我们常说的增、删、改、查的“增”。 通常是比较常规、高频次的操作。

1.3 数据操作

分为单数据操作、单行数据操作、多行数据操作三种情况。

单条数据操作：常见的快速编辑。 您可以点击快速编辑按钮对单个数据进行原位操作。 该条目通常位于数据行内。

单行数据的操作：通常有两种操作路径：一是进入用户详情页界面，编辑整列数据。 这种情况通常需要处理多个数据，因此进入编辑页面时更容易查找。 。 另一种是进入弹出窗口进行操作。 这样的解决路径更加清晰便捷，同时可以与新的共享一组控件。

多行数据的操作：主要采用多选后的操作方式：当用户想要对多条数据进行操作时，需要勾选多条数据的复选框，以满足多行操作的需要。 入口一般在过滤操作栏。

1.4 统计

表格适用于信息的汇总和分类。 数据经过汇总、整理、合理布局后，更便于用户进行信息对比，快速定位和查询差异与变化、关联与区别。

主要审查和分析用户需求。 目的是通过大量的数据分析得出一定的结论。 由于关注的数据会分为主次，数据之间会有内部联系，用户会越来越重复地浏览页面。 查看数据。

2. 表单的设计目标

表单的基本设计原则是“全面整合和呈现业务数据，提供流畅的阅读体验，方便用户发现重要信息、进行便捷操作”，满足业务需求+符合用户心智模型。 总之，设计一个易于阅读、扫描、比较、操作的表结构是表设计的首要目标。

2.1 易于查找

表格层次分明，一目了然，让用户更多地感受到表格所承载的内容信息，而不是表格的形式。

以下是我个人对于提高查表效率的一些建议：

保持一致并保持表格的外观和布局一致。 用户会更快地接受外观相同的桌子。 用户学会一次即可普遍查看，通过肌肉记忆快速找到关键信息；

适度呼吸，在表格内容区域使用适当的行高和列宽，有助于更快地获取信息；

视觉降噪，通过字体、字号、颜色等多个维度进行视觉降噪处理。

2.2 易于阅读

列表按逻辑排序以便于浏览，并提供适当的搜索组件以帮助用户快速查找信息。

2.3 操作方便

表格应该是交互式的，让用户在搜索好的数据时能够快速找到相应的操作来做出决策，比如导出、编辑等，快速的操作处理。

提高交互效率的建议：

亲密性，数据选择和数据操作保持亲密性（满足菲茨定律）；

操作暴露与操作隐藏，针对不同的业务操作选择不同的操作形式，比用户多思考一步。

04 表格类型及常见布局 1. 表格类型

B端产品的大部分业务场景都使用基础表，但B端产品的业务多样性让很多特殊表有自己独特的用途。 除了了解基本的表格样式之外，了解更多的表格类型也可以帮助设计人员在处理复杂的项目时变得更加得心应手。

1.1 基本表

基本表格样式由行和列的单元格组成，可以满足用户多维度查看数据的需求。 通常在水平表格的垂直列数据较小时使用，这样可以使页面完全显示而无需滑动条。 操作项一般放置在页面的最右侧，方便用户浏览后进行操作。

1.2 树表

当表中的数据是包含和包含结构时，可以使用树形表。

每个条目都可以展开或折叠以包含更详细的信息以及嵌套的子表。 数据之间的层次关系以逐步提纲的形式展现出来，使整个信息结构一目了然。 非常适合大型数据表或项目管理工具。

1.3 子表

当一份主数据下嵌套有多条不同数据结构的相关数据时，可以使用子表来创建它们。 它可以更详细地解释主数据并详细理解主数据中数据的含义。 结合层次表的使用场景，大多以查看为主，编辑需求较少。

设计中需要考虑：当表中的父数据被删除时，子数据如何处理？ 父子之间的关系被设计了什么限制？

当一份主数据下嵌套有多条不同数据结构的相关数据时，可以使用子表来创建它们。

它可以更详细地解释主数据并详细理解主数据中数据的含义。 从表面上看，这意味着一个表中可以嵌套另一个表或其他信息。

1.4 交叉表/标题分组

当一个表中有多条数据显示在同一个小维度范围内，或者表头中有很多组来区分它们时，就是交叉表。

它可以通过硬拆分来切割数据ip形象，以满足特定的业务需求。

1.5 图表

当一个表格包含多种用于显示的图表数据时，它就是图表表格。 用户点击某个数据后，直接弹出该数据的统计图表，方便用户进行比较。 同时这个功能也可以通过仪表板等功能来解决，这是目前很多产品最喜欢的数据可视化。

除了在单元格中引用图表外，还经常提供图表/表格视图切换，方便用户从图形角度查看和分析自己关心的数据。 有时也有“图表+表格”的形式。 此时，表格往往仅作为详细信息放置在页面底部。 大量的桌子也会导致视觉上的单调。

1.6 卡片形式

信息可以以卡片的形式显示，以群体概念的形式呈现，单张卡片内的信息按照优先级排列。 此外，卡片彼此形成一个整体。

卡片是承载信息的容器。 对于可以携带的内容类型没有过多的限制。 集中一类信息，增强区块感，更容易操作； 卡片通常排列成网格或矩阵，以传达彼此之间的层次关系。 适合轻量级、高度个性化的信息块展示。

注意：在有限的表空间下，需要注意卡片信息之间的间距。 如果卡信息太长，可以将其截断。

在实际工作中，上述表格类型也可以相互组合，以更好地达到相应的分析目的。 例如垂直-分层、矩阵-数据三维表等。

2、按照表格设计风格分类

信息内容的有效传达是表格设计的精髓。 表格本身应该是不可见的，并允许用户专注于核心内容。 因此，边框的颜色应该很浅，不妨碍快速浏览。

2.1 网格类型

表格分割线均匀、明显，边框单元格也比较明显。

适合：数据之间关系密切（列信息较多且没有足够的空间用空格分隔信息）且存在对比关系。

2.2 水平线型

仅显示水平线可减少整个网格的视觉噪音。

好处：可以显着降低表格的垂直视觉权重，使用户可以更快地比较大量数据； 因此，这种样式对于所有数据集大小都是最常见的。

2.3 斑马条纹类型

在交替行上交替使用不同的背景颜色来区分数据。

合适：为每行交替使用不同的颜色背景是帮助用户在阅读时保持位置的另一个好方法； 建议将这种样式用于较大的数据集，其中交替模式将清晰，并且不会与特定线条的突出显示造成混淆。

2.4 自由形式

删除所有分割线，通过尽可能减少视觉噪音来创建简约的外观。

适合：如果用户在阅读时不需要帮助保持其位置，则建议将这种样式用于小型数据集。

3. 表格布局

前面我们谈到了表格的行元素和列元素的交集，形成一个简单的二维表格。 行和列元素的空间组合决定了每个单元格。 常见的表格布局包括三种基本布局：水平、垂直和矩阵，分别强调行、列和单元格。

横向类型会弱化列的存在，强调行信息的连贯性。 适合用户从左到右阅读信息，然后从上到下逐一扫描。 适合浏览大量信息，常用于B端产品。 一个布局。

垂直型以行分割为基础，通过强化列的视觉特征，突出不同列信息的对比。

矩阵式表格具有统一的分割线和明显的边框单元格。 它们适用于具有大量列信息且没有足够空间用空格分隔信息的表。 同时我认为细胞合并的情况也属于矩阵类型。

设计建议：

表中携带的数据信息是主体。 在设计表格时，应特别注意去除所有不必要的视觉元素，以便用户可以专注于数据信息，而不是不相关的边框、背景颜色等。

05 表格构成

该表由两部分组成：内部（显示项）和外部（操作项）。 内部元素包括标题、表头、表体等； 外部元素包括过滤区域、按钮区域、底部栏等，如图：

除标题和列表内容外，其他模块内容根据实际需要应用。 任何形式设计的第一步都是制定总体框架，即包含的模块及其对应的分布位置，然后进行后续的详细设计。

1. 标题

标题是整个表格内容的摘要名称。 一般放在表格的左上角，符合用户的阅读习惯，也凸显了标题的重要性。 但有些情况下，严格意义上的标题并不存在，会被页面标题、面包屑或者其他内容所替代，主要看它是否能够表达表格的摘要。

标题要简洁，不要太长。 如果标题名称难以理解，可以添加辅助提示。 常见的样式有两种：工具提示（常用）和辅助提示。

2. 过滤操作区域

过滤操作区方便用户快速定位查询数据并操作数据。 是承载表单“增、删、改、查”核心功能的重要桥梁。 过滤操作区的排序方式对于整个表格的“轻松查找”起着至关重要的作用，因此表格设计中过滤操作区的设计至关重要。

3. 标题

头信息是对数据属性的分类或者基本概括，可以理解为表格概括。 标题还可以指行标签和列标签，它是对其所属行或列的描述。 表头还可以进行一些简单的过滤、冻结和排序，方便用户过滤特定的行和列。

表头是用户快速浏览表格布局的关键信息。 标题字段要符合人们的思维习惯，保证大多数用户能够理解数据。

4、面体

它是表单的主要区域，承载着每一条用户数据，也是整个表单的核心。 它是由细胞一一组成的。 单元格排列形成行或列。 行/列中的数据可以是任何形式展示设计如何分类，如文本、计数、百分比、状态、操作等。表尾还可以进行数据统计，如总计。 、平均值等

单元格大小和行高将直接影响用户使用表格的体验。 在电芯的设计上也会有很多设计思路，下半年我也给他家人提供了我自己的意见。

5. 底栏

底栏位于表格的底部。 一般显示正文的数据摘要信息。 有时还对数据进行分类统计，或者将批处理操作、注释等与过滤操作区结合起来。

分页不属于表，但当数据超过用户设定的阈值时，需要使用分页来分解数据卡通人物，所以分页和表往往联系在一起。 分页分为三种类型：基本分页、迷你分页和完整分页。 如何进行跨页面操作一直是B端分页的一个难点。 它需要良好的想法和逻辑。 我们在分页模块中讲一下。

06 总结

看似平淡的数据表其实非常重要。 通过合理的组织结构和呈现方式，让原本枯燥的数据变得生动起来。 这是一件非常神奇的事情。

围绕用户目的和实际使用场景，精准高效地为用户过滤信息，反映数据背后隐藏的秘密，促进对信息的理解，降低用户的决策成本。 设计出准确、高效、易用的表单是对设计者功力的考验。

下一期预览：

在桌子系列的第二篇中，我们将详细讲一下桌子各个部件的设计思路，了解B面桌子应该如何设计~

这篇文章的写作花费了我大量的业余时间。 希望能为广大B端产品设计提供一点帮助。 如果觉得有用，请点个赞吧。 我会继续努力，和大家一起创作出更多优秀的文章。 讨论！

参考：

1、B面桌子设计实用指南：Nick

2. 列表页面：AntDesign

3.网页表单设计分析：小龙

4. 网页表单设计策略：THE TAO

5. B面设计指南-06形式：CE青年