这是《后台产品设计指南》系列文章的第8篇内容，更多精彩可以点击下方链接查看。
栅格系统的定义
栅格系统是用网格阵列来指导规范界面布局以及信息分布的技术，适用于pc端和移动端。栅格能帮助设计师快速地进行排版布局，让页面更有层次感，更合理；帮助开发实现响应式布局，适配更多的设备，提高效率。
栅格的组成
栅格系统包括以下几个要素：栏、水槽、边距，这几个要素加在一起就是页面的宽度。
来自网络
栏
pc端栏一般定为12列或者24列，移动端一般定位6列、8列或者12列。栏数越多，可以组合的类型就越多，比如下图中的例子。
来自网络
水槽
水槽是相邻栏之间的间距，可以让页面元素层级更明显，不会显得拥挤。
边距
边距是页面两侧的留白，合理的边距会让页面显得更精致，自然。
网格原子宽度
后台栅格的网格原子宽度一般选择8作为原子宽度。这是因为主流设备的分辨率基本都可以被8整除；而且8在视觉上处于中间的位置，相比4、6、10、12这些更容易被感知。
来自网络
GridGuide
这个在线的工具可以帮助我们快速生成栅格方案。用户设置最大宽度、列数以及留白边界就可生成栅格方案了。
其中留白边界是以倍率为单位，分别为0，0.5，1.0，1.5，2.0的倍率，表示页面左右的页面留白，这个留白等于水槽宽度*倍率。下面的截图是1240px下的栅格方案。
这个时候页面宽度=栏宽*栏数+（栏数-1）*水槽宽。上图中的第一张方案代入就是96*12+11*8=1240px
这个时候页面宽度=栏宽*栏数+水槽宽*（栏数-1）+水槽宽*倍率*2。上图中的第一张方案代入就是101*12+2*11+2*1.5*2=1240px
栅格系统的应用
响应式是指一个网站能够兼容多个终端，而不是为每个终端做一个特定的版本。后台使用响应式是为了充分利用屏幕空间，提高使用效率。
这个概念容易和自适应混淆，自适应是为不同的屏幕分辨率定义布局，单独定制。前者是在不同设备上展示相同的内容，布局可能不一样，但代码是同一套；后者显示的内容可能是不一样的，需要多套代码来实现。需要说明的是，响应式也是有局限性的，不适合在页面内容复杂交互多的页面上上使用。
栅格系统的页面布局有明显的规律性、元素宽高可用百分比表示，可以实现多种页面排版，这个特点与响应式布局非常契合。所以在后台系统中可以考虑引用响应式设计，当然这个不是必须的，因为实现这个设计方案是需要一定的成本的。下面的两张截图能直观地说明后台产品中结合栅格系统的响应式布局应用。
栅格系统在使用时不能生搬硬套，一定要活学活用。产品经理虽然没有直接使用的场景，但了解这个工作的原理和使用范围也是很有必要的。
在写作过程中，如果有意见或者想法，欢迎有兴趣的读者添加我的微信一起交流探索，共同进步。
网友评论