本文受有赞设计师@美芳的指导，将我日常工作通过统一设计规范来提效的思路整理成文章。

数据展示有哪些？

01.徽标

是收纳消息数量的样式，一般出现在图标或者头像右上角。

02.标签

数据展示里面抽取出来的共性特征，将它们转化为标签。标签样式有线框、带不透明底或者面性。

03.走马灯

相当于c端的轮播图

04.文字提示

可以出现在鼠标悬浮按钮时候的行为解释说明，也可以是文案或者导航图标的解释说明。鼠标移入时候出现移出时候消失。

05.气泡卡片

比起文字提示可以承载更多内容，相对弹窗，气泡卡片操作更轻盈。

06.标签页/选项卡

标签页可以帮助用户在一个页面内快速切换不同类型内容，提升单个页面整体的扩展性。标签本质上就是内容区的导航。

07.折叠面板

折叠面板可以更好的收纳内容区域，提高页面利用率。可以和表格结合使用，折叠表格部分详情内容，使得纵向空间更节约。

08.表格

表格是数据展示的重要内容。当有大量结构化数据需要展示时或者需要对数据进行排序、搜索分页时可以用表格进行展现。

当笔记本过小，表格展示不全时候，可以固定首尾重要信息进行滚动。

带排序的表头，可对数量或者金额进行排序。

带分组的表格，建议带边框并且用色块区分表头和内容。

单元格可编辑

批量选中时只会选中当前页，因为分页还没加载出来，为了给用户正确的引导，可以给上提示性文案，例如“已选中XX项内容”。

如果当前页批量选中的数据量不满足要求，可以改变分页器，增加当前页数据量，从而增加选项。

因为之前发布过一篇表格类文章，讲述数据过滤，数据操作和数据查看，这里就不再重复。

以上是对设计规范中的数据展示进行的详细讲解，再次翻开一些文章结合当前设计体验工作，会对一些场景页面有新的想法，会陆续进行文章编写以及工作复盘，提高自己的认知水平。

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

参考文献：

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

Powered by Froala Editor