上一篇文章我跟大家分享了B面表格设计规范➡️；表格设计方法➡️
表格作为B端常见且重要的元素之一，可以整合大量数据进行查看、比较、操作。本文从实际出发，探索更多提升视觉和体验的解决方案。
基本组成
一个Rich Table通常包含过滤区域、标题栏、表格区域和分页栏（图片来自ant design5.0组件库中的protable）
① 放映区
主要针对表格数据的条件查询，常见的过滤方式有填写搜索框、下拉列表选择等。
② 标题栏
表示表格的内容主题，比较醒目，一般放在左侧，必要时可以在右侧添加切换表格或者搜索框作为过滤条件。
③ 桌子区域
它包括表头和用于查看数据的数据区，末尾根据需要列出相应的单列操作。
④ 分页栏
按页显示筛选后的数据总量和总页数，还可以选择每页显示的条目数和跳转页数，样式和内容比较固定，并不是所有表格都有。
以下内容讲解：在表格这个大组件中，过滤区域和表体的变化比较多，这次我们主要讲一下表格区域的各种玩法。
表头① 功能：表头起分类作用，显示本列的信息主题。
② 视觉风格
在大多数情况下，表头会比内容行短，有时也会缩小表头的文字大小以突出数据，表头的背景颜色可根据需要选择。
③内容分类：纯文本
当表头仅包含文字时，仅起基本的分类作用；
如果要强调标题，尤其是信息分类差别不大（比如多列都是同一范围的数值数据）且列数较多时，背景颜色会比单元格深，文字会采用加粗黑色；
如果要弱化标题，可以使用白色背景，文字颜色与单元格同色或浅色，风格简洁，更注重内容，内容的风格可以丰富一些，这在国外设计中比较常见。
需要注意的是，有些标题除了主题正文外，还会有单位，特别是数值数据栏，会添加百分数、万等单位，以使数值数据更加准确。
文字+功能图标
说明：文字两侧分别有感叹号/问号图标，将鼠标移动到相应位置时会弹出气泡弹窗解释表头标题；
排序：通常在左侧或右侧放置一个上下箭头图标，以数字和字母的升序或降序排列此列中的字段。这也是一种常见的排序方法。例如下图中的“Created by”标题是按照字母顺序排列的；
过滤：对于比较复杂的情况，可以添加过滤图标来补充或替代过滤条件，减少过滤条件的空间；对于比较复杂的情况，两种方式都可以。和过滤一样，使用气泡弹窗来承载选项（如下图）。由于这不是本文的重点，这里就不深入讨论了。
文字+装饰图标
Excel表格类型中还出现了比较少见的趣味表格，用于对大量数据进行汇总或者统计，使得分类更加清晰，避免视觉疲劳。
④ 特殊情况
如果表格涉及多选操作，在表格头的最前面会有一个全选按钮，列的样式同理，点击后会选中下面所有行最前面的按钮，即选中当前表格页中的所有行（如上图）；
如果表格最后一列是操作按钮，则可以省略表头中的文字，或者显示为“操作区域”。
数据区
① 功能
它承载着表格数据的主体，是需要读取的数据，也是决定下一步操作的依据，比如查看详情（这里主要讨论单组表的情况）。
② 设计原则
主要讲解的是高效阅读，具体从两个方面来讲：
减少视觉干扰 a. 表格边框
表格边框的粗细和深度会影响阅读效率，一般没有竖线，横线较细较浅，以免影响阅读（下图中ant design组件中边框线设置为1px，#F0F0F0）。
b. 背景颜色
静态通常是白色，只有内容较多的表格才需要斑马线（一行深，一行浅）；
当选中某一行的时候，背景色也会变深，这里的背景色可以是浅灰色，浅蓝色，也可以是透明度较低的品牌色（上图中 antdesign 组件中选择的背景色是 #FAFAFA，比边框略浅）。
c.文本（普通文本）
除表格表头外，表格内普通文本的大小、颜色都一致（采用系统的普通文本格式，参考上图中ant设计，为14px、#1F1F1F）；
注意1：内容中如果还没有数据就填0，没有内容就用-。尽量不要留空，不然让人误以为还没加载完成。遇到日期、手机号等情况，使用相同的格式。不仅最好保持同一页面的表格层次一致；
注2：由于表格宽度有限，可能会出现文字换行的情况，根据需要可以选择固定最大字数+省略号（气泡显示）或者使用横向滑动（需要固定操作栏），尽量不要选择换行，会影响阅读效率，也浪费垂直空间。
加强强调 a.文字（部分功能）
不带操作但使用强调色的文本：常用于一些需要强调文本内容的场景，尤其是与金额相关的数据，比如增长、减少的数据。注意在中国用红色表示增加，绿色表示减少，国外则相反。
标签文字：以标签的形式出现，通常标签为一个短语，常用于有固定文字描述的表格项。图中“处理中”和“开发中”的颜色选用不同色调，一目了然。也有特殊情况，改变文字内容的颜色，加上背景色，以区别于列表常规内容，比如图中最后一栏的时间警示。
链接/操作文字：前者点击后跳转至相关文字的详情页，后者是执行相应操作的文字按钮，如删除等。详情一般使用蓝色链接（偶尔也会使用品牌色，尤其是品牌色也是蓝色的时候）。
b. 图标/按钮
按钮通常以文字、图标、或者文字+图标的形式出现，表格中的图标大多也是以按钮的形式存在。
图标本身也多采用基础常见的图形，如问号表示解释、感叹号表示警告、对勾表示成功等，配色也符合普遍认知（红绿灯配色）。
展现方式-外部：适合强调视觉效果，特别是高频操作的场景，如图，信息质量一栏的图标（象征性强调）和最后一栏的操作（高频操作）；
显示方式-隐藏：鼠标移动到相应位置（对应表项）时才显示，一般作为操作按钮，比如图中的编辑图标（库存栏，选中行号旁边）。
分类：
如果操作是针对整行的话，则放在最后一列，如果操作是针对某个单元格/单个item的话，一般放在文本之后（参考上图）；
注意当操作项较多时，根据情况选择解决方案，如果宽度足够且选项较少，可以直接平铺，如果选项较多，可以选择折叠低频项、全部折叠，或者直接将操作放入按操作频率跳转的详情页中。
c. 图表
它属于数据可视化的范畴，也是高效阅读的重要手段，最常用的有横向环形图、条形图、堆积条形图等。
其特点是直观、清晰，多用于流程进度、比例等场景，具体使用还是要看图表本身的适用场景。
③案例分析
根据近期的一个实际案例，需求是可视化增强审批的进度栏，进度项有：待提交、审批中、审批完成、审批返回。当时完成并考虑了以下解决方案：
方案（一） 小点：视觉效果最弱，不易影响表格整体阅读，需要使用不同色调进行区分，需与文字搭配，适合表格内容较多的场景。
方案（2）进度环：借鉴Xmind中的任务标记，可以采用一种或多种颜色，更加直观，适合表格内容较少，有流程的场景。
方案（三）Icon+Label：视觉效果最强，是方案一的加强版，适合表格已经有多种强调样式，需要突出显示列的场景。
由于整体风格比较简单，表格内容比较大，所以最终在项目中采用的方案比较简洁明了，但在实际场景中需要根据各个项目的内容量和风格来决定。
终于
有同学可能会说，日常设计基本很少有trick，是的，B端设计比C端设计更克制，对应的用户群体更有发言权，但前提是你有充足的知识储备，懂业务，能有理有据的分析、决策，这样会更专业，更有说服力。
