B端典型页设计「表格页」

做To B的同行都知道，降本增效一直是企业中后台绕不开的热点话题，现任公司业务涵盖仓（WMS）、运（TMS）、配、人（HRM），所做项目虽功能各异，但是有一个共同点-大量使用表格。本文受有赞设计师@美芳的指导，将我日常工作通过优化表格来提效的思路整理成文章，对企业后台的数据表格作一个简单的阶段性总结。

信息降噪：内容

列数控制在7±2，列举用户更为关注的数据，更多信息在详情中展示（用户高频使用的列前移）

如果不同用户想看到的信息侧重不同，还可以让用户自定义列的展示

更精简的表述：少一字不可

更精简的表述：比较复杂的表头，可以自定义一个专有名词，鼠标hover给解释说明  

信息降噪：视觉

去掉不必要的分割线和斑马纹，用对齐和间距来区分列和行

斑马纹：鼠标hover上去给斑马纹状态

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

去掉不必要的装饰和颜色（不要出现衬线字体）

信息降噪：呼吸适中

单元格的高度怎么定义

列的间距，n1保持不变，n2自适应变化，一般定义一个最小值。表格宽度大于页面宽度时候，固定首位列，左右滑动

信息降噪：高效易读

列的对齐方式：

标题的内容：一般采用左对齐，更高效的阅读浏览顺序

有长短不一的数字时：右对齐，方便比较

操作项一般放在尾列：右对齐

不留空白格：没有数量用“0”。没有该项内容用“—”

选择合适的翻页器：利用分页可以缓解服务器的家在压力

每一页的默认行数：10行以上，减少翻页的次数

给出的默认行的数量后，也可以让用户自定义每页的行的数量，相比跨屏翻页，向下滚动会更便利

收起低频操作项

当单元格内容长度不固定的时候，定义好内容的宽度和行数

行的排序：

默认最近创建的在最上面

可以用带排序的表头，让用户自定义顺序

查看详情

1入口：

可以在操作里加“详情”

也可以把名称做成可点击样式，跳转详情

2交互方式：

可以直接在表格里展示（展开可以是详情，也可以是二级表格）

可以用弹窗的形式

可以用抽屉的形式

可以用页面承载：适合详情页内容较多，切需要编辑的情况（新开tab）

1模糊搜索：

优点：只要有相关的内容都会搜索出来，减少了精准搜索带来的记忆负担

缺点：容易吧不相关的信息也带出来，例如搜索手机号，把相关编码也匹配了出来

2带标签的搜索：

优点：搜索匹配精准度高

缺点：每次只能对单一条件进行搜索

信息排序：

1用户目标优先于业务逻辑

2默认折叠低频筛选项

依据一：数据埋点

依据二：用户调研得到的用户使用场景

3所有筛选项都很低频：作为高级操作，用弹窗承载

一般和时间、状态的流转有关

最后再次感谢 有赞设计师@美芳 在CCtalk的分享，我们是一群本着提升B端体验汇聚在一起的团队，欢迎关注公众号【且曼B端产品设计】交流探讨。

本文由 誉璇Anne 原创,未经许可，禁止转载。

参考文献：

《CCtalk B端产品设计课》by 美芳