浅谈B端表格设计中的一点“小心机”

toB设计师们很容易觉得表格直接套用ant.d组件就好，没有设计空间。因此，产品和开发也容易理所当然觉得表格不需要设计。然而，后台系统使用表格来展示数据信息的地方太多了，冷冰冰的数据看似“实用”却并不“好看”。设计师主动放弃表格话语权，也一定程度上主动选择压缩自己的生存空间。所以，设计师必须掌握主动权，必须要有“作为”。

信息太多，用户也烦鼠标滚动！

我们公司业务很多客户都是银行用户，银行员工显示屏可能还是以前的那种方盒子，屏幕太小，产品随随便展示的数据可能就有7、8列，再加上操作栏，一行数据就要撑很宽了。看一行数据，就要左右滚动，用户体验实在差（事实上，左右滚动条远远没有鼠标滚轮好使）。这时候就需要设计师来帮忙梳理产品数据信息。

是不是可以做信息堆叠？将同一组信息梳理出来，比如“审批人/审批时间/审批备注”，都是审批相关信息，我们完全可以将这一组信息堆叠在一列，既可以节省空间，也能更友好展示组信息。

是不是可以在顶部加上让客户主动选择展示字段的功能？很多时候产品也在闷头做产品，会把能展示的信息都放出来，用户真的需要这么多信息吗，可不可选择自己想看的数据？我们可以在顶部加上“选择展示数据”，在面对信息庞杂的表格时，给用户一定的选择权。

是不是可以标签化信息并与别的字段合并？平铺信息，用户很容易疲劳，重点信息需要在一片文字迷宫里定位。如果采用有色标签将类型或状态区分开，用户通过颜色快速识别信息，增强信息可读性，还不必独占一列。当然，这里的信息“标签化”的前提是信息长度必须可控，过长的标签就大可不必这么设计。

是不是可以全屏表格？我们产品里经常会有弹框含表格的情况，表格上面还有其他的详情信息。受限于弹框宽度，表格展示不了太多列数据，我们可以增加全屏展示功能，最大程度给用户展示最多的信息。当然，前提是只能选择表格展示。

其实，toB 用户也喜欢好看的表格！

一堆数据像没有感情的杀手，杀死了用户看数据的热情。这时候，设计师们就要想办法让表格变得更有温度。

数据较少的表格，能不能让它丰满一些？占比可不可以用进度条或者圆环来装饰？这样既能让数据有了装饰，也能让用户一眼看到数据对比，而不是一堆冷冰冰的数字。

可不可以主动问产品/开发能不能拿到图片相关的信息加装饰？“用户名”对看数据的人来说，就只是蒙面的“张三”“李四”“王五”，我不可以拥有一个头像吗？甚至通过性别信息，也可以用性别图标来装饰用户名。总之，想办法，让用户觉得好看、易看。

当然，还有常见的斑马纹表格，虽然是简单设计，但容易出效果。

那些功能复杂的表格怎么设计？

后台系统经常会遇到表格嵌套设计，如嵌套表单、嵌套表格。针对业务信息复杂的数据，会将数据设置表单直接嵌套在表格里，方便用户实时修改并查看数据详细信息。嵌套表单设计，需要考虑选中数据条编辑状态与表单区域如何显得更协调，如何更好展示嵌套层级问题。表格嵌套表格设计，主要考虑子表格与父表格数据类型是否一致。一致的话，可共用表头；非一致，则子表格需要独立表头。当然，嵌套设计还有更多复杂业务场景，设计师们需要结合实际场景，梳理信息，给出合理的解决方案。

本次文章中列举的场景可能并不多，但已经涵盖了表格设计中很多通用场景及相对复杂的场景（也是我实际工作中遇到的）。当然，表格功能还有更多延展空间，大家可以参考各大厂组件库（ant.d、element、iview、teambition等等）。

最后，祭出大神整理的表格设计文章链接：

https://www.zcool.com.cn/article/ZMTE5MjY4MA==.html

https://www.zcool.com.cn/article/ZMTIwNDY1Ng==.html