@UX-BOY ：关于栅格系统的章，但有专门针对栅格系统在后台设计中相应的章。本希望抛砖引玉，引起更多同行的交流与讨论。
一、栅格系统的目的
栅系统在页面排版局、尺寸设定方面给设计者直观的参考，它让页面设计变得有规律，从而减少设计决策成；栅化提高页面局的一致跟复用；避免设计师与开者在细节上的反复沟通确认，从而提升整个设计开流程的效率，并能帮助开者现为理想的设计还原。
但实际应中，由于对栅格系统解的充分，很多设计师在应栅格系统的实践中产生了各种问题，本来帮助设计的工具现在反而成了设计中需要解决的问题。结合我自己后台设计的经验，本篇章跟大聊聊栅格系统在后台设计中如何应。
二、建立栅格系统的方法与规则
1. 确立栅格系统的原子单位（网格）
图，一个比完整的栅系统是由许规一致的小网组成，网辅助我们更规范的排版、局。
台系统设计中，由台页面主要以 Web 形式呈现，而对 web，用户已习惯通鼠标滚轮或滚动条（scrollbar）来纵向浏览页面内容，因此，在不考虑内容优先级的情况下，Web 以现竖直方向的「无」加载，即竖直方向以无延伸，因此基 Web 的台页面，它的栅系统在水平方向的栅以不现出来，我们在执行设计时只要在竖直方向持规律的变化就以。标准的栅系统简化为适用 Web 台的设计下图所示。
上图，对台设计来讲，栅系统是由栏目（Column）跟水槽（Gutter）替分形成的，栏目（Column）是接纳网页内容的容器，水槽（Gutter）用来节相邻两个栏目间距，把控页面留白；由栏目跟水槽的宽度是以网为基单位来增加或者减小，所以栅化的一步需要先定义栅的原子单位「网」的大小。根据人的设计践以及其它已有规范经验，目前台栅系统网大小定义为8是最普适易用的。具原因有以下几点：
以被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做为栅格系统的原子单位。
符合「偶数原则」
8为单位符合「偶数原则」。偶数原则可在页面缩放中最大程的避免类似于0.5、0.75、1.25等次像素的现，从而使页面各类元素在大多数场景都有较精致的细节表现。
虽然对于后台设言，通常设师直接目标尺寸下行设，并此基础标注、切图给发实，并不存移动端那样需对各种尺寸、各种素密度的设备行配的况，但对于 Web 页面讲，仍存向向下配的可能，因从页面的兼性、可扩展性及可维护性层面讲，我们设师还必考虑的加远，遵循「偶数原则」可以程度避免各种潜的问题。
前端开源组件库基于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等分。
12等分
12等分栅格系统在流前端开发开工具库 Bootstrap 与 Foundation 广泛使用，适用于业务信息分组较少，单个盒子内信息体积较大后台页设计。
24分
24分的栅格系统用于业务信息、信息分组较多、单盒子内信息体积较小的中后台页面设；相对12栅格系统，24栅格系统变化加灵活，合内比较多样复杂的场景。
三、栅格系统的应用
1. 页面布局与版式设计
了解承载业内容的盒模型（Box Model）
建立好栅格系统后，就可以根据的实际业，在栅格系统上安排内容了。页面上最终承载内容的其实是一个个「盒（Box）」，这个盒的高度由盒要容纳的内容页面版式计决定，按8n规律变化；宽度则由栏目水槽按比例组得。
在栅系统上容纳业务内容的容器我们把它称之为盒子（Box），栅系统上的盒子其跟前端工程师写页面时用到的盒子是一致的。图所示，当我们浏览任何一个网页时，右键>检查元素（审查元素），在 style 菜单下就以看到个盒子结构。其中 Padding 就是主内容（Element）距离盒子外的距离，我把它称之为内边距，（Element 以是一个按钮，一段文、一图或者一个表等）而 Margin 就是相邻两个盒子间的距离，对应在台栅系统中其就是水槽的大小。完栅系统的盒子模型之，下一步我们需要根据具业务内容来确定盒子的宽度，也就是何用栅系统做际内容的局与版式设计。
根据业内容配页面比例，确定盒宽度
以24栅格系统为例，一个24栅格系统可以根据业需要被2等、3等、4等、6等、8等、12等，还可以被1：1：1、1：2：1、1：3：2、2：3：3、1：2、1：3、1：5、3：5等不对称割，体采用哪种比例的组需要根据业需求来定，此所说的比例实际上就是盒的宽度。
上图展示了盒在24栅格系统上的布情况，图中只列举了部比例，实际业中，同一个页面上使用一组比例值的组来布局是比较适的（如下图），组形式过多页面就会显得琐碎、杂乱，不利于阅读和使用。因为盒的高度根据内容来定，故下图中没有体现高度这一维度的变化规律。
当完成上图规划后，需要做的便是根据实际内容往每个盒安排内容，做视觉交互的落地了。
2. 元素对齐与间距设定
栅格系统大的层面可以帮助计者更好的进行版式计内容布局，而的方面可以辅助计规范页面内各种素的对齐间距的定。从用户体验角度来讲，这者同等重要，从执行层面来讲，一先做版式计布局，然后再填充内容、调整细节。
栅系统辅助对齐的用类似各种设计软件中的参考，它能让我们更直观的安排、整内容的位置及对齐方式，以使内容变得规律、有序，方便用户浏览阅读，帮助用户提高获取信息的效率。
栅格系统对于元素间距设定的帮助是直观的，当我们定义了栅格原子单位为8时，这意味页面上各元素间距的变应遵循8n 的规律，一致的变规律页面富有节奏感跟韵律感，在页面一致性的同时减了设计决策成本。我们知道，栅格系统中水槽与栏目的变遵循8n 的变规律，此处 n 为大于0的正整数，即 n=1、2、3……但是于规范元素间距的8n，n 可是0.5、1.5这类包含二分之一8的情况，原因是实际工作中，我们面的情况是复杂的，这样处可间距的设定适应一些特殊的场景，从而使更灵普适。
四、注意事项
1. 水槽宽度的设定
确定好内容模块比例后，会发现由于之前等的缘故，此水槽较宽，需要调整水槽宽度一个适的值。
水槽的宽度是8n，也就是水槽以以8为基单位去增加或减小。为减少设计决策成，我们先设定一系列水槽宽度，并定义每个宽度对应的使用场，根据每个场使用对应数值就以。我定义一组水槽的值是8、16、 24、32 、40，为区分它们的使用场我们依次为其命名为 XS、SM、MD、LG、XL。根据践经验，正常情况下，两个盒子间距（水槽）的值为24（MD）时，视上是最为舒适。
五、栅格化工具推荐
1. Ps栅格系统工具
PS自栅格系统设：新建参考线版面（重点推荐）
Ps 功能叫「新建参考线版面」，打这面板后，预设这里可以看到 Ps 已预设了8列、12列、16列、24列的栅格系统，选择对应列数就可以看到页面参考线的变化。预设中「装订线」的宽度即栅格系统中水槽的宽度。默认均20px，我们可以根据之讨论的8的倍数原则，将其手动改24。
如预设栅格系统法满足我们工作需要，我们也可以自定义栅格系统，并能将栅格参数保存为预设，这样可以复利用自定义栅格系统了。栅格系统可以选择将其应用在前画板或者所有画板，十分便易用。由于是 Ps 自带参考线，所以它可以过快捷键灵活控制显示或隐藏。
利Ps标注工具Assistor Ps进行栅格系统的建立
Assistor Ps 在之前要是一款页面标注工具，但是随着蓝湖等自标注工具的流行，这个小软件基本没人了，但我发现它设置参考线的功还是很强大的，可媲美大名鼎鼎的 guideguid，就介绍给大。（包在末载，Win&Mac，解压后跟规软件一样，正就行）但是这个插件由于很多数值都要自己算，实际上没有 Ps 自带的建参考线面的功好，算是一个工具的补充。
2. Sketch栅格系统工具
Sketch带栅格系统定：Layout Settings
Sketch 端利用 sketch 自带栅格工具 Layout Settings 即可完栅格系统的设置，由于 sketch 的栅格具自的，与 Ps 类似，它也可以通过捷键速显示或隐藏，点击左下角「Make Default」还可以将自义的栅格系统设置默认的栅格系统，方便以后重复调用，但 sketch 貌似只能储存一组栅格系统的数， Ps 可以储存多组。
Sketch栅格系统插件：BootstrapGrid-maste
BootstrapGrid 一专门用于建立栅格系统的插件（插件文末件中下载），插件可以对栅格系统的基本数据性化的设，可以对多形状同时建立栅格系统，还可以通过捷键速调用。具体用法：先选中建立栅格的画板或者画板里的形状（可以多选），然后：插件>Bootstrap Grid（Plugins -> Bootstrap Grid）
栅格系统参数设计
单个形状（画板）立栅格系统动图演示
多个形状（画板）立栅格系统动图演示
跨平台的web端栅格具
GridGuide 优点可以针对一种栅格系统4组不同水槽宽度的栅格化方案，能比较直观的比较不同水槽宽度下各栅格系统的视觉感受。使用方法：右角设置好页面宽度以及栏目数，页面内就会自动可以下载 png 图片的栅格。
七、常见问题解答
当栅系统中奇数不避免的出现时，何处理？
理想状态下，我们应该整内容区域的大小，使其尽能成为以被8整除的尺寸，但际应用中，有时出现无法整除的情况。基对盒子模型的理，此时我们持 padding、margin 的值不变，改变盒子的大小去适应奇数的页面（元素）即，因为一致跟效率才是栅化要达成的首要目的，偶尔有一不「完美」的尺寸是完允许的，因为用户在际使用页面时，并不能看到我们使用的栅系统，也很难注意到几像素的变化，他们能感受到的是页面整呈现出来的节奏与韵律感，以及持续、一致的视语言带给他们的严谨、靠的心理感受。
栅系统必须以8为原子单位？使用其它数值是否以
首先需要指出的是使用其它数值当也以，栅系统只是手段，提升设计效率、减少沟通成、提高页面一致才是最终目的，所以果你所在团有其它栅化习惯，且一直以来效果良，么继续使用它也是没问题的。但是对设计新人，果能理前人的经验，并能的运用，对他们来讲，是少一弯路，更的完成设计工。
栅系统建立初期是否必须使栏目宽度与水槽宽相等，并等分内容区域？
建立栅系统时并不是必须使栏目宽度与水槽宽相等，并等分内容区域。篇文章介绍栅系统时采用种处理方式是为让大家更的理栅系统建立的原理与程，上，栏目的宽度在际应用中往往大水槽宽度，我们通常先计划水槽的宽度、内容区域总宽度与栏目的数量，时栏目的宽度通计得到，对响应式页面，栏目的宽度以是百分比而不是具的数值。
插件载：AssistorPs&BootstrapGrid
图片素作者：Avian Rizky
浙公网安备33011002017549号