区块组件-表格页的设计梳理｜北京蓝蓝UI设计公司

2023-9-14 ui设计分享达人

表格的设计，虽然看似简单，但是作为用户最常用的组件之一，我们需要对视觉和交互的精准把握，才能保证用户在使用表格时更加高效表格被公认是展现结构化数据最为清晰、高效的形式。常和按钮、搜索、筛选、分页等其他元素一起协同，构成表格页。表格的设计，虽然看似简单，但是作为用户最常用的组件之一，我们需要对视觉和交互的精准把握，才能保证用户在使用表格时更加高效。

设计背景与目标

现状
交付业务场景中需要大量的表格，虽然我们组件库对表格枚举众多，在实际应用中，快速拓展效率低，增列行、匹配宽度等耗时3长，普适性低，团队使用情况不统一。根据这个需求，通过对业务属性的深入研究，基于基础组件建设表单高级组件，对组件进行补充和赋能，从设计侧推动业务进行体验优化，促进产品质量的提升。
目标
组件专业度、通用性、业务性得以提升1. 业务性：组件库和业务进行深度绑定，设计沉淀来源于实践并赋能于实践。2. 专业性：区块化搭建，组件的设计质量和研究深度可以得到一定的保证。3. 通用性：普适性强，增加团队之间的联系。

探索过程

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

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

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

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

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

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

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

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

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

表格的类型
基础表格
基础表格是根基，是由行与列的单元格组成。在使用层面上能满足用户多维度查看数据的需求。因为大家都很熟知。
树形表格 - 包含关系
当表格中的数据为包含与被包含的结构时，可采取树形表格。通过逐级大纲的形式来展现数据间的层级关系，让整个信息结构变得一目了然。这一表格形式常出现于项目管理工具中。

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

交叉表格/表头分组 - 两条数据在形式上有交叉
当一个表格里面有多条数据在同一个小范围的维度进行展示时，它就是交叉表格。从表象上看，就是表头有很多分组进行区分，因此它也叫做表头分组。它能够通过硬拆分将数据进行切割，但是这样数据的易读性就是有很大的差距，比如在2010-2020公司年度收支表格中，需要同时展示每一年份的收入、支出与利润，使用交叉报表能够让用户一眼就是看清数据，而基础表格却不行。交叉表格也算是中国式表格中的一种，能够满足具体业务上的需求。

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

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

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

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

收起低频操作

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

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

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

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

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