典型表格设计之数据查看（上篇）

平时工作中都会记录一些遇到的疑难问题并进行摸索，现在想把遇到的问题总结下来，当做一次沉淀，也希望对于同行同学有些帮助。（因篇幅较长，本文针对“数据查看”进行探讨，“数据过滤”以及“数据操作”将放入下篇文章，等待出炉~）

什么是表格？

表格页是公认为展示数据最为清晰和高效的形式，它的信息密度极高，就像是一个家庭衣柜，里面很多抽屉，我们需要把衣物整洁摆放收纳，提高空间利用率。

表格页由三个部分，如下图所示：

一、数据查看

数据查看可通过四个维度去自检设计是否合理，分别为信息降噪、呼吸适中、高效易读、详情查看。

1、信息降噪-内容

通过对表头内容的删减，我们一眼就可以看到表格的重要信息，从而帮助用户能快速进行数据决策。因此，列数控制在7+-2，列表表头展示更为关注的数据，更多信息在详情中展示。

如果不同用户想看到的信息侧重不同，我们还可以做自定义设置项，让用户自己去选择想要看到的表格内容。

用最少字数给表头做精简，精简到少一字不可。

另外，当遇到少一字都不可的长标题，我们可以定义专有名词，并且给一个解释专有名词的icon，便于第一次使用的用户易于理解。

2、 信息降噪-视觉

去掉不必要的分割线和斑马纹，用对齐和间距来区分列和行，可以鼠标滑上去给斑马纹，增强交互体验。

分割线的样式尽量轻盈，不要抢视觉，突出内容。

去掉不必要的装饰和颜色，为了防止视觉负担，少用面性图标，使用颜色保持克制，删除如果不是点击即可删除，可以不用预警色。

不要出现衬线字体，比如宋体，保持字体统一。

3、 呼吸适中-单元格

定义单元格高度。字号、行高、上下间距进行规范，这里有一个比较常见的规范，将字号设为N，那文字行高就是

1.5N，上下间距为1.2N，单元格高度=内容高度+上间距+下间距。

4、 呼吸适中-列宽

我们将首列和尾列定义为N1，列与列之间定义为N2，随着页面收缩和拉伸，N1保持不变，N2自适应变宽变窄，这样页面会看起来会更均衡，这样会显得有呼吸感。一般定义一个最小值，当表格宽度大于页面宽度时候，固定首尾列，左右滑动。

5、 高效易读-对齐方式

标题和内容一般采用左对齐，更高效的浏览顺序，有长短不一的数字时，右对齐方便比较。操作项一般放在尾列右对齐。

6、高效易读-不做无意义留白

当数据为零时就写上“零”，当没有数据时候就写上“-”。比如开发取不到的后台数据，我们就可以给“-”作为显示，如果得到的数据就是零，我们也要让它显示出来。

7、高效易读-选择合适的翻页器

选择合适的翻页器，利用分页可以缓解服务器的加载压力。无限浏览如果数据过多很容易使页面崩掉，使用功能较为强大的翻页器，每一页默认10行以上，减少翻页次数，增强用户体验，给出默认行数后，可以让用户自定义每页行数，相比跨屏翻页，向下滑动更便利。

8、高效易读-收起低频操作项

超过四项操作项收起来，可以用图标指引下一步操作。关于哪些可以操作项可以折叠起来，可以与产品经理沟通收起低频链接，或者埋点一个月时间查看点击量也可以做出决策。

9、高效易读-默认行数

当单元格内容长度不固定的时候，定义好内容的宽度和行数以及字数，超出显示的字数可以用省略号代替。

10、高效易读-行的排序

默认最近创建的在表格中第一行显示，使用户感知最新情况。也可以带排序的表头，让用户自定义排序。

11、详情查看-入口

入口可以在操作里加详情，也可以把发起人做成可以点击样式，跳转详情，并且可以避免视觉干扰，也就是降噪，当鼠标Hover上去时候，发起人才显示出跳转色，提示可点击状态。

12、详情查看-交互方式

第一种是用弹窗的形式。第二种是第一种的延伸，当内容过多时候可以考虑抽屉样式。这些交互的共同有点就是没有脱离原页面。当详情内容较多且需要编辑时候，我们就考虑跳新页面，使用新页面进行承载。(这里有个细节，新开tab页可以打开多个详情页，如果覆盖原页面则只能打开一个详情页，并且不能同时查看原页面和详情页。所以我们要根据具体场景、业务需求去设计)

后记

上述内容百分之八十是实践中遇到过，B端设计背后更推崇实践场景的运用，不只是是美观好看，不同场景它的设计思路就会有所不同，规范只是相对的，在你没有思路时候可以参考作为一个标准。

欢迎留言纠正，感谢阅读~