在SaaS系統(tǒng)中们妥，統(tǒng)計(jì)模塊是非常重要的一個(gè)功能猜扮。對(duì)于C端產(chǎn)品，可能會(huì)展示用戶個(gè)人使用數(shù)據(jù)监婶，比如Keep中的鍛煉時(shí)長統(tǒng)計(jì)旅赢。雖然這些數(shù)據(jù)只是供用戶了解自己的使用情況，并非必需惑惶。然而煮盼，在B端的SaaS系統(tǒng)中，由于用戶眾多且業(yè)務(wù)復(fù)雜集惋，公司管理層需要查看全公司數(shù)據(jù)和員工績效情況孕似。因此，SaaS系統(tǒng)必須具備獨(dú)立的統(tǒng)計(jì)模塊刮刑，以方便管理人員查看系統(tǒng)數(shù)據(jù)喉祭。

那么作為產(chǎn)品經(jīng)理，又該如何對(duì)統(tǒng)計(jì)模塊進(jìn)行設(shè)計(jì)呢雷绢？怎么設(shè)計(jì)才會(huì)更加方便有效呢泛烙？接下來我就介紹一個(gè)設(shè)計(jì)統(tǒng)計(jì)模塊的必備神器---柵格容器。

1翘紊、概念

什么是柵格容器呢蔽氨？柵格都知道就一個(gè)一個(gè)小方塊，柵格容器就是將容器進(jìn)行縱向分割帆疟，支持將頁面區(qū)域劃分成多列鹉究，每個(gè)列單元格又成為一個(gè)獨(dú)立的基礎(chǔ)容器，可容納任意組件踪宠。柵格容器一般用于頁面的統(tǒng)計(jì)塊展示自赔，無需自己手動(dòng)調(diào)整間距，即可實(shí)現(xiàn)頁面統(tǒng)計(jì)塊的平均分布柳琢。如下圖柵格容器的默認(rèn)樣式：

2绍妨、樣式配置

柵格容器的樣式配置跟之前介紹的彈性容器&布局容器樣式配置是一樣的润脸，這里不做過多贅述。

3他去、屬性配置

屬性配置包括組件名稱毙驯、分欄間隔、分欄欄數(shù)和分欄占比灾测。

組件名稱：給柵格容器命名爆价，便于后續(xù)問題查證和交互編排。

分欄間隔：列單元格之間的默認(rèn)間距為零行施，因此需根據(jù)實(shí)際需求調(diào)整列單元格之間的間距允坚，我這里設(shè)置的是10。

分欄欄數(shù)：柵格容器默認(rèn)欄數(shù)是2蛾号，可以根據(jù)實(shí)際需求選擇相應(yīng)的欄數(shù)稠项。我將原來的2改成4，布局樣式如下：

分欄占比：對(duì)每個(gè)列單元格設(shè)置相應(yīng)的占比值其實(shí)就是列單元格的寬度鲜结。

通過圖例發(fā)現(xiàn)展运，無論劃分成多少欄，默認(rèn)情況下占比欄的總和是24精刷。調(diào)整其中某一個(gè)列單元格的占比值拗胜，右側(cè)會(huì)留出相應(yīng)的空白。

我覺得這個(gè)柵格容器好方便啊怒允，可以一鍵調(diào)整間距埂软，也可以對(duì)單獨(dú)的列單元格進(jìn)行個(gè)性化設(shè)置，具有一定的靈活性纫事。

4勘畔、頁面應(yīng)用

真的很佩服他們針對(duì)頁面不同的需求設(shè)置的相應(yīng)的容器，就像這個(gè)柵格容器我覺得就是制作統(tǒng)計(jì)卡片一個(gè)很好的例子丽惶§牌撸框架列好，直接在里邊填充相應(yīng)的統(tǒng)計(jì)數(shù)字钾唬，讓整個(gè)統(tǒng)計(jì)卡片的布局更加美觀整潔万哪。

在發(fā)現(xiàn)柵格容器之前，我都是用彈性容器做成的統(tǒng)計(jì)塊抡秆，我仿照模版中心某個(gè)系統(tǒng)頁面奕巍，如下圖，就是利用彈性容器拼接成的儒士，拼接出來的效果是這樣的：

接下來我就針對(duì)統(tǒng)計(jì)模塊這一部分的設(shè)計(jì)的止，將其換成柵格容器來替代，試試效果如何乍桂。

（1）框架設(shè)計(jì)

我把上述頁面的原有的統(tǒng)計(jì)塊設(shè)計(jì)刪掉冲杀，放置柵格容器，自定義樣式height:calc(15% -10px);將分欄欄數(shù)設(shè)置為3睹酌，分欄間隔為20权谁，這樣簡潔的統(tǒng)計(jì)塊框架設(shè)計(jì)已經(jīng)完成。

（2）內(nèi)容填充

在插槽容器放置一個(gè)彈性容器憋沿，高度和寬度是插槽容器的寬度和高度旺芽，橫向?qū)R和縱向?qū)R分別設(shè)置為居中對(duì)齊。在該彈性容器放置兩個(gè)彈性容器辐啄，一個(gè)彈性容器用來放置圖標(biāo)采章，一個(gè)彈性容器用來填充文字和統(tǒng)計(jì)數(shù)值。放置圖片的彈性容器高度和寬度分別設(shè)置為85px壶辜，如圖所示：

填充文字和統(tǒng)計(jì)數(shù)值的彈性容器寬度設(shè)置為50%悯舟，高度是父級(jí)容器的高度，外間距設(shè)置為30砸民，并將橫向?qū)R和縱向?qū)R設(shè)置為居中對(duì)齊抵怎，自動(dòng)換行設(shè)置為是，多行排列設(shè)置為居中排列岭参。放置兩個(gè)文字組件反惕，分別填充文字和數(shù)值。填充文字的文字組件外間距的上側(cè)數(shù)值設(shè)置為5演侯，并在屬性配置中填寫相應(yīng)的文字內(nèi)容姿染，第二個(gè)文字組件外間距的上側(cè)數(shù)值設(shè)置為10，數(shù)值內(nèi)容是“32654”秒际。如下圖所示：

接下來就簡單了悬赏，我將做好的統(tǒng)計(jì)塊內(nèi)容分別復(fù)制到第二個(gè)和第三個(gè)插槽容器中，并將修改對(duì)應(yīng)的圖表程癌、文字和數(shù)值舷嗡，預(yù)覽效果如下圖所示：

以上就是利用柵格容器做出來的統(tǒng)計(jì)模塊，真心覺得好用嵌莉，而且比之前用彈性容器拼湊出來的統(tǒng)計(jì)模塊更加方便快捷进萄。