后台设计经验总结：栅格系统及其在后台设计中的应用

原标题：后台设计经验总结：栅格系统及其在后台设计中的应用

关于栅格系统的文章不少，但鲜有专门针对栅格系统在后台设计中相关应用的文章。本文希望抛砖引玉，能引起更多同行的交流与讨论。

文章大纲：

一、栅格系统的目的

栅格系统在页面排版布局、尺寸设定方面给了设计者直观的参考，它让页面设计变得有规律，从而减少了设计决策成本。栅格化提高了页面布局的一致性跟复用性，避免了设计师与开发者在细节上的反复沟通确认，从而提升了整个设计开发流程的效率，并能帮助开发者实现较为理想的设计还原。

但实际应用中，由于对栅格系统理解的不充分，很多设计师在应用栅格系统的实践中产生了各种问题，本来帮助设计的工具现在反而成了设计中需要解决的问题。结合我自己后台设计的经验，本篇文章跟大家聊聊栅格系统在后台设计中如何应用。

二、建立栅格系统的方法与规则 1. 确立栅格系统的原子单位（网格）

如图，一个比较完整的栅格系统是由许多规格一致的小网格组成，这些网格辅助我们更规范的排版、布局。

后台系统设计中，由于后台页面主要以 Web 形式呈现，而对于 web，用户已习惯通过鼠标滚轮或滚动条（scrollbar）来纵向浏览页面内容。因此，在不考虑内容优先级的情况下，Web 可以实现竖直方向的「无限」加载，即竖直方向可以无限延伸。

因此基于 Web 的后台页面，它的栅格系统在水平方向的栅格可以不体现出来，我们在执行设计时只要在竖直方向保持规律的变化就可以了。

标准的栅格系统简化为适用于 Web 后台的设计，如下图所示：

如上图，对于后台设计来讲，栅格系统是由栏目（Column）跟水槽（Gutter）交替分布形成的，栏目（Column）是接纳网页内容的容器，水槽（Gutter）用来调节相邻两个栏目间距，把控页面留白。由于栏目跟水槽的宽度是以网格作为基本单位来增加或者减小，所以栅格化的第一步需要先定义好栅格的原子单位「网格」的大小。

根据本人的设计实践以及其它已有规范经验，目前后台栅格系统网格大小定义为8是最普适易用的。

具体原因有以下几点：

（1）可以被8整除

目前主流桌面设备的屏幕分辨率在竖直与水平方向基本都可以被8整除，使用8作为最小原子足够普适。

我们选取4、6、8、10、12为栅格的候选原子单位，然后用目前主流屏幕分辨率与其相除，判断各个分辨率在竖直（Y）与水平（X）方向能否被候选原子整除，统计结果如图。

显然，对于目前市场桌面设备屏幕而言，4是整除率最高的一个原子，接下来依次是8、10、6、12。但4作为基本原子实在过于小了，太小的步进单位将导致我们决策成本的增加，因为我们将元素间距增加4px或者减小4px视觉感受到的差异并不明显，这种情况下我们为了找到那个「合适、满意」的间距，就需要反复调试。

这就造成了时间上的浪费，尤其对于没有经验的新人，这点会更为突出。但这种调整并不合适，原因是后台管理系统设计重点在于面向用户使用的效率与逻辑，其次才是视觉呈现，使用栅格系统的目的之一也是想减少设计师在「细节」上的纠结，希望设计师站在更全局的角度看待设计，合理安排时间，因此我们舍弃4。

在剩下的6、8、10、12四个单位中，8的整除率最高（80%），以8像素作为一个步进单位的变化，我们视觉上也是能感受到较为明显的差异，因此选取整除率最高的8做为栅格系统的原子单位。

（2）符合「偶数原则」

以8为单位符合「偶数原则」。偶数原则可以在页面缩放中最大程度的避免类似于0.5、0.75、1.25等次像素的出现，从而使页面各类元素在大多数场景下都能有比较精致的细节表现。

虽然对于后台设计而言，通常设计师是直接在目标尺寸下进行设计，并在此基础上标注、切图给开发实现，并不存在像移动端那样需要对各种尺寸、各种像素密度的设备进行适配的情况。但对于 Web 页面来讲，仍存在向上向下适配的可能。

因而从页面的兼容性、可扩展性及可维护性层面来讲，我们设计师还是有必要考虑的更加长远，遵循「偶数原则」可以最大程度上避免各种潜在的问题。

（3）前端开源组件库基于8的原子单位来设计

开发工程师使用的前端开源组件库，比如： Metronic、Antdesign 等也是基于8的原子单位来设计，因此如果设计师也使用以8为基本单位的栅格系统，开发与设计师相互对接就会更加方便，开发实现页面时也能更高品质的去还原我们设计师的稿件。

2. 建立基于原子单位的栅格系统

经过第一步讨论，我们现已确定后台设计的原子单位为8，而我们也知道栅格系统是由栏目（Column）跟水槽（Gutter）交替分布形成的，所以接下来我们要利用原子单位确定栏目跟水槽在具体的页面中如何分布以及它们各自的宽度。

通常，在一套后台设计系统中，水槽宽度会是几个比较固定的数值（因为后台系统的页面相对于其它类型的Web页面，表现的更加整齐、规律，所以留白的方式比较固定，加之后台往往有大量的数据、内容需要呈现，所以要尽可能提高页面利用率，可以留白的空间也比较有限），而栏目宽度更加灵活，它可以根据页面水平方向尺寸的改变而增大或减小以响应页面的变化。

当我们做后台设计的时候首先需要确定在什么样的分辨率下做设计，也就是首先需要确定设计稿的尺寸，当设计稿尺寸确定后，便可建立基于该尺寸的栅格系统。假设页面内容区域宽度为 W，栏目个数为 A，水槽个数为 B，栏目（Column）宽度为 C，水槽（Gutter）宽度为 G，则 W=A*C+B*G。

栅格系统建立初期，由于我们并不确定之后会有什么样的内容呈现我们的页面上，所以为了让栅格更加灵活、普适，我们先假定单个栏目与水槽的宽度是相同的，即C=8n（n=1、2、3、4…）=G，然后以此将页面内容区域等分，形成初步的栅格，之后再按实际内容需要，按比例调整两者宽度或者按比例对两者进行组合，形成承载业务内容的盒子。

目前有两种比较主流的等分方式：12等分与24等分。

（1）12等分

12等分的栅格系统在流行的前端开发开源工具库 Bootstrap 与 Foundation 中广泛使用，适用于业务信息分组较少，单个盒子内信息体积较大的中后台页面设计。

（2）24等分

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

三、栅格系统的应用 1. 页面布局与版式设计

（1）了解承载业务内容的盒子模型（Box Model）