浮木云随笔小记（8）---模块设计统计

在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”。如下图所示：

接下来就简单了，我将做好的统计块内容分别复制到第二个和第三个插槽容器中，并将修改对应的图表、文字和数值，预览效果如下图所示：

以上就是利用栅格容器做出来的统计模块，真心觉得好用，而且比之前用弹性容器拼凑出来的统计模块更加方便快捷。