8-Point Grid System（8像素网格设计方法）

作为一个设计师无论是在设计网站、平面排版、甚至移动界面，你都可能听说过网格系统这个概念。在设计中是有一个巨大的网格来对齐我们设计的内容，就像我们PS中常用的参考线或者像素点那样。那么是否有一种通用的网格设计方法能为我们的设计做一些指导，在听了bryn jackson教授关于8像素网格系统之后，我自己也去总结了以下的规律。

不用8像素系统有什么问题？

我曾经使用Bootstrap和Foundation框架来迅速搭建网站，也尝试过建立一个类型的个人框架系统，方便以后的复用。但是最近我才意识到一些组件比如按钮可以方便美观的独立使用，但是把这些独立控件直接使用在其他复杂的项目中去会有巨大的缺陷。我可以用自己的像素眼来保证每个元素的位置，但是没有办法保证项目中其他的设计师与前端工程师有相同的视角，如果没有一个通用的空间布局系统规则就很难保证设计的一致性。

在下面这个比较中你可以直观地看到8像素网格系统在垂直对齐上与其他利用一个任意数的对齐系统的区别。

为什么界面需要保持一致性？

如果你只是简简单单做一个飞机稿，那么一致性不是必须的。但是如果你想做一个专业的，令人相信的设计，那么一致性是必须的。如果你用过淘宝的话你就会发现，付款的页面与购物流程的界面是不同的，在付款页面你会有强烈的意识，你是一个付款页面，需要你输入一些重要的个人信息。风格统一这件事可能比你想象的价值要高很多。

为什么使用Bootstrap或其他的类似系统还不够？

Bootstrap架构更多的偏向于一种标准的组件库架构，用于保证设计师和开发者关注于产品的内容和用户体验。但是没有一致性的规则会导致在不同页面设计时会造成冲突，特别是在一个项目中超过两个设计师时。

我之前在Pivotal工作的时候，经常需要去做一些新的控件和图层，当我最近在把几个设计部门结合起来的时候发现，每个页面顶部的菜单栏有一些细微的差异。由于每个页面是由世界各地不同的分公司制作的，虽然看起来差不多，但是在细节上难以统一。每个部分有不同的高度和边距，每个设计部门的数值设置没有背后的准则。

更好的解决方案应该是怎样的？

使用8的倍数来控制组建的大小和间隔。这意味着，所有的高度，宽度和间隔都将会是8的倍数。

不同尺寸的屏幕和分辨率为设计师带来了不必要的麻烦。用8这样的偶数让缩放变得很简单，并且能够适用于大部分的情况。

对于有1.5倍大小的设备来说，缩放一个基数大小的画面就会产生虚边。比如将一个5px的方格缩放到1.5倍，就会产生0.5px的边缘。

那么为什么不用其他的数字，比如6或者10？

大多数屏幕的尺寸都是8的倍数，这让8变的更加适用。用8的倍数来缩放，这时候就比6或10来的更得心应手。最后你还是需要决定你的观众适合什么样的系统。一个系统能够称之为系统是因为它能够被复制并且被遵守。

8像素网格系统的价值在哪里？

对于设计师：高效，减少不必要的争论和更高的统一性。

对于团队：一个简单的规则让设计师和工程师保持高度统一，减少不必要的沟通。工程师在这样的系统下就能够更快速的识别一个8px的间隔，而不需要每次都进行测量。

对于用户：它们相信的品牌会给他们带来高度的一致性。和半个像素的模糊边缘说再见吧。