本期内容概览

下图为内容目录，大家可以通过下面的目录针对感兴趣的内容进行选择性阅读。文章分为两小章节类，从最基础对表格的认识再到表格如何提升“易读性”进行分享。

 

什么是表格？

 

我先从表格的最基础的基本认知跟大家分享，帮助大家对表格有个初步的认知。那么什么是表格呢？用一句概括：“将复杂的内容进行「归纳整理」，将「信息展示」给用户，帮助用户高效率的进行「数据分析」。”

 

1. 表格的意义

1.1. 表格定义

表格是一种常见且最有效的信息组织整理手段。在B端产品应用中“表格用于组织并呈现结构化的数据及信息内容，通常会提供对数据对数据及信息的操作能力，进而方便用户阅读、分析、比较数据”。

单元格：通过纵向与横向的分割线组合而成的“单元格”构成了表格的基本单位。

纵列、横列：表格中纵列、横列是由多个单元格进行横向、纵向排布组合而成，他们相互独立又相互关联；

表体：是由多行和多列的单元格组合而成，用于显示数字和其他项以便快速引用、分析和操作。

1.2 表格应用

表格在B端产品中它是页面布局的重要组成部分，可用于展示结构化数据、静态信息以及处于变化中的数据。表格中行与列形成了单元格的宽高，不同的宽高有着疏密之别，使信息之间更易于对比，大大提升了用户对信息的接收效率和理解程度。

因为表格是常见的信息组织手段，所以数据经过归纳整理和合理布局后，更易于用户感知并分辨其中的差异、变化、关联，可以将数据进行对比分析。如下图所示：

 

2. “表格”的构成

常规情况下，可以把表格分为：a. 内部构成元素，它包含了表格头部、表格主体、表尾；b. 外部构成元素，它包含了表格筛选区、按钮操作区、底部区；

2.1 内部构成元素

如下图所示为表格的内部结构样式。

1）表格头部：表格每一列的标题作用包括属性分类或基本概括，还包括了对列进行排序、筛选、冻结等功能。但是，不建议在表头进行筛选等复杂操作。

2）表格主体：表格主体是由表格的多个基本单元格组成，它主要展示表格的主体信息内容。

3）表格尾部：一般承载统计信息，如总计、平均数等。

2.2 外部构成元素

如下图所示为表格的外部结构样式。

1）表格筛选区：它是针对表格主体内容进行筛选。

2）按钮操作区：它是针对表格内部元素做整体的操作，按钮区的操作可分为增、删、改操作和业务处理操作（比如常见业务中常用到的自定义列）。

3）表格底部区：底栏一般放统计信息、分页等内容。

2.3 常见的布局规则

一般来说，表格有水平型、垂直型两种布局。

垂直布局

是在行分割的基础上，通过强化列的视觉特征来突出行间信息的对比，如下图所示：

水平布局

弱化列的存在，强调信息的连贯性，保证用户阅读信息时视觉流是从左到右的，然后自上而下逐条扫描，适合大量信息的浏览。

 

3. 表格类型

类型一：基础表格

最基础的表格，由表头和单元格组成，无其他拓展操作，对信息进行最基础展示。

几种常见的风格样式：1）常规型，仅显示横向分割可减少整个网格的视觉干扰；2）斑马纹，隔行交替使用底色来区分数据横向对比；3）田字型，单元格有均匀而明显的分割线，边框单元格比较明显。

类型二：固定行表格

用于固定表格高度内容区不能完全展示内容的场景，出现滚动条可滑动预览，滚动仅发生在表格内部，表格内有一个独立的垂直滚动。如下图为腾讯投放广告表格，当表格纵向区域内容过长时可上下滑动页面预览：

类型三：固定列表格

用于固定重要信息列，在宽度有限的页面窗口中表格横向内容不能完全被展示的场景，可左右滑动查看其他更多的内容信息。如下图为腾讯投放广告表格，当表格横向区域内容过宽时可左右滑动页面预览：

类型四：单/多选表格

表格可进行单选/多选。如下图为腾讯投放广告表格，可以进行列的选择并将其进行编辑操作：

类型五：可展开表格

表格行可以展开/折叠信息，一些次要的或扩展内容会被折叠起来，有必要操作或查看时可进行展开。如下图为腾讯投放广告表格，他将一些延展的详情数据收起，用户可点击展开：

类型六：树表格

当数据信息有清晰的层级关系时，可以使用树表格。如下图Demo所示：

 

4. 本章总结

本章属于本篇分享的第一章节。主要将表格存在的意义进行了定义，把表格的主要使用场景和作用（价值）进行详细分析，目的是想让大家了解实际工作中应该在什么的场景下如何使用表格。同时也将表格的主要构成元素（内部、外部）进行了拆解，目的想让大家了解后能够正确设计表格。为了方便大家的理解，也通过图文结合的形式更具象、更清楚的提高阅读理解。

 

 

如何提高表格的“易读性”

表格内部构成元素分表由表格头部、表格主题、表格尾部组成，因此提升表格的易读性可以从表格内部着手优化；

 

1. 提升表格易用性因素

1.1 易读性（本期重点）

易读性是指通过使用表格高效的将数据进行展现、传递给用户。表格中的数据需要结构化、展现规则一致、视觉层级清晰，这样即可以将大量的数据进行有效的归纳与分类并陈列信息，又可以表达信息之间的关系；

1.2 易操作（下期重点）

将表格中大量的数据通过筛选、搜索、排序、分页这四个操作提供给用户，帮助用户快速查找、对比、分析的操作，进而达到易操作的目的；

2. 内部构成元素易读性设计

2.1 表头提升易读性的方法

方法一：冻结表头(也是表格的一种类型)

将表格头部固定，一般使用在电脑屏幕显示不全表格纵向内容高度时，为满足用户在向下滚动表体的场景下也能实时有效阅读表体数据与表头属性描述，从而有效提升表格使用易读性。如下图为腾讯投放广告表格，当表格纵向区域内容过长时可上下滑动页面预览：

方法二：多级表头

信息层级分类较多、结构较为复杂时，可使用多级表头来体现数据的层次关系。注意：表格头部的层级需要尽可能的简洁，避免过重的表头增加用户的阅读成本导致失去表格的意义。如下图Demo所示：

2.2表体提升易读性的方法

方法一：行高设置

表格主体是由表格的多个基本单元格组成，它主要展示表格的主体信息内容，所以我们控制好每个基本单元格的高度及可控制表格行高。我们可以使用《原子设计》理论将单元格再次拆分，我们可以把单元格看作是一个分子，那么组成单元格的原子是文字、分割线；

表格行高=单元格行高=文字大小+文字行高+上下边距（Padding）+分割线，如下图所示：

 

文字大小设置：一般出现在表格中的文字大小都在12-16px之间，通常12-14px最为常见，建议大家设计也在此范畴内。

文字行高设置：行高是指在多行里面一行文字与另一行文字之间的的间距，每行文字占用空间的高度。我们定义行距(行高) = 字号 + 行间距，而不是单指字体高度，所以文字的高度不等于字号的高度，如：字号12px，行高为22px，根据Web页面平均分配原则，行距就是从文字的顶端上移4px到文字底部下移4px的距离。如下图所示：

一般行高可设置为字号的1.2-1.8倍，具体情况可按实际的场景诉求制定规范，比如：可以制定几个梯度（紧密、正常、宽松）来配合场景的应用，当文本内容较多时为了不让文字密度那么高可以使用宽松梯度做应用，当空间较小但又想承载更多的内容可以使用紧密梯度做应用；

具体可以查看我之前分享的《文字规范系统》

上下边距（Padding）：表格中的边距上下个方向。如下图所示：

分割线：垂直分割线可跟随列的数量（表格列的密集程度）判断是否需要，一般而言一屏列数较少时可不配置，可减少视觉干扰让表格更简洁，使用列与列之间的间距作区分（格式塔原理）。但是一屏需要展示较多列时建议加上垂直分割线。

但是水平分割线在表格中一般情况下会存在，它能显著减轻表格在垂直方向的视觉重量，提升用户进行大量数据对比时的速度。

那么问题来了，在设置单元格的时候分割线需要加进去吗？答案是需要，但是每个单元格只需要在下方加一个1px分割线即可。举个例：单元格行高为56px，那单元格容器高度=55px+分割=1px。如下图所示：

 

小结：单元格行高是由字体大小、字体行高、上下边距、分割线组成，表格行是由多个单元格组成，标体又是由多个表格行组成。所以，在实际应用场景中可设置字体大小、字体行高、上下边距控制单元格的高度，进而满足设置表格行高的诉求。如下图拆解：

注意：在制作规范时尽量避免出现超过3种以上类型表格行高（不然很难管理和规范使用），可以预设紧密、正常、宽松来配合满足不同业务场景的诉求。

方法二：行宽设置

表格行宽也就是单元格宽度是由内容容器、左右边距组成。如下图所示：

那么问题来了，当随着不同大小的屏幕如何做自适应规则呢。可看下图，将图中A1部分固定宽度，不随页面缩小/拉宽而变化，A2部分看作为自适应部分，它跟随页面缩小/拉宽而变化。如下图所示：

方法三：固定列 (也是表格的一种类型)

将表格中的最关键的内容与操作放在首尾列并固定，帮助用户便捷阅读、操作，未固定列可通过鼠标左右滑动方式查看。优势是在宽度有限的页面窗口中可以左右滑动查看其他更多的内容信息。如下图为腾讯投放广告表格，当表格横向区域内容过宽时可左右滑动页面预览：

注意：这里是指首尾列固定位置，而不是固定列的宽度。对于使用鼠标用户而言，水平滚动交互体验不佳。因此，尽可能通过调整列宽，避免出现水平滚动的情况。

适用场景：当表格的列数量过多导致宽度大于页面宽度时的场景。

方法四：可拖拽列

可伸缩列是指用户可手动拖拽表格某列的宽度，从而达到最佳可阅读状态。如下图为腾讯投放广告表格所示：

可拖拽表格注意事项：

1）需设置列最小宽度：可按属性（日期、ID、数字、图片等）进行定义最小宽度设定，比如正常文本类，如姓名、描述字段可设置最小宽度为3个中文字符、电话号码类固定为11个英文字符等、图片的最小列宽不影响图片的可阅读，超出部份换行显示；

2）某列的宽度被手动调节宽度后，其余列的宽度应当不受影响，如果调整后，如果所有列宽总和大于屏幕宽度时可采用横滑的形式展现；

可拖拽表格适用场景：

表格的数据内容可以很简单或非常复杂。但是预设的宽度并不能给用户最好的阅读体验。这种情况下，我们可以使用宽度可调整的表格，让用户在浏览时根据需要，自主控制表格列的宽度。

方法五：数据处理值

一般用在需要表格原始数据的基础上给出数据差值、数据升降变化、数据平均值、数据总计等处理结果为导向，目的是减少用户再次需要处理加工数据的过程，提升用户阅读信息的效率。

比如，用户想快速查看对比某两个时间段数据总计情况，那么可以在表格底部或表体第一列给个总计行，供用户进行快速查阅。如下图为总计案例Demo：

方法六：自定义列

提供自定义列设置可让用户根据自己的诉求来定义表格的列展示列及顺序，常常用在表格中列数特较多场景。用户可以根据自己的需要，自由的选择显示所需指标，隐藏不必要指标，减少干扰。

首先用户可以在操作中预设几个常用的自定义列展示，方便后续的延用。其次在对表格列的定义设置弹窗中可分成两个操作区：1、用户先在左侧选择希望在表格中展示的列；2、右侧可对表格列字段进行排序。如下图为腾讯投放广告表格所示：

注意：系统应记住用户上一次的自定义列设置，减少用户操作成本。

2.3 表尾提升易读性的方法

方法一：提供分页器

在数据量较大的表格中使用分页器有以下四大优势：

1）方便用户看到的内容尽可能聚焦，避免信息量过载。

2）分页可以缓解服务器的数据加载压力导致的加载时间过长。

3）分页可以跳跃查看数据，灵活性更高、步骤更短。

4）用户在表格浏览时可作为导航提示作用，告知用户浏览哪几条数据及数据总条数。

 

分页器“解刨”（延展部分）

既然说到分页器，那我们来细聊一下这个组件。首先，我们应该得知道分页器是一个独立的组件，而不是表格组件中的一部分，在本文中他与表格一起出现只是应用场景之一。

一般应用应用在展示大量内容或数据条目时，为了使用户看到的内容尽可能聚焦，避免信息过载，我们应使用分页器将内容分成多页展示。分页器分为常规、简洁两种类型；

常规分页器

1）翻页按钮：用于在前后页面之间翻页导航功能;（必要）

2）当前页码：高亮的当前所在页码，告知用户页面中数据处于当前位置;（必要）

3）普通页码：用户点击可快速切换至该页;（必要）

4）截断符号：当页面过多时用于省略中间页，同时作为快速导航及被省略页码的操作入口;（必要）

5）条目设置：用于设置每页显示条目数量;（可选）

6）总页数：通过使用总页数告诉用户知道大概会有多少数据；（可选）

7）页码跳转：帮助用户从当前页面跳转到其他某个页面；（可选）

简洁分页器

1）翻页按钮：用于在前后页面之间翻页导航功能；（必要）

2）页码提示：a、提示用户当前页/总页数；b、点击出现现下拉选择，用户可以直接跳转到某页面；（可选）

 

3. 数据如何展示

3.1 从属信息展示

通常为了提高用户的快速浏览效率，减少次要信息的漏出。表格不会默认展示所有的信息，一些次要的、不是必须要关注的数据内容将其折叠起来，用户有需要时可通过行展开的方式呈现。

方法一：使用嵌套子表格

将表格中父级行数据下的多条数据关联数据进行嵌套。它能够对主数据进行更加细致的解释，详细的了解主数据中数据的含义。如下图所示，就是在一个表格中还能嵌套另一个表格：

方法二：使用树形表格 (也是表格的一种类型）

树形表格是指表格的主要列的数据组织方式是一个树结构，他可以时是多级树结构的展现形式，对应的列数据（多级）与标题强相关。当数据信息有清晰的层级关系时，可以使用树表格。如下图Demo所示：

方法三：使用可展开 (也是表格的一种类型）

表格行可以展开/折叠信息，一些次要的或扩展内容会被折叠起来，有必要操作或查看时可进行展开，比如：可以是表单字段详情、可以是介绍说明等。如下图为腾讯投放广告表格，他将一些延展的详情数据收起，用户可点击展开：

 

3.2 单元格空数据展示

在表格字段展现中进场会有某个数据为空的情况，这时候建议大家不要用户“0”或“空白”展示。因为在无数据/空的情况下用“0”容易误导用户数据是“0”，一般用会用“-”来表示数据为空（用户惯性认知）。

3.3 默认排序

默认情况下常以创建时间进行排序，把最新创建的数据排在表格的最前面。因为用户路径是创建后对最新的操作评率较高，方便用户查找。我们可以假设如果创建一条数据后，把最新数据放在最后一列，那么用户在查找需要额外的搜索/筛选/使用分页，增加了用户的操作成本。如下图所示可以默认时间排序，也可以按升序排序：

3.4 数据的对齐方式

合适的对齐方式能够提升数据的浏览效率，比如：常见的文本左对齐，数据类右对齐。表格内信息的纵向列对齐符合格式塔中相近原则，它能够很好将表格每列的数据形成一个个组的视觉效果。通过正确的对齐，会让表格更加规范并易理解，从而快速提升数据的浏览、对比效率。

数据类型

数值类型右对齐：便于用户直观而又准确地读取数据，要做到一眼观定、简洁明了。在表格中数值分布排列时，通常采用“右对齐”方式，既方便用户快捷读取数据，还可以使用户进行纵向数据对比。比如常见的金额、人数、大小等，可以通过数据位数的长短直观对比，因为在表格中对比数字时，阅读顺序是看个位、十位、百位…等。注意：数据格式需要保持一致，避免出现格式不一致的情况，比如：100.89、100、100.1；应该：100.89、100.00、100.10格式。

 

布尔型左对齐：比如常见的男/女、是/否、真/假等。

文本类型

固定或不固定长度文本都是用右对齐，固定长度是指文本长度不会发生变化，比如：日期、手机号等；不固定长度是指正常的项目描述、解释说明、名称之类格式和长度都不固定。应为左对齐符合中/英文的阅读习惯，如下图所示：

3.5 数据格式

规范数据表达，保证直观准确一致的理解数据，比如：数值用来表示计量大小，它可单独出现或搭配数字符号进行使用等一些规范。

大额计量

如果一个金额很大，那么数值中的“万”“亿”单位可采用汉字。如果一个数值很大，那么数值中的“万”“亿”单位可采用汉字。

 

数字脱敏

数据脱敏是指对某些敏感信息通过脱敏规则进行数据变形。下图为通用场景，遇到数据安全性较强的业务场景，可根据业务场景自行调整。下图为常见脱敏类型及通用使用方式：

时间日期格式

数值符合展现

在表格中数值用来表示计量大小，它也可单独出现或搭配数字符号进行使用。

计量单位

在表格中，计量单位默认放在表头，并默认右对齐。如下图所示：

 

本章总结

本章属于本篇分享的第二章节。我们首先分析了提升表格效率的的两大因素，分别是易读性和易操。其次我们通过分析“表格内部构成元素设计”和“数据如何展示”的设计手段来达到提高表格的易读性。

其中“表格内部构成元素设计”章节讲述了将表格内部元素表头、表体、表尾拆解并将设计技巧和设计手段进行分享，目的是想帮助大家在设计表格时能够通过这些技巧和手段提升表格的易读性。“数据如何展示”章节讲述了从各个维度思考如何正确将表格中的数据如何正确展示。

 

文章总结

根据上文我们可总结到表格是“将复杂的内容进行「归纳整理」，将「信息展示」给用户，帮助用户高效率的进行「数据分析」”。所以表格的作用是常见且最有效的信息组织整理手段，我们想要提升表格的体验就需要着手从“易读性”和“易操作”角度出发。本文侧重拆解了什么是表格以及分析了如何提高表格的“易读性”，下篇分享将以“易操作”角度继续分享如何提升表格的体验。

 

参考文献

http://www.woshipm.com/pd/1655376.html

http://www.woshipm.com/ucd/714641.html

http://www.woshipm.com/pd/661699.html

http://www.woshipm.com/pd/5323117.html

https://ant.design/components/table-cn/