表格展现
表头
- 字段精简：专业术语使用小问号，悬浮查看tooltip的详细信息
- 有数据的单位放到表头
行高
B端产品大多需要紧密的信息排列，这样可以显示更多的信息，方便对比，提升工作效率，如果难以做到不同分辨率不同行高的情况下，不如只使用较密的模式，将行高设定的较小。
文字行高可以设定为字号的1.2~1.8倍,文字与分割线间距离可以设定为字号的1~1.5倍
| 文字行高 | 间距 | 表格行高（最紧凑） | ||||
|---|---|---|---|---|---|---|
| 字号 | 1.2倍 | 1.5倍 | 1.8倍 | 1倍 | 1.5倍 | 1.2行高*1倍间距 |
| 13 | 15 | 19 | 23 | 13 | 19 | 41 |
| 14 | 17 | 21 | 25 | 14 | 17 | 45 |
这样行高太高了，相对于b端业务需求来说，需要比较紧凑的行高，比如sap的行高为24，并且公司客户很多是1024的电脑分辨率，需要很小的行高。
这样的话，反推一下，如果需要紧凑的行高，对应的的文字字号、行高和间距是多少如下表
| 字号 | 文字行高 | 间距 | 表格行高 | |
|---|---|---|---|---|
| 13 | 22 | 1 | 24 | 不建议 |
| 14 | 22 | 2 | 26 | 不建议 |
| 14 | 22 | 3 | 28 | 建议的最小行高 |
| 14 | 22 | 4 | 32 |
提供多种不同表格行高，则建议26、28、32
列宽
规则1:相对列少：列的默认宽度和小于内容区域宽度，则各列自动等比拉伸，撑满屏幕
规则2:相对列多：列的默认宽度和大于内容区域宽度，各列默认宽度，出横向滚动条。
但是规则1的问题是：如果列特别少，比如2列或者3列，列与列之间会分的特别开。
所以建议还是不论什么情况，都默认宽度，靠左，超出屏幕则使用横向滚动条。
内容溢出
单元格内内容过多时，可以使用…省略过长的内容，鼠标悬浮至文字上，显示tooltip展示全部内容，如果该行内容非常非常长，则建议在编辑页或详情页展示。
图片来自智慧商贸
内容固定
当页面出现滚动条的时候
向下滚动，建议固定表格表头
向右滚动，建议固定操作栏/序号栏/多选框/关键字段
单元格内容
列显示与列排序
用户调整列显示/列排序后，根据账号保存相关的设置
图片来自智慧商贸
内容排序
文本的对齐
| 对齐方式 | |
|---|---|
| 普通文本 | 左对齐 |
| 数据相关（金额/数据/百分比/小数点） | 右对齐，使用helvetica字体，方便对比 |
没有内容的区域使用“-”
分割线
横向/纵向分割线
- 横向分割线：一般要有
- 纵向分割线：
按钮的位置
行内按钮（单项操作）
按钮过多的处理方式
| 优势 | 劣势 | |
|---|---|---|
| 替换成icon，悬浮显示tooltip | 节省空间 | 表意不明确 |
| 文本按钮，使用频率较小的收到下拉菜单中 | 表意明确 | 1. 所有被收起的菜单交互路径延长，需要点击两次 2. 不能直观查看有什么操作按钮（只隐藏次要操作） |
| ID、名称等唯一性标识的内容加上超链接 | 节省空间，点击直接查看详情、修改 | 不能兼容其他操作 |
放在左侧还是右侧？
| 优势 | 劣势 | |
|---|---|---|
| 左侧 | 列数较多时左侧固定，右侧查看内容 | |
| 右侧 | 查看列内容后顺着阅读视线可以直接进行操作，整体表格左右重量较平衡 |
行内按钮的对齐方式
根据不同的状态，表格行可以做不同的操作时，建议同类操作垂直对齐，而不要把仅有的操作全部做对齐（这样非常混乱，找不到需要操作的内容）
如果某个操作不存在，可以使用置灰的“-”占位，或者将该操作按钮置灰，保持页面对齐。
行外按钮（批量/单项操作）
放在左上、右上还是左下？
| 优势 | 劣势 | |
|---|---|---|
| 左上 | 主要操作在阅读视线起始点，更容易马上了解页面主要操作位置 | 加上标题页面容易一边重一边轻 |
| 右上 | 页面相对来说方正，标题可以放在左上角 | 操作跨度较大，批量操作需要左侧勾选，右侧进行操作 |
| 左下 | 勾选后顺视线向下直接操作 | 不容易找到 |
如果是在多选场景较为多时,应首要注意多选时的操作优化,可牺牲单条数据所需要应对的操作，行内的单项操作按钮在批量操作较多的情况下可以去掉。
视觉降噪
页面内的主要内容的颜色不要超过两种。颜色过多会显得页面杂乱抓不到重点。
（状态标签一般使用较轻的颜色底色，不会占据主要视觉中心，但也仍然注意不要过多颜色）
表格种类
树形表格
树形表格与复选框
图片来自CE青年
复选框在前：适用于只能选中组及子集合的部分，例如，组为技术部，子集合为张三、李四。
复选框在后：适用于组和子集合可以分别选中的部分，例如，组为个人-组长张三，子集合为组员李四、王五。
子表格
b端不常用，不建议用
展开查看子类信息
直联表&交叉表
行的复合和列的复合，交叉表要注意如何导出，会影响后台逻辑，需要注意
表格操作
编辑
- 单元格编辑：某个单元格的快速编辑，修改体量较小的内容可以直接使用气泡框/浮层
- 行内编辑：行内显示输入框快速编辑，适用于没有横向滚动条的表格页面，编辑时可以查看上下文。
- 覆盖层编辑：弹窗、抽屉、页面整体覆盖，提供明确的编辑空间。页面上下文不重要，可以使用该种方式
- 全局表格编辑：所有内容都需要编辑，则建议使用全局表格，右上角角标，双击编辑
删除
如果删除是低频功能，可以使用行外按钮，即点击多选框勾选，再点击顶部删除按钮。
筛选
条件筛选
表头筛选
模糊搜索
模糊查询匹配所有内容
标签+模糊搜索
优势：筛选内容准确性高
劣势：只能对单一条件进行筛选
tab形式
根据不同的状态进行分类，比如待审核、已审核等
带标签多项筛选
点击标签后，输入内容，意为在该标签内筛选。
数据细分
可以根据不同数据维度进行查看
可参考adwords
全屏查阅
让表格全屏进行操作，可以减少与表格无关的干扰
分页
固定分页，当表格数据过多时，可以把分页固定在底部，避免用户翻到底部才能翻页。
当只有一页或者无数据时，去掉分页。
参考文章
若有收获，就点个赞吧
0 人点赞
