一、表格构成
基础表格就是由行、列分隔而成的单元格构成。
在B端产品中，表格通常和按钮、搜索、筛选、分页等其它界面元素一起协同，构成表格页。从分类的视角来看，表格页的信息元素可以分为三类，即数据查看、数据操作、数据过滤。（见示例图，图为脱敏后的工资单发放管理页）
数据查看：就是表格主体，展示工资单的基本信息，e.g.发放状态、发放金额；
数据操作：主要是针对数据进行一些操作，e.g.上传工资单、删除工资单；
数据过滤：对工资单进行搜索、筛选；
二、表格设计原则
想要设计出好的表格，首先要知道好的标准是什么，下面将根据表格页的分类来阐述表格的设计原则。
2.1 数据查看
判断表格主体设计得好坏，可以根据信息降噪、呼吸适中、高效易读、详情查看这四个维度来检验。
2.1.1 信息降噪
信息降噪又可以分为内容和视觉两个方面。
1、内容降噪的方法
（1）控制列表的数量
将表格的列数控制在7±2中，把更多信息放进详情。示例中，流水号和资金性质这两个字段，既不能帮助用户识别工资单，还显得表格页杂乱，完全没有必要展示在列表页，用户需要了解时点击详情页里查看即可。
当然，在实际业务场景中肯定会存在无法删减列表字段的场景，这种时候也没有必要强行去合并同类项，我之前在做个税计算项目时，就犯过错：自以为聪明的把累计子女教育、累计继续教育、累计大病医疗、累计住房贷款、累计住房租金、累计赡养老人，合并成累计专项附加扣除项，上线后被各司财务一顿狂喷，别人就是要核对每个字段的具体数值，我这纯属瞎搞。
所以说，B端设计有个很重要的原则：业务诉求远高于体验诉求。
当表格列数过长或者不同用户想看到的信息侧重不同时，可以让用户自定义列来实现内容降噪。
若业务字段实在太多，则可以选择固定前后列支持横向滑动表格。
（2）简化表头命名
表头名称建议尽量使用最少的字数去表达。
遇到比较复杂的表头，可以定义一个专有名词，鼠标hover上去给解释说明。
2、视觉降噪的方法
（1）去掉不必要的分割线和斑马纹
目前表格设计的主流样式是运用对齐和间距来区分列和行，想要聚焦某一行可以在鼠标hover上去时给斑马纹，这样的页面整体显得干净、清爽，相反，带竖向分割线和固定斑马纹的表格就过于沉重了。（⚠️注意，分割线的样式也要尽量轻盈，不要抢视觉，重点是要突出表格内容）
（2）去掉不必要的装饰和颜色
表格中使用过多的颜色和图标会显得页面杂乱无章没有重点，除操作项统一用链接色外，其余文字颜色统一，状态字段可以定义不同的颜色，但也不建议色彩太多。
（3）不要出现衬线体
无衬线字体没有边角装饰，视觉上更加简约，建议不要使用宋体、Time New Roman等衬线字体。
2.1.2 呼吸适中
用户能够很舒畅的直接感受到表格中的信息就是我们常说的呼吸感。
表格的呼吸感受到单元格高度和列间距的影响。
1、如何定义单元格的高度
定义单元格高度的公式：单元格高度 = 内容高度+上间距+下间距
文字字号为n时，文字行高建议为1.5n，上下间距在n～1.2n，上下间距略小于行高呼吸感是最适中的（⚠️注意，这里给出文字行高和上下间距数值仅做参考建议，实际取值时需要取整，单元格高度定偶，例如：14号的字，文字行高按公式算得21px，上下间距各16.8px，但我实际定义的单元格行高为20px，上下间距取17px）
2、如何定义列的间距
列与列之间的距离相对更好定义，只需要n1保持不变，给n2定义一个最小值，让其自适应变化即可。
2.1.3 高效易读
1、列对齐
列的对齐方式会直接影响用户提取表格信息的效率，不要使用居中对齐的方式，通常情况下：
标题和内容 左对齐
存在长短不一的数字 右对齐
尾列 右对齐
2、行的排序规则
平台类的产品，新增数据采用excel表格批量导入的方式十分常见，例如添加员工，最新加入的数据应该在列表最上面，展示顺序与原始excel表格保持一致，这样能给用户最直观的操作反馈，也方便用户对新加入的数据进行处理。如果员工按照姓名字母顺序加入，试想若原始表格中的员工都姓徐、张、朱等，导入后的员工被添加到列表末端页，用户对新导入的数据完全没有感知，还需进一步定位非常麻烦。
3、单元格内容宽度和行数
当单元格内容长度不可控时，我们需要提前定义好内容的宽度、行数以及字数溢出后的展示规则。
4、不留空白格
企业人事在制作工资单时，很多字段只会在有数据时才会输入数值，没有数值时则为空，但在系统的页面展示上我们不要在表格中留空白格，没有内容标记为-，没有数量/金额为0。
5、选择合适的翻页器
为了缓解服务器的压力，列表一般只会加载当前页面的数据，但这样全选时也只能选择当前页的数据。当用户需要对数据进行批量处理操作时，就会非常麻烦，这个时候，自定义页数分页器就提供了一定程度上的操作便捷，用户可以自行定义页面展示多少行数据。
6、收起低频操作项
操作项不要放太多操作，把低频操作收起来。
2.1.4 详情查看
1、入口
一般是在操作项里添加详情。
有时也可以把名称作为可点击样式，跳转详情。
2、交互方式
详情页的查看方式有4种：折叠展开、弹窗、抽屉、页面承载，当详情页信息量少时使用折叠展开、弹窗的方式，当详情页信息量大时，则用抽屉、页面承载。
（1）折叠展开
（2）弹窗
（3）抽屉
（4）页面承载
2.2 数据过滤
2.2.1 搜索
1、模糊搜索
优点：只要有相关的内容都会搜索出来，减少精准搜索带来的记忆负担。
缺点：容易把不相关的信息也带出来，列入搜索身份证号时，可能把手机号也匹配出来。
2、精准搜索
优点：搜索匹配精准度高。
缺点：每次只能对单一条件进行搜索。
2.2.2 筛选
1、下拉筛选
优点：空间利用率高，起到了很好的收纳作用。
缺点：无法直观看到所有筛选项。
2、平铺筛选
优点：操作效率高，筛选项一目了然。支持输入更多筛选条件。
缺点：空间利用率低，不适合选项太多的情况。
2.2.3 标签页
一般和时间、状态的流转有关，像工资单从上传到发放，状态多达十几种，我们可以把需要用户操作的关键状态拿出来。
2.4 数据操作
数据操作，从控制范围的角度可以分为：单行操作、批量操作、全局操作；从操作属性的角度可分为：新增数据、编辑数据、删除数据、业务处理。
举个简单的例子：某个项目下的员工名单管理。
业务诉求：
1、支持为项目导入员工
2、管理员需要审核通过/驳回加入项目的员工
3、支持编辑非离职状态的员工信息
4、通过审核的员工可以从项目中离职
这样排列出来，我们很容易发现不同状态下的员工对应的操作项各不相同，当列表员工状态不统一时，首先视觉上不美观，其次该产品服务的是人力资源劳动密集型行业，在实际业务场景中，成百上千的员工会在同一时段加入某一项目，管理员不可能对每个员工进行逐一审核。
所以，在处理数据操作时，可以按照以下3个步骤来优化表格：
1、判断控制范围
2、判断放置位置
3、优化信息层级
