原文链接：Intro to the 8-Point Grid System
原文作者：Elliot Dahl
作为一名设计师，无论你是否着手设计网站，你都很可能听过网格系统。我们通过水平基线使内容对齐。垂直基线对齐文本。这些网格描述了我们是如何遵循它的设计方法。在听到Bryn Jackson谈论8pt网格系统时，我十分感兴趣。如果可以的话，我决定去找出8pt网格系统能给我的设计带来多大的益处。
问题是什么？如果我不用8pt网格系统的话我可能永远也不会知道。
我使用像是Bootstrap或Foundation的设计系统来开展web项目，或者通过自己尝试性地建立一些相似的系统。直到最近我才意识到，譬如像Button一样的组件单独放置时看起来精致，但是放在一个更宽广的页面中就不如人意了。这是因为组建的精美不足以支撑一整个页面。我可以在自己的设计中去推动这几个组件元素的摆放，但是我并不能让一组设计师和开发者共同构建我的想法。如果没有一套系统来定义元素间距，就很难建立一致性。
在这种比较下你可以看到8pt网格系统帮助对齐表单元素是多么受欢迎，在任意空间中去对齐任意元素。
为什么我的界面需要一致？
这不是必须的，但是如果你喜欢得到一个更加专业并且值得信赖的页面，那么它就需要被考虑。如果你曾经在网上购物，你可能会经历这样的情景，当你在点击购买和付款入口的时候，那些形式看起来不同的网站会让你犹豫和迟疑。所以一致性是需要深入琢磨的。
为什么采用Bootstrap或相似的系统是不够的？
Bootstrap是一个固化的组件库，它允许设计师／开发者关注内容和用户体验。它提升了无数网站的质量。但是它没有一个一致的计量单位，这可能会导致布局间的不一致。特别是当项目涉及两个或两个以上的项目设计师的时候。
在构建自己的品牌形象时我们经常会创建独特的组建和布局。最近的UI系统建立让我们认识到了这个现实，我们产品上的品牌都有些微的不同。世界各地的独立团队都在建立，理念相同，但是操作起来却不一样。哪一个是错的呢？
他们都没错。他们有不同的高度和填充方式，但是背后并没有一个系统来清楚地解释你为什么要遵循这样的样式规则？
那么，聪明的家伙，你的解决方案是什么呢？
8pt网格系统。在页面上使用增量为8的元素。对我而言这意味着任何可以定义的高度和宽度，保证会填充一个8的增量。
为什么是8pt？
屏幕尺寸和像素密度的增加使得设计产品变得更为复杂，利用一个偶数8的大小可以让元素在各种设备上扩展，简单一致。
例如一个设备是1.5x的分辨率，那么将很难清楚的显示一个基数。5px扩展1.5倍将会变得模糊。
好的，我知道了为什么是偶数，但是为什么不是6或者10呢？
大多数流行的屏幕尺寸被8整除后会得到一个同样方便的偶数。在8pt的系统里并没有限制你去选择6pt或10pt的尺寸。最终你仍会通过你的用户来决定大小。如果一个系统容易重复并且遵循，那么它就是一个好的系统。
8pt的价值是什么？
对设计者而言：效率，减少决策，同时有节奏的保证高质量的元素。
团队：开发者和设计者之间能够简单的沟通，很容易通过眼球来判断8pt的增量而不是每次都去查看。
用户：一致的审美会让他们信任品牌，没有半个像素的模糊会让用户感觉糟糕。
我该从哪里开始学习呢？
这里有一些实现8pt系统的设计文章：
Bryn Jackson’s 8-Point Grid从定义到实现，最全面的指导
Anthony Collurafici’s post 关于他的草图工作流，他也是www.nudg.it的创建者，对我的工作流程也有帮助
Google Material Design-Metrics&keylines article是很好的资源，包含大量的实例
Intuit’s Harmony Design System很好地解释响应式，基线网格和像素计数的成因
