B端 表格组件优化（中）

在多维度的数据分析中，永远绕不开的是表格，使用多维度数据进行统一的结构化展示，让用户清晰的看到在同一主题下的多条数据的对比，使数据能够进行多维度的展示，保证数据的完整性。

开始之前，我们先定义一下表格，表格是一种常见的信息展现形式，它是所有B端组件中信息展示密度最高，同时涵盖了B端的所有场景，因此是B端设计中的一个重要的组件。

表格（Table）：又称为表，是用来收集、整理、组织、分析数据的二维矩阵；它既是一种可视化交流模式，又是一种组织整理数据的手段。

在我们常见的B端产品改版中，除了对页面流程调整以外，更多就是围绕表格而展开的一系列优化。因此表格的设计，做为B端设计师的基础能力之一，也是检验一个B端设计师是否合格的关键因素。

表格属于形式十分单一的组件，对于初次接触表格的设计师来说，会认为能够调整的地方太少，往往思考的范围会有所限制。对于一个B端表格来说，它需要具备数据查看、数据新增、数据操作、数据统计，功能多而复杂，很难找到正确解决问题思路。

通常设计单个组件都会有较好的全量意识，而到了多组件的联动时，就会出现问题。

比如在表格中，除了表格本身，还会有搜索、筛选、视图、分页等操作，如果没有接触过多组件交叉使用的场景，很容易缺少对多组件场景设计的思考和应用。

在表格中，需要承载各式各样的字段类型，而每一个字段类型都有一定的差异。形式的不同落到表格上就会有不同的呈现形式，在关键数值的处理上，差异会更加明显。因此看上去简单的一个表格，其实会有很多需要设计的点。

而深入到表格的内部中，会发现能做的远远不止于此，如果刚开始没有对表格进行梳理，那么在设计的过程中，对于反复出现的表格将束手无策，为了让大家能够对表格有更深的理解，我将表格进行系统的拆解，结合实际案例，能够让表格更浅显易懂。

在我看来，表格一共分为五部分：

概括整个表格的内容信息，让用户一眼就知道该表格的用途是否符合自己心中的预期。

在实际场景中，除了通过标题文字的透出形式之外，还可以为每一个表格去设计不同类型的图标，这样能够让用户看到图标就能联想到内容，这也是现在无代码开发平台常见的处理方式。

工具栏的排列方式会有非常多的讲究，在市面上常见的操作区域一般可分为单行和双行的状态，可根据自身产品要求的特点进行变化，文章后半部分会具体讲到工具栏的设计思路，这里就不再过多赘述。

概括每列的主要信息，在用户使用表格中，起到数据解释作用，让数据能与之进行匹配，使用户能够看懂数据。同时在表头处会拥有一些操作，比如冻结、筛选、排序都会放置于此，因此需要进行留意。

承载用户的每一条数据，也是整个表格的核心，单元格的大小行高都会直接影响用户使用表格的体验，关于单元格的设计有很多思路，在后半部分也会提供一些我自己的看法，与大家进行探讨，在这个就先不做扩展。

严格意义上讲，分页是不属于表格当中，但当数据超过用户所设定的阈值时，就需要使用分页拆解数据，所以分页和表格是经常联系在一起的。分页一共有：基础型、迷你型、完整型三种类型。

了解表格类型的多少决定了设计表格的下限。

虽然在大多数业务场景中都是使用基础表格，但在B端产品中业务的多样性使得很多特殊的表格有它独特发挥的空间。

基础表格是根基，是由行与列的单元格组成，在使用层面上能满足用户多维度查看数据的需求。

当表格中的数据为包含与被包含的结构时，可采取树形表格。

通过结构树形式来展现数据间的层级关系，让整个信息结构变得一目了然。这一表格形式常出现于项目管理工具中，比如 Teambition、Tapd、飞蛾都有这样的设计。（这里仅以Teambition作为示例）

当一条主数据下有多条数据结构不同的关联数据进行嵌套时，这时候就可以用子表格进行创建。它能够对主数据进行更加细致的解释，详细的了解主数据中数据的含义。从表象上看，就是在一个表格中还能嵌套另一个表格。

（比如在对某集团对旗下子公司的销售表格中，它能够通过嵌套子表格的形式，将每一个子公司下的销售人员的销售记录进行记录，从而能够更加细致的了解到每一个公司、每一个人员的具体情况。）

在国外报表中，这类表格很少出现，而在中国的报表中，嵌套子表格算是一种不折不扣的中国式报表。

这里我们依旧可以深入理解，比如在两个表格之间，用户是通过什么样的方式建立一个父子的关系？表格中当父数据删除时，子数据如何处理？设计上对父子之间的关联有着何种限制，这都是我们需要思考的，因为这里牵涉到业务实在太多，无法抽象出一个规律提供给大家，因此只有具体问题具体分析。

当一个表格里面有多条数据在同一个小范围的维度进行展示时，它就是交叉表格。从表象上看，就是表头有很多分组进行区分，因此它也叫做表头分组。

它能够通过硬拆分将数据进行切割，但是这样数据的易读性就是有很大的差距。

（比如在2010-2020公司年度收支表格中，需要同时展示每一年份的收入、支出与利润，使用交叉报表能够让用户一眼就是看清数据，而基础表格却不行。）

交叉表格也算是中国式表格中的一种，能够满足具体业务上的需求。

当一个表格里面有多种图表数据进行展示时，它就是图表表格。

在对一些项目做定制化开发时，这是十分常见的场景，用户点击某一数据后，直接跳出数据的统计图，方便用户进行对比。同时这一功能也可以通过仪表盘这样的功能去解决，也就说到国内最爱做的数据可视化。

这是一个非常容易忽略的点，主要是大家对于表格的理解各不相同，也没有具体的文章对于表格尺寸有个非常明确的限制，这里分享一个我常用的设计方法，用于判断表格设计的优劣：表占比。

表占比：表占比是指在1920×1080的屏幕大小下（一屏内），表格占整个页面的比例 即：表格面积 / 页面面积 = 表占比

这里需要指出，这里的表格面积是指，表头+单元格+分页（不包含工具栏）；

在对比了十几款主流B端平台后，发现大多数产品「表占比」都是在65-70%之间，为何65-70%是一个更为合理的数据？

因为只要在页面中出现表格，就代表这个页面一定是以表格作为核心。而表占比低于65%，代表页面中的表格不处于内容的核心，需要重新审视这个页面所需要传达的功能。

如果表占比高于80%，则代表表格出现面积过大，要考虑用户是否能够接受如此大的占比。

因此，就设计的合理性来说，占比在65-70%之间能够保证数据展示的合理性，这主要是针对CRM产品，但可以根据这个占比浮动性的衡量自己的B端产品～

工具栏，不同的产品，会对它有着不同的定义。

比如在Apple MacOS 系统当中经常提到的Toolbars和Toolbar Items；又或者是Microsoft 产品中采取的Ribbon设计模式。在设计底层思路上截然不同，平台级产品思路与定制化产品思路存在很多截然不同的做法，今天就简单聊聊基础的表格工具栏设计，不做深挖～

在表格工具栏的设计中，信息分区与页面透气是非常重要的两个设计核心。

工具栏是由标题、筛选、搜索、视图、新建等操作组成，而功能间的区分是工具栏设计的一个关键。

当一个工具栏中，需要将如此多的元素进行组合排列时，必然会有其排序的规则，这时可以根据亲密性原则，对工具栏中的信息进行相应区分

在亲密性原则中，我们可以将功能相近的工具放在一起，比如：搜索与筛选都是数据过滤的操作，应该放在同一分区；

同样，工具栏也会存在一些功能点不太相近操作，我们就应该通过分区将其间隔开，比如在下图中，每个功能都将其用线条区分。

在信息的去区分上，也有强弱两种不同的方式，一种是通过线条直接分割；另一种是将工具栏进行空间上的区分。因此可以通过信息区分去检查你的工具栏设计是否合理。

在一个B端定制化项目中，由于产品的特性，信息量本身就足够庞大，因此，让自己的页面具有呼吸感，保持一定的疏密关系，尤为重要。

表格一般都承载着繁杂、冗余的数据，是一个信息集中的密；工具栏作为与表格关联的上部分，呼吸感便成为表格的重要因素。通常在表头处要将空间尽量分散开，这样才能满足整体的疏密关系。

经常看到一些十分冗杂的表头，甚至它丧失了表头的真正含义。在实际情况下，尽可能明确、简单的讲出表头的内容，以免造成表格的喧宾夺主。当然也会存在一些专业术语，这时候，给一个Tooltips再合适不过。

在表格中，单元格的行高是一直都是一个难以控制的变量，因为行高会直接控制表格中的信息密度，而信息密度永远是一个无法量化的元素。而在我们设计过程中，需要采取盒子模型的方式，让你的设计更加落地。（具体设计方案在《上篇》中已提到）

表格中经常出现空数据的情况，而表格的留白对于用户而言会造成一些困扰，特别存在与页面中的大面积留白，感觉像是数据没有加载出。因此在表格空白数据处理上，可以使用“-”来进行默认展示。

在表格设计当中，每一条线都有着它存在的意义。

当表格中展示横线，隐藏纵线。

用户的横向阅读体验更佳，强调一条数据的完整性，能够让用户进行快速的对应。

当表格中展示纵线，隐藏横线。

用户的纵向阅读体验更佳，强调数据上下间的对比，能够让用户找到同一纬度数据下的对比。

当表格的行与列的数量过多时，会导致一屏展示不下，而表格中的关键信息与操作是需要在任何时候都展示，这是采取行、列冻结，能让用户快速触达。

表头冻结：通常出现在垂直滚动时，通过固定表头的信息，能够让用户阅读时对应不同的数据，使用户更好理解数据。

首尾冻结：通常出现在水平滚动，通过固定首列的主属性字段以及尾列的数据操作，来满足用户对于一列数据的认知，从而使用户进行快速操作。

在对分页设计的分析中，我们需要对分页中的元素进行拆解，才能明白分页的类型所带来的不同。

表格信息：会展示表格信息当中的数据总量、更新时间、默认排序方式等…

数据总量主要展示用户需要浏览的内容的总量；常见于管理后台搜索、筛选符合条件的数据记录时，搜索结果页通常会展示这个信息，这让用户在操作时有心理预期。

页面展示数量：结构为「X条/页」；

它能控制每个页面展示多少条数据；当在系统中有很多数据时，可以直接通过「页面展示数据 * 分页总数」 直接算出整个表格的数据总和。

上一页和下一页翻页：分页中基本组成元素通过用户点击上一页、下一页的按钮，实现表格的翻页功能。翻页通常会根据场景不同，去省略翻页中的不同元素，比如在下面马上那个讲到的三种翻页类型，但是上一页和下一页是绝对不可省略的。翻页也如同你翻书一样，可以进行对数据的逐页阅读，遵从用户之前的使用习惯。

当前页码：当前页码说明了页面中数据当前所处的位置，方便用户进行翻页的操作。

相邻页码展示：相邻页码通常展示前后两页，比如你在第6页时，页面需要展示：4、5、6、7、8；但页码在第1页时，就需要展示：1、2、3、4、5；页尾同理。

更多分页：当表格数据过多时，就需要使用分页，同样，当分页过多时，我们需要进行处理，就是省略，采用更多分页，去展示多余的分页情况，当用户需要查看更多的分页，点击更多图标即可。

总页数：代表大概会有多少页此类数据，通过使用总页数才能让用户知道

总页数说明了内容一共有多少页，就像一本纸质书有总页数，一本有声书有总时长；通过这个元素，用户才能了解内容的多少，对整理内容有个把握。

页码跳转：页码跳转帮助用户从当前页面跳转到其他某个页面；比如用户在搜索了某件商品，按销量排序，这时浏览到了第15页，满意度越来越低；于是打算从前5页选一个，这时就能通过页码跳转快速跳转到第1-5页了。

另外就是当数量过少时，只有一页或者无数据的时候，我们是不需要分页的，这个时候最好去掉分页，展示在这里没有什么意义了。在表格的场景主要分为五类不同场景：数据浏览、数据新增、数据操作、数据统计与通用场景。通过不同场景的梳理分析我们在不同场景中存在哪些优化点，可以进行深入探讨。

在数据浏览的场景中，本质上是对大量数据进行寻找与确认。用户需要在此场景下进行高效准确的数据查找。而伴随着用户的寻找，就需要使用表格当中的工具进行辅助查找，比如筛选、搜索，这些工具的出现，都能够帮助用户进行数据的清洗，使得用户想要的数据能够快速的被找到。

数据新增本质上是将复杂的数据结构，通过系统字段类型的相应规则，录入保存到系统中。这也就我们常说的增删改查的“增”；

比如：销售人员在对新增的客户进行登记时，需要登记公司名称，联系人，联系方式，跟进记录等等。且需要不断更新跟进记录，因此销售人员在表格上的新增是一个非常高频操作～

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

常见的快捷编辑，点击快捷编辑按钮，对单个数据进行录入，

为何需要快捷编辑，在销售使用场景中，使用表格去编辑一条信息是一个循序渐进的过程，比如在对客户进行沟通时，数据的不断更改，跟进内容也在不停修改，导致用户需要每次进入用户详情点击编辑之后才能进行操作，而在表格内进行快捷编辑直接满足实时编辑的需求，在交互层面上这是一个非常硬性的需求。

通常采取两种路径进行操作：进入用户详情页界面，对一整列数据进行编辑，这种情况通常需要对多个数据同时进行处理，因此进入编辑页面更容易寻找，也是最为常见的一种做法；

采取多选过后的操作方式：当用户想要对多条数据进行操作时，就需要对多个数据进行checkbox的勾选，从而满足多行操作的需求。

针对用户需要审查分析。目的是在通过大量的数据分析去得出自己的某一些结论，由于关注的数据会有主次之分，数据与数据之间也会有内在联系，用户会更加跳跃地扫视页面，而且会更加反复地审查数据。