网格系统构成了界面设计的根基。倘若您运用设计系统，那么至关重要的设计决策：诸如间距、布局以及排版，极有可能会受到底层网格系统那微妙的影响。4 点网格系统在 UI 设计中是被最为广泛采纳的方法，众多热门的设计系统都采用了它或其变体。不过，究竟是什么因素使得 4 点网格这般特殊？又为何它会成为首选呢？

比例缩放

现代 UI 设计至关重要的规则之一在于维持明晰的视觉层级。为达成此目标，间距单位务必要遵循一致的模式，通常需依据固定比例对基础单位予以缩放。数字 4 具备很强的可整除性，能被 1、2 及 4 整除，从而让缩放操作变得轻松便捷。向上缩放会形成 4、8、12、16 等增量——既足够大到能在视觉上凸显差异，又不会过于庞大而难以把控。故而，4 点网格有助于营造出视觉上和谐均衡的界面。

微观与宏观元素

4 点网格恰如其分：既不会因太小而被忽略，也不会因太大而显得突兀。比如，2 点增量或许会给人过于精细之感，而 6 点或 8 点增量或许会让人感觉变化过于剧烈。4 点增量对于诸如图标、文本填充等微观元素而言足够精准，同时也能很好地适用于页面边距、网格间距等宏观元素的缩放。

跨设备的兼容性与一致性

不同设备拥有各异的屏幕分辨率与像素密度。高密度显示屏所包含的像素数量远胜于低密度显示屏。为保证 UI 元素具备恒定的物理尺寸，设备会依据像素密度对界面进行缩放。譬如，某个在一个屏幕上宽度为 100px 的元素，在另一个像素密度为其两倍的屏幕上或许会扩展至 200px。数字 4 所具备的可缩放特性，有利于在不同设备上维系界面的兼容性与一致性。

避免分数像素

像素乃是屏幕上最为微小的单元，所有元素的大小务必为整数，元素之间的间距和距离亦是如此。设备难以对分数像素进行妥善渲染，这可能导致视觉呈现模糊不清或者错位。所以，界面应当进行缩放并且保证所有大小和间距均为整数，而 4 点网格系统让这一过程变得更为简便。

总结

以上就是关于设计分享的内容了，这里推荐设计师和开发工作者使用腾讯 CoDesign。CoDesign 是一个设计交付和资产管理平台，可以帮助产·设·研团队更好地管理和进行设计项目协作。

此外，CoDesign 还提供了丰富的设计资产管理功能，方便你查找和管理设计资源。免费使用 (opens new window)。

页面原文内容由 Medium 提供。CoDesign 提供翻译支持

原文链接：https://uxplanet.org/why-the-4-point-grid-system-dominates-ui-design-88c2400e775a