一、基础组成

一个内容丰富的表格通常包括筛选区、标题栏、表格区域、分页栏（图片来源于ant design 5.0组件库的 protable）：

1. 筛选区

主要是针对表格数据进行有条件的查询，常用筛选的方式有搜索框填写、下拉选择等。

2. 标题栏

表明表格的内容主题，相对比较醒目，一般置于左侧，根据需要，右侧会添加切换table或一个搜索框作为筛选条件 。

3. 表格区域

分为表头和数据区，主要用于数据查看，根据需要，在末尾列有对应单列的操作。

4. 分页栏

分页展示筛选后总数据量和总页数，也可以选择每页展示条数和跳转页数，相对样式和内容比较固定，不是所有表格都有。

以下内容说明：在表格这个大组件中，筛选区和表格主体的变化较多，本次主要说一下表格区域的各种玩法。

二、表头

1. 作用

表头主要起到分类的作用，表明这一列信息的主题是什么。

2. 视觉样式

大部分表头相对内容行都会偏矮一些，有时候为了突出数据甚至会缩小表头文字字号，表头的背景色则按需选择（下面详述）。

3. 内容分类

纯文字

表格的表头只有文字时，则只是基础分类作用；

如果要强调标题，尤其是信息分类差别不大（如多列都是同一个范围的数字数据）和列数较多的情况，背景色相对于单元格更深一些，文字也会加粗加黑；

如果是弱化标题，则使用白底，文字颜色与单元格一致或更浅，风格简约且更关注内容，内容的样式可以更加丰富，常见于国外的设计中。

需要注意的是，有的标题除了主题文字还会加上单位，尤其是数字数据列，会加上如百分比、万等单位，使数字数据理解更加准确。

文字+图标

a. 文字+功能图标

解释：在文字两侧中的一侧，有个浅色的感叹号/问号的图标，鼠标移动到对应位置会有气泡弹窗弹出，针对表头标题进行解释说明；

排序：一般是在左侧或右侧放置一个上下箭头的图标，用于本列字段按照数字、字母等升序或降序进行排列，这也是比较常用的排序方式。如下图的“创建人”标题，则是按照英文字母表的顺序进行排列；

筛选：比较复杂的情况是加入筛选图标，补充或替代筛选条件，减少筛选条件空间；更复杂的情况是两者都有，如筛选一样使用气泡弹窗承载选项（如下图下），由于非本次重点此处不再深入讨论。

b. 文字+装饰图标

相对少见，但在excel类型的表中出现过，适用于收集或统计较多数据的趣味表格，使得分类更加清晰，也避免了视觉疲劳。

4. 特殊情况

如果表格涉及多选操作，在表头最前会有一个全选的按钮，一列都样式一致，点击后则下面所有行最前面的按钮都会点选，即表示选择当前表格页所有行（如上图下）；

如果表格最后列是操作按钮，则表头部分可以省略文字或者显示为“操作区” 。

三、数据区

1. 作用

承载着表格数据主体，是需要进行阅读，也是决定下一步的操作的依据，如常见的查看详情（这里主要讨论单组表格的情况）。

2. 设计原则

主要是高效阅读，下面将从两个方面进行详述：

减少视觉干扰

a. 表格框线

表格框线的粗细深浅会影响到阅读效率。一般没有竖线，横线则使用更细、浅的线条才不会影响阅读（下图ant design 组件中框线设置为1px，#F0F0F0）。

b. 背景颜色

静态一般为白色，在内容比较多的表格才需要使用斑马线（一行深一行浅的底色）；

选中行时也会加深底色，此处的底色可以是浅灰、浅蓝或是低透明度的品牌色（上图ant design 组件中选中底色为#FAFAFA，略浅于框线)。

c. 文字（普通文字）

除了表头，表格内普通文字大小和颜色一致（采用系统的普通正文格式，参考上图ant design是14px、#1F1F1F）；

注意1：内容上，如果是没有数据填写为0，没有内容则用 - ，尽量不要空着，会让人误解为没有加载出来；遇到日期、手机号等内容，使用相同的格式，不仅是表格最好是同一页面层级都保持一致；

注意2：由于表格本身宽度有限，可能存在文字过多需要换行的情况，根据需要可以选择固定最多字数+省略号（气泡显示）或使用横向滑动（需要固定操作列），尽量不要选择换行的形式，会影响阅读效率以及浪费纵向空间 。

加强重点突出

a. 文字（偏功能）

无操作但使用强调色的文字：常见于一些需要突出文字内容的场景，尤其是和金额相关的数据，如增长和缩减的数据（+/- + 数据），注意国内常使用红色代表涨、绿色代表跌，在国外则相反。

标签文字：以标签的形式出现，一般一个标签就是一个词组，常用在有固定词描述的表格项。如图中的处理中、待开发，其颜色要选取不同色相，一目了然。还有一种特殊情况，为了区别于列表常规内容而改变文字内容颜色并加底色，如图上最后一列的时间警示。

链接/操作文字 ：前者是点击可跳转有关文字的详情页面，后者是文字按钮会点击有相应操作，如详情、删除一般采用链接蓝（偶尔也使用品牌色，尤其是品牌色也是蓝色时）。

b. 图标/按钮

按钮一般以文字、图标、文字+图标形式出现，在表格中，图标也大都以按钮的作用存在，图标本身也多选用基础常见图形，如说明的问号、警示的感叹号、成功的打勾，颜色也符合普遍认知（红绿灯配色）；

展现方式：

外显：适用强调视觉的场景，尤其是高频操作，如图中信息质量一列的图标（符号化强调）、最后一列的操作（高频操作）；

隐藏：只有在鼠标移动到对应位置（对应表格项或者一行）才会显现，一般也是作为操作按钮，如图中的编辑图标（库存一列、选中行的数字旁）。

分类：

如果是对整行进行操作则放在最后一列，针对单元格/单项进行操作一般跟在文字后面（参考上图）；

注意有多个操作项时，根据情况选择方案，宽度足够且选项较少直接平铺，选项较多则可以按照操作频率，选择低频项折叠、全部折叠或直接将操作放入点击跳转的详情页中。

c. 图表

属于数据可视化的范畴，也是高效阅读的重要手段。一般使用比较多的是横向的环形图、条形图、堆叠条形图等；

特点是直观清晰，常用于流程进度、比例一类的场景，使用按照图表本身的适用场景。

3. 案例解析

根据我最近的一个实际案例进行讲解，需求是对展示审批的进度列进行视觉强化，进度项为：待提交、审批中、审批完成、审批退回，当时完成如下方案并进行思考：

方案一 小圆点：视觉效果最弱，不容易影响表格整体的阅读，需要使用不同色相的颜色进行区分，需要搭配文字，适合用于表格内容较多的场景；

方案二 进度环：灵感来源于Xmind里面的任务标记，可以用一个或多个颜色，更直观，适合表格内容较少、有流程的场景；

方案三 图标+标签：视觉效果最强，属于方案一的加强版，适合表格已有多种强调样式、且此列需强突出的场景。

由于是整体风格比较简约，且表格内容较多，项目中最后用的方案一，简单又明了。但在实际场景中，还需根据各自的项目内容量和风格来决定。

四、写在最后

有的同学可能会说平时设计基本很少有花样，是的，B端设计相对C端设计更加克制，对应用户群体的话语权更高，但前提是自己的知识储备足够并了解业务，有理有据去分析和决策，这样才更专业、才能让人信服。

设计不是视觉概念，而是解决方案，设计应该成为所有业务的牵引力。我们要给设计师们足够的空间，放手让他们发挥创造力 . ——雷军

参考链接

• 表格 Table -ant design：https://ant.design/components/table-cn
• B端设计指南-06表格（上）：https://www.zcool.com.cn/article/ZMTE5MjY4MA==.html
• B端设计指南-06表格（下）：https://www.zcool.com.cn/article/ZMTIwNDY1Ng==.html
• B端表格设计指南（上篇）：https://www.woshipm.com/pd/5323117.html
• B端表格设计指南（下篇）：https://www.woshipm.com/pd/5327476.html
• 解析B端产品筛选器设计：https://www.zcool.com.cn/article/ZMTI2ODM5Ng==.html

（说明：上面部分用图来源于网络，仅供交流与学习，如侵则删）