表格被公认是展现结构化数据最为清晰、高效的形式。常和按钮、搜索、筛选、分页等其他元素一起协同，构成表格页。

设计背景与目标

1. 现状

交付业务场景中需要大量的表格，虽然我们组件库对表格枚举众多，在实际应用中，快速拓展效率低，增列行、匹配宽度等耗时3长，普适性低，团队使用情况不统一。
根据这个需求，通过对业务属性的深入研究，基于基础组件建设表单高级组件，对组件进行补充和赋能，从设计侧推动业务进行体验优化，促进产品质量的提升。

2. 目标

组件专业度、通用性、业务性得以提升
1. 业务性：组件库和业务进行深度绑定，设计沉淀来源于实践并赋能于实践。
2. 专业性：区块化搭建，组件的设计质量和研究深度可以得到一定的保证。
3. 通用性：普适性强，增加团队之间的联系。

探索过程

1. 表格页的构成

在B端表格页中，由导航、筛选、表格几大模块构成，因为表格面积占比最大，页面呈现最为重要，会直接影响用户的使用体验。

说完表格的组成，接下来，我会对每一个部分进行分解，探讨表格设计要点。

2. 标题

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

3. 筛选

模糊搜索

是指在用户搜索意图不明确时，搜索引擎将用户的查询与待检索的内容进行模糊匹配，找出与查询相关的内容。模糊搜索无法精确理解用户的查询意图，返回的结果中可能包括了一大批用户不想要的信息，所以在使用模糊搜索时一定要结合自己的实际场景，慎重使用。

• 优点：只要有相关的内容都会被检索出来，减少了精准搜索带来的记忆负担
• 缺点：容易把相关的信息也带出来，例如检索手机号，把相关编码也匹配出来

下拉筛选

下拉筛选就是将需要筛选的内容放置于选择器当中，通过点击选择器下拉，来选择需要筛选的内容。

• 优点：空间利用率高，起到了很好的收纳作用
• 缺点：无法直观看到所有的筛选项

平铺筛选

平铺筛选就是将筛选项的内容，直接展示于页面之上，通过点击选择的方式直接进行筛选。或者可以通过自定义内容的筛选。

• 优点：操作效率高，筛选项一目了然，支持输入更多筛选条件
• 缺点：空间利用率低，不适合选项太多的情况

4. 表格的类型

基础表格

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

树形表格 - 包含关系

当表格中的数据为包含与被包含的结构时，可采取树形表格。
通过逐级大纲的形式来展现数据间的层级关系，让整个信息结构变得一目了然。这一表格形式常出现于项目管理工具中。

子表格 - 嵌套关系

当一条主数据下有多条数据结构不同的关联数据进行嵌套时，这时候就可以用子表格进行创建。它能够对主数据进行更加细致的解释，详细的了解主数据中数据的含义。从表象上看，就是在一个表格中还能嵌套另一个表格。
比如在对某集团对旗下子公司的销售表格中，它能够通过嵌套子表格的形式，将每一个子公司下的销售人员的销售记录进行记录，从而能够更加细致的了解到每一个公司、每一个人员的具体情况。
在国外报表中，这类表格很少出现，而在中国的报表中，嵌套子表格算是一种不折不扣的中国式报表。
当然这里我们依旧可以深入理解，比如在两个表格之间，用户是通过什么样的方式建立一个父子的关系？表格中当父数据删除时，子数据如何处理？设计上对父子之间的关联有着何种限制，这都是我们需要思考的，因为这里牵涉到业务实在太多，我也无法抽象出一个规律供大家学习，因此只有具体问题具体分析。

5. 表格设计原则

在我们对表格的设计思考过程中，需要注意两项原则：易读与易用
前者是提升使用者在表格浏览时的体验，主要是从信息密度、色彩分隔、以及视觉节奏三个方面去理解；后者是使用表格时的操作感受，比如快捷操作、多数据编辑等方面去理解。无论是B端的任何页面，表格都是必不可少的部分。

添加字段说明

当字段名称过长，又必须展示，才能有效的理解字段含义时。我们可以定义一个专有名词代替，并且在字段名称后使用添加字段说明的形式，来对字段加以说明。
这样一来用户既可以清晰的理解字段含义，又可以在有限的页面空间下获取到更多的数据信息。

减少不必要的颜色区分

表格设计中一定不要使用过多的颜色区做状态或操作的区分，过多的颜色细分会使表格变得更加混乱，影响用户体验。
对状态的区分，仅用轻量的颜色区分即可，操作栏保持主色按钮色。

单元格高度

在开发同学的眼中，单元格高度=内容高度+上间距+下间距，在实现设计稿时，通常也是按照这个方式来写的，而不是像设计同学一样按照文字的尺寸来计算间距。其中，文字行高建议设为字号的1.5倍，上下间距设为字号的1.2倍。

收起低频操作

合适的列间距

合适的填充和边距对于视觉设计至关重要，以保证易读性。定义列的间距时，我通常的做法是N1保持不变，将N2定义一个最小值，N2再根据表格的宽度自适应变化。
表格主要适配到这个最小宽度，这一步骤通常的设计系统的初期就要完成，一方面可根据自己项目目前情况，按照导航宽度等固定尺寸确定最小的表格宽度，这样在处理最小尺寸时，可以有一个明确的边界，同时能与开发同学进行理解沟通。当表格宽度大于页面宽度，固定首尾列，左右滑动。

控制列数

基于对实际业务需求、目标用户诉求及其行为的理解，列数尽量控制在7±2，列举用户更为关注的数据，用户需要的非重点、辅助性信息可以在详情中展示。

自定义列

如果不同用户想看到的信息侧重不同，可以让用户自定义列的展示。在默认情况下仅展示最常用、最重要的几个指标（如下图）。这样做的好处是：
首先，用户能在表格上方看到所有的指标名称，避免了原来需要横向拖拽才能浏览到所有指标的情况；
其次，用户可以根据自己的需要，自由的选择显示所需指标，隐藏不必要指标，减少干扰。但需注意系统应记住用户上一次的自定义列设置，减少用户重复操作。

合适的对齐方式

合适的对齐方式能够提升数据的浏览效率。表格内信息的纵向列对齐（符合格式塔心理学中相近原则）能够很好的形成视觉引导线。通过对齐，会让表格更加规范易理解，给用户视觉上的统一感，视线流动更顺畅，让用户快速的捕捉到所需内容。

• 文本左对齐：更高效的阅读浏览顺序，包括非比较型和固定长度的数字，如日期2020-12-04（补0是数字书写规范）、编号1948696等；
• 数值右对齐：金额、长度、高度等，数字是从右往左读的，通过数值位数的长短即可对比数值的量级和大小，方便数值的比对。这是因为在对比数字时，首先看个位，然后十位、百位等；
• 操作右对齐：操作即使没有纵向分割线也能很好的起到分隔的作用，视觉上看表格是一个方方正正的格子，比较整齐

搭建思路

资源下载

https://js.design/f/qXmAgd?p=xAAjGK6q7D