浅析如何搭建栅格系统-后台管理系统设计经验沉淀系列

-来自百度百科

栅格系统英文为“grid systems”，也有人翻译为“网格系统”，运用固定的格子设计版面布局，其风格工整简洁，在二战后大受欢迎，已成为今日出版物设计的主流风格之一。

1692 年，新登基的法国国王路易十四感到法国的印刷水平不尽人意，因此命令成立一个管理印刷的皇家特别委员会。他们的首要任务是设计出科学的、合理的， 重视功能性的新字体。

委员会由数学家尼古拉斯加宗（Nicolas Jaugeon）担任领导，他们以罗马体为基础，采用方格为设计依据，每个字体方格分为 64 个基本方格单位，每个方格单位再分成 36 个小格，这样，一个印刷版面就有 2304 个小格组成。在这个严谨的几何网格网络中设计字体的形状、版面的编排、试验传达功能的效能，这是世界上最早对字体和版面进行科学实验的活动，也是栅格系统最早的雏形。

栅格是由栏目（Column）和水槽（Gutter）交替分布组合而成，栏目（Column）是容纳界面内容的容器，水槽（Gutter）用来调节两个栏目之间的间距。而栏目和水槽的宽度是以网格（Grid）作为基本单位来增加或减小，所以栅格系统第一步就需要确定原子单位网格（Grid）的大小。

根据市面上实践沉淀得出的经验，

具体原因如下：

选取 4、6、8、10、12 与当前主流电脑屏幕分辨率相除，结果如下图所示：

通过上图发现，4 是整除率最高的原子。但是 4 作为基本原子单位过小，太小的步进单位反而会增加决策成本。

在实际界面设计过程中，间距上按照 4 进行增减，效果并不明显，为调整到合适的间距将花费较多时间，降低工作效率。所以我们舍弃 4，选择整除率排第 2 的 8。以 8 像素作为一个步进单位的变化时，视觉上也能感受到较为明显的差异，因此最终选择 8 作为栅格系统中最小的原子单位。

  偶数原则在界面缩放中最大程度的避免类似“0.5、0.75、1.25”等小数点的出现，从而使页面各类元素在大多数场景下都能有比较精致的细节表现。遵循“偶数原则”可以最大程度上避免在开发过程中出现各种潜在问题。

确定好最小原子单位为 8 ，加上栅格是由栏目和水槽交替分布而形成，所以我们接下来要确定基于原子单位确定栏目和水槽在具体页面中各自的宽度。

通常情况下，水槽的宽度有较为固定的几个数值，而栏目的宽度则更加灵活，在遵循 8n 规律的情况下可以根据页面水平方向尺寸的改变而增减。

在建立栅格系统前，需确定我们要在什么分辨率下进行页面设计，也就是确定设计稿的尺寸。然后才能基于设计稿的尺寸建立栅格系统。

各自的特点如下：

2. 24 等分适用于业务信息量较大，信息分组较多，单个盒子内信息体积较小的中后台页面设计。相对于 12 栅格系统，24 栅格系统变化更加灵活，更适合内容较多的复杂场景。

在栅格系统里我们把容纳页面内容的容器称为“盒子”。我们需要根据业务内容，分配页面比例，确定盒子的宽度。以 24 栅格为例，一个 24 栅格系统可以根据业务需求被分成 2 等分、3 等分、4 等分、6 等分、8 等分、12 等分等。

  还可以根据比例进行不对称分割，比如 1:1:1、1:2:1、2:3:3、3:5、1:2 等

水槽宽度为 8n，以 8 为单位去增减 n 的值。为减少设计决策成本，会事先制定好一系列水槽宽度，然后根据实际场景选择合适的水槽宽度。一般情况下，水槽宽度为 24 时，视觉上最为舒适