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

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

友情链接更多精彩内容