来源:网络 作者:佚名
栅格系统对于元素间间距设定的帮助是直观的，当我们定义了栅格原子单位为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已经预设了8列、12列、16列、24列的栅格系统，选择对应列数就可以看到页面上参考线的变化。预设中“装订线”的宽度即栅格系统中水槽的宽度。默认均为20px,我们可以根据之前讨论的8的倍数原则，将其手动更改为24；
如果预设的栅格系统无法满足我们工作需要，我们也可以自定义栅格系统，并能将栅格参数保存为预设，这样就可以重复利用自定义的栅格系统了；栅格系统还可以选择将其应用在当前画板或者所有画板，十分方便易用。由于是Ps自带的参考线，所以它可以通过快捷键灵活的控制显示或隐藏。
2、利用Ps标注工具Assistor Ps 进行栅格系统的建立
Assistor Ps在之前主要是一款页面标注工具，但是随着蓝湖等自动标注工具的流行，这个小软件基本没人用了，但我发现它设置参考线的功能还是很强大的，可以媲美大名鼎鼎的guideguid（这款插件目前对Ps cc 2017及以上版本貌似已经不支持，软件本身安装也挺麻烦），所以就介绍给大家。（安装包在文末下载，Win&Mac，解压后跟常规装软件一样，正常安装就行）。但是这个插件由于很多数值都要自己算，实际上没有Ps自带的新建参考线面板的功能好用。算是一个工具的补充吧
1、Sketch自带栅格系统设定：Layout Settings
Sketch端利用sketch自带的栅格工具Layout Settings即可完成栅格系统的设置，由于sketch的栅格工具是自带的，与Ps类似，它也可以通过快捷键快速显示或隐藏，点击左下角“Make Default”还可以将自定义的栅格系统设置为默认的栅格系统，方便以后重复调用，但sketch貌似只能储存一组栅格系统的数值，而Ps可以储存多组。
2、Sketch栅格系统插件：BootstrapGrid-maste
BootstrapGrid是一个专门用于建立栅格系统的插件（插件在文末附件中下载），插件可以对栅格系统的基本数据做个性化的设定，可以对多个形状同时建立栅格系统，还可以通过快捷键快速调用。具体用法：先选中要建立栅格的画板或者画板里的形状（可以多选），然后：插件>Bootstrap Grid（Plugins -> Bootstrap Grid）
栅格系统参数设计
单个形状（画板）建立栅格系统动图演示
多个形状（画板）建立栅格系统动图演示
GridGuide 最大优点是可以针对一种栅格系统生成4组不同水槽宽度的栅格化方案，能比较直观的比较不同水槽宽度下各个栅格系统的视觉感受。使用方法：在右上角设置好页面宽度以及栏目数量，页面内就会自动生成可以下载为png图片的栅格。
（1）当栅格系统中奇数不可避免的出现时，如何处理?
理想状态下，我们应该调整内容区域的大小，使其尽可能成为可以被8整除的尺寸，但实际应用中，有时会出现无法整除的情况。基于对盒子模型的理解，此时我们保持padding、margin的值不变，改变盒子的大小去适应奇数的页面（元素）即可,因为一致性跟效率才是栅格化要达成的首要目的，偶尔有一些不“完美”的尺寸是完全允许的，因为用户在实际使用页面时，并不能看到我们使用的栅格系统，也很难注意到那几像素的变化，他们能感受到的是页面整体呈现出来的节奏与韵律感，以及持续、一致的视觉语言带给他们的严谨、可靠的心里感受。
（2）栅格系统必须以8作为原子单位？使用其它数值是否可以
首先需要指出的是使用其它数值当然也可以，栅格系统只是手段，提升设计效率、减少沟通成本、提高页面一致性才是最终目的，所以如果你所在团队有其它栅格化习惯，且一直以来效果良好，那么继续使用它也是没问题的。但是对于设计新人来讲，如果能理解前人的经验，并能较好的运用，对于他们来讲，是会少一些弯路，更好的完成设计工作。
（3）栅格系统建立初期是否必须使栏目宽度与水槽宽相等，并等分内容区域？
建立栅格系统时并不是必须使栏目宽度与水槽宽相等，并等分内容区域。本篇文章介绍栅格系统时采用这种处理方式是为了让大家更好的理解栅格系统建立的原理与过程，事实上，栏目的宽度在实际应用中往往大于水槽宽度，我们通常会先计划好水槽的宽度、内容区域总宽度与栏目的数量，这时候栏目的宽度通过计算可得到，对于响应式页面，栏目的宽度可以是百分比而不是具体的数值（关于响应式的内容下期文章跟大家分享）。
