8-PointGridSystem（8像素⽹格设计⽅法）
作为⼀个设计师⽆论是在设计⽹站、平⾯排版、甚⾄移动界⾯，你都可能听说过⽹格系统这个概念。在设计中是有⼀个巨⼤的⽹格来对齐我们设计的内容，就像我们PS中常⽤的参考线或者像素点那样。那么是否有⼀种通⽤的⽹格设计⽅法能为我们的设计做⼀些指导，在听了bryn jackson教授关于8像素⽹格系统之后，我⾃⼰也去总结了以下的规律。
不⽤8像素系统有什么问题？
我曾经使⽤Bootstrap和Foundation框架来迅速搭建⽹站，也尝试过建⽴⼀个类型的个⼈框架系统，⽅便以后的复⽤。但是最近我才意识到⼀些组件⽐如按钮可以⽅便美观的独⽴使⽤，但是把这些独⽴控件直
接使⽤在其他复杂的项⽬中去会有巨⼤的缺陷。我可以⽤⾃⼰的像素眼来保证每个元素的位置，但是没有办法保证项⽬中其他的设计师与前端⼯程师有相同的视⾓，如果没有⼀个通⽤的空间布局系统规则就很难保证设计的⼀致性。
在下⾯这个⽐较中你可以直观地看到8像素⽹格系统在垂直对齐上与其他利⽤⼀个任意数的对齐系统的区别。
为什么界⾯需要保持⼀致性？
如果你只是简简单单做⼀个飞机稿，那么⼀致性不是必须的。但是如果你想做⼀个专业的，令⼈相信的设计，那么⼀致性是必须的。如果你⽤过淘宝的话你就会发现，付款的页⾯与购物流程的界⾯是不同的，在付款页⾯你会有强烈的意识，你是⼀个付款页⾯，需要你输⼊⼀些重要的个⼈信息。风格统⼀这件事可能⽐你想象的价值要⾼很多。
为什么使⽤Bootstrap或其他的类似系统还不够？
Bootstrap架构更多的偏向于⼀种标准的组件库架构，⽤于保证设计师和开发者关注于产品的内容和⽤户体验。但是没有⼀致性的规则会导致在不同页⾯设计时会造成冲突，特别是在⼀个项⽬中超过两个设计师时。
我之前在Pivotal⼯作的时候，经常需要去做⼀些新的控件和图层，当我最近在把⼏个设计部门结合起来的时候发现，每个页⾯顶部的菜单栏有⼀些细微的差异。由于每个页⾯是由世界各地不同的分公司制作的，虽然看起来差不多，但是在细节上难以统⼀。每个部分有不同的⾼度和边距，每个设计部门的数值设置没有背后的准则。
更好的解决⽅案应该是怎样的？
使⽤8的倍数来控制组建的⼤⼩和间隔。这意味着，所有的⾼度，宽度和间隔都将会是8的倍数。
不同尺⼨的屏幕和分辨率为设计师带来了不必要的⿇烦。⽤8这样的偶数让缩放变得很简单，并且能够适⽤于⼤部分的情况。
对于有1.5倍⼤⼩的设备来说，缩放⼀个基数⼤⼩的画⾯就会产⽣虚边。⽐如将⼀个5px的⽅格缩放到1.5倍，就会产⽣0.5px的边缘。
那么为什么不⽤其他的数字，⽐如6或者10？
为什么使用bootstrap?⼤多数屏幕的尺⼨都是8的倍数，这让8变的更加适⽤。⽤8的倍数来缩放，这时候就⽐6或10来的更得⼼应⼿。最后你还是需要决定你的观众适合什么样的系统。⼀个系统能够称之为系统是因为它能够被复制并且被遵守。
8像素⽹格系统的价值在哪⾥？
对于设计师：⾼效，减少不必要的争论和更⾼的统⼀性。
对于团队：⼀个简单的规则让设计师和⼯程师保持⾼度统⼀，减少不必要的沟通。⼯程师在这样的系统下就能够更快速的识别⼀个8px的间隔，⽽不需要每次都进⾏测量。
对于⽤户：它们相信的品牌会给他们带来⾼度的⼀致性。和半个像素的模糊边缘说再见吧。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。