数据可视化-栅格篇

项目背景

此次的可视化项目是建立在鲸准-资管系统的数据基础上，主要是对原始数据进行分类并用图表的方式进行可视化展示和分析。

 

设计目标

不同客户的电脑终端存在差异化，显示器适配问题就需要着重考虑。栅格系统刚好解决了显示器适配和页面排版布局问题。

 

布局说明

确定画板尺寸

据统计，用户的主流分辨率主要为 1920、1440 和 1366，个别用户还存在 1280 的显示设备。1440处于中间的位置，为了适配方便，我们以1400的尺寸为基础。

 

布局选择

网页的布局多种多样，系统布局常见的一种做法是将左边的导航栏固定，对右边的工作区域进行动态缩放。

关于栅格

栅格系统是指，将页面布局划分为等宽的列，然后通过列数的定义来模块化页面布局。这是设计的一个基本原则，在CSS的Bootstrap中采用栅格系统能够更好的进行页面布局。栅格主要由列和水槽组成。

栅格系统最小单位

在UI设计栅格系统中的最小单位就是设计界面的单位基础，界面内的设计元素和排版都是依照这个基础单位建立和布局的。确定网格的基数为10，不仅符合偶数的思路同时能够匹配多数主流的显示设备。

列

列是栅格系统纵向排布依据，常用的PC端是12列，24列。列数越多纵向排版内容就可以越细致，但是版面内容就会变的更稠密，内容更碎。12等分的栅格系统在流行的前端开发开源工具库Bootstrap与Foundation中广泛使用，适用于业务信息分组较少，单个盒子内信息体积较大的中后台页面设计。此次选择12列的布局方式。

水槽

水槽就是列和列的分割间距，水槽越大页面布局间距就越大，水槽越小页面就越紧凑。水槽的宽度按照10的倍数去设定，根据实际情况，我把水槽的宽度定为20PX。需要强调的是，水槽里不能放置内容。

注意点

内容要在列宽内，不能放在水槽中，不然会影响栅格化的效果。

屏幕安全边距

边距就是栅格之外的屏幕边缘内容，就是指两边的留白区域；这里是不能放置内容的。

栅格演示图

我们为页面中栅格的 Gutter 设定了定值，即浏览器在一定范围扩大或缩小，栅格的 Column 宽度会随之扩大或缩小，但 Gutter 的宽度值固定不变。

栅格化计算

Sketch自带栅格系统设定路径：View-Layout Settings.

（汉化版：工具栏里面显示-布局设置）

栅格化的应用

确定模块比例

以12栅格系统为例，可以被2，3，4，6等分；不等分的情况下可以按照比例划分为1：2、1：3、1：2：1、1：4：1等情况。实际选择哪种，还需要根据实际情况来决定。

基本模块布局

根据产品提供的原型对页面进行栅格设置，建立好栅格系统后，就可以将之前设定好的内容填进去了。此次项目的数据可视化遵循灵活配置的需求，在仪表盘中建立各种样式的数据模块。每种数据模块的长宽都是相同，不会存在大小不一样的情况。

模块拆分

模块按照卡片的形式展示，划分为图表标题区，图表容器区，间隔区。其中图表标题区中又包含icon区；图表容器区细划分为图例区、筛选条件区、图表区以及拖动条区。用户根据实际数据搭配这几块区域是否需要在模块中展示。

真实数据填充

填充真实数据，验证栅格化的实际效果。

栅格在不同布局中的运用

 

固定网格

在浏览器范围扩大或缩小时，屏幕安全边距扩大或缩小。列宽和水槽宽度保持不变。

在一些传统门户网站中使用的频率比较多，这些网站的web端和移动是分开做的（有的没有移动端）

流动网格

在浏览器范围扩大或缩小时，列宽会随之扩大或缩小。水槽，屏幕安全边距宽度保持不变。

例如，将在桌面计算机、平板电脑和移动电话上查看您的网站。可使用流动网格布局为其中每种设备指定布局。根据在桌面计算机、平板电脑还是手机上显示网站，将使用相应的布局显示网站。

混合网格

1、左侧导航固定：在实际设计当中，还会出现固定网格和混合网格同时存在的情况。鲸准-BI 就是用的这种混合网格。左侧为固定的导航栏，右侧为灵活的栅格部分。即在浏览器范围扩大或缩小时，左侧宽度不会变化，右侧宽度跟随变化。

2、抽屉导航：左侧导航出现的时候，右侧的栅格不会受其影响。

3、悬浮导航：悬浮导航出现时，其他区域不会受其影响。

还有响应式布局、自适应布局、弹性布局，在这就不一一介绍了。给大家一个链接，这里面有5种布局方式的详细介绍。

https://www.cnblogs.com/mm152534/p/9429939.html

参考网站：https://material.io

 

总结

这次的栅格总结，主要是针对工作中遇到的情况，我查看了许多资料，从中选了适合自己的一些方法。所以，我总结的不可能面面俱到，可能对某些人有用，也许作用不大。第一次写总结，希望大家喜欢。