大家好，我是布莱恩。网格系统在网页设计中并不少见，但在移动端设计中却少有人考虑，其实如果能掌握一定的排版布局技巧，制定合理的网格布局规范，设计界面时就可以更高效的产出，减少思考布局的情况。以下是关于网格布局的的分享内容：

在 UI 设计中，网格布局就是一切

好吧，不是一切，别忘了还有颜色的因素，也别忘了还有字体样式的因素。但如果你把布局网格先做好，你就离搭建出一个更好看且可以正常使用的 UI 界面不远了。

布局网格如果有一致的、可扩展的间距，可以在设计和开发时帮你消除疑惑。它可以让你做更少的设计决策，使项目运行得更快。

8pt 网格是网格系统中最常用的一种，让我在这篇文章中告诉你吧。

究竟什么是点（point）呢？

下文均用 pt 表示

一个 pt 是依据设备的屏幕分辨率测量间距的单位。最简单的运算解释就是 1x 屏幕分辨率 1pt = 1px 。

「很久很久以前」，当时的屏幕普遍都是1x分辨率；1pt 等于 1px。然后逐渐出现了视网膜屏（Retina 2x）和超级视网膜屏（Super Retina 3x），计算方法就开始发生改变了。当你为 iPhone X (3x) 屏幕做设计的时候，1pt 就会被每英寸以 3 倍的像素渲染。

举个例子，如果你有一个 24x24px (1x) 的图标，当你导出成@2x和@3x的图片资源时，也就是 48px(2x) 或者是 72px(3x) ，屏幕渲染时它们会分别在视网膜屏和超级视网膜屏下显示完美。

我一直推荐在 1x 画板下做设计，然后根据需求导出不同的尺寸 (@2x, @3x 和其他比例)，这可以减少混乱。

为什么是 8pt 呢？

像我在上文提到的一样，不同的屏幕尺寸和像素密度在持续不断的增加，这会让资源产出工作更加复杂。

使用像 8 这个偶数，来定义你设计的界面元素的尺寸，会让你在适配各种各样的屏幕更加轻松和一致。

8pt 网格的基本规则是，在你设计的界面元素中，使用 8 的倍数 (8, 16, 24, 32, 40, 48…) 来作为外边距，内边距和尺寸的数值。

我在设计 UI 界面时经常会用到 8 的倍数，但在特殊场景时，比如在我要给可显示范围有限的屏幕做设计时，我也会用 4pt 。

使用「固定网格」，还是「随意网格」的方法？

（原文中使用 Hard Grid 和 Soft Grid，直译成硬网格和软网格不是很合适）

为了达到设计目的，大部分人会选择「随意网格」！

在以前我设计 UI 界面的时候，我也会经常选择使用「随意网格」的方法。你只需要测量好各个元素之间是 8pt 的倍数就可以了。

而与之相对的「固定网格」的方法，就是在之前就定义好 8pt 的倍数的固定网格模型里填入元素。但我发现，在搭建界面的时候有点太死板和不切实际了。

图标与 8pt 网格

当遇到图标和 8pt 网格的大部分情况下，你会发现大部分图标尺寸都已经被设计成了 8 的倍数 (16×16, 24×24, 32×32..)

如果你设计的图标尺寸不是 8 的倍数，就尽量确保你把图标放入你设计好的控件里，在控件内把图标缩放到 8 的倍数，这将保证图标在你设计的UI界面里，展示效果可以保持一致。

文字样式与 8pt 网格

到使用文字的时候，同时使用文字的 4pt 基线网格方法和布局的 8pt 网格方法，将使你的设计在垂直排布上显得得更加和谐。

只要将你的文字与 4 的基线网格对齐，就是说要将文字的行高参数定为 4 的倍数(4，8，12，16，20…)

为什么数值是 4 呢？对于我个人而言，我发现在过去使用某些特定字号的时候，使用 8 的倍数会导致文字行间距离得太远。

在文字中使用 4pt 基线网格可以让你的设计更精细，带来更好的效果。

最后

希望以上对 8pt 网格的简要概述让你在布局的时候更加自信，更一致，少一点设计疑问，少一点做设计决策。

试试 8pt 吧，你的设计看起来会好看 10 倍的。

更多8pt的使用技巧：

更多网格系统的设计技巧：

欢迎关注作者微信公众号：「布莱恩学设计」