使用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设计系统”对响应式栅格的基本原理也有很好的解释。