在 SaaS 零碎中，统计模块是十分重要的一个性能。对于 C 端产品，可能会展现用户集体应用数据，比方 Keep 中的锤炼时长统计。尽管这些数据只是供用户理解本人的应用状况，并非必须。然而，在 B 端的 SaaS 零碎中，因为用户泛滥且业务简单，公司管理层须要查看全公司数据和员工绩效状况。因而，SaaS 零碎必须具备独立的统计模块，以不便管理人员查看零碎数据。那么作为产品经理，又该如何对统计模块进行设计呢？怎么设计才会更加不便无效呢？接下来我就介绍一个设计统计模块的必备神器 — 栅格容器。1、概念什么是栅格容器呢？栅格都晓得就一个一个小方块，栅格容器就是将容器进行纵向宰割，反对将页面区域划分成多列，每个列单元格又成为一个独立的根底容器，可包容任意组件。栅格容器个别用于页面的统计块展现，无需本人手动调整间距，即可实现页面统计块的均匀散布。如下图栅格容器的默认款式：
2、款式配置栅格容器的款式配置跟之前介绍的弹性容器 & 布局容器款式配置是一样的，这里不做过多赘述。3、属性配置属性配置包含组件名称、分栏距离、分栏栏数和分栏占比。组件名称：给栅格容器命名，便于后续问题查证和交互编排。分栏距离：列单元格之间的默认间距为零，因而需依据理论需要调整列单元格之间的间距，我这里设置的是 10。
分栏栏数：栅格容器默认栏数是 2，能够依据理论需要抉择相应的栏数。我将原来的 2 改成 4，布局款式如下：
分栏占比：对每个列单元格设置相应的占比值其实就是列单元格的宽度。通过图例发现，无论划分成多少栏，默认状况下占比栏的总和是 24。调整其中某一个列单元格的占比值，右侧会留出相应的空白。
我感觉这个栅格容器好不便啊，能够一键调整间距，也能够对独自的列单元格进行个性化设置，具备肯定的灵活性。4、页面利用真的很拜服他们针对页面不同的需要设置的相应的容器，就像这个栅格容器我感觉就是制作统计卡片一个很好的例子。框架列好，间接在里边填充相应的统计数字，让整个统计卡片的布局更加好看整洁。在发现栅格容器之前，我都是用弹性容器做成的统计块，我仿照模版核心某个零碎页面，如下图，就是利用弹性容器拼接成的，拼接进去的成果是这样的：
接下来我就针对统计模块这一部分的设计，将其换成栅格容器来代替，试试成果如何。（1）框架设计我把上述页面的原有的统计块设计删掉，搁置栅格容器，自定义款式 height:calc(15% -10px); 将分栏栏数设置为 3，分栏距离为 20，这样简洁的统计块框架设计曾经实现。
（2）内容填充在插槽容器搁置一个弹性容器，高度和宽度是插槽容器的宽度和高度，横向对齐和纵向对齐别离设置为居中对齐。在该弹性容器搁置两个弹性容器，一个弹性容器用来搁置图标，一个弹性容器用来填充文字和统计数值。搁置图片的弹性容器高度和宽度别离设置为 85px，如图所示：
填充文字和统计数值的弹性容器宽度设置为 50%，高度是父级容器的高度，外间距设置为 30，并将横向对齐和纵向对齐设置为居中对齐，主动换行设置为是，多行排列设置为居中排列。搁置两个文字组件，别离填充文字和数值。填充文字的文字组件外间距的上侧数值设置为 5，并在属性配置中填写相应的文字内容，第二个文字组件外间距的上侧数值设置为 10，数值内容是“32654”。如下图所示：
接下来就简略了，我将做好的统计块内容别离复制到第二个和第三个插槽容器中，并将批改对应的图表、文字和数值，预览成果如下图所示：
以上就是利用栅格容器做进去的统计模块，真心感觉好用，而且比之前用弹性容器拼凑进去的统计模块更加方便快捷。