8点栅格

使用Bootstrap或Foundation之类的系统进行设计，虽然这些系统可以帮助你定义各个控件自身的规范，但当元素越多，就越难以用统一的规范，将这些控件协调地串联起来。

你可以看到8点栅格系统内的padding或margin或sizing永远是8的倍数。而非8点栅格系统则没有相对严谨的约束，采用的是随意值。

追求界面的一致性，能够使作品更佳专业、足够值得信赖。

Bootstrap是一套强大的组件库，它能让设计师与工程师专注于内容本身。从而提高了无数网站的质量。但它却缺少一套底层的、统一的测量单位，供多个设计师之间进行协作。这样极容易导致padding、margin、sizing的分歧。不足以解决问题。

→8点栅格←，简而言之：就是以“8”为一个步进，来调整元素的间距及尺寸。这意味着任何padding、margin、sizing，都将是8的倍数。

为什么不是6的倍数、10的倍数，非得是8？

因为大多数的主流屏幕都可以被8整除，足够普适。且以8为一个步进既不会使你的系统过于细碎（比如6点栅格），也不会使你的系统过于捉襟见肘（比如10点栅格）。最终你要拿捏一个最“合适”的步进作为你的栅格基础。这套系统必须足够易于上手且易于复用，才能称之为好的系统。

8点栅格的价值几何？

对于设计师：提升效率、减少决策、同时让元素之间保持一种协调的节奏。

对于团队：设计师和工程师之间更容易达成默契，工程师可以较轻松地用肉眼丈量8的倍数，而不是趴在那一个一个数像素。

对于用户：这让他们信赖的品牌得以保持高质量的一致性体验。并且在自己的设备上也不会出现模糊的半像素偏移。

优设地址：www.uisdc.com/8-point-grid-system

Bryn Jackson的8点栅格是从定义到实现的最全面的指南。

Anthony Collurafici写的关于Sketch工作流的文章是一篇超赞的入门指南。 他也是Nudg.it的创造者，大大加快了我的工作流程。

Google Material Design – Metrics＆keylines版块是另一处极佳的资源，例子和注释都非常详实。

Intuit的“Harmony设计系统”对响应式栅格的基本原理也有很好的解释。