如何在UI界面设计中使用8pt网格系统？（附静电的思考和吐槽）

关于设计方法论的问题，我一直倡导先感性再理性，感性层面是你先把设计稿设计的有创意和优雅，理性层面是当第一个层面的优雅达到后，我们再从理性层面处理其中的某些细节。所以，在UI教学刚开始，特别是新手阶段，就过分强调公式化，教条化的理论，很容易让设计者陷入误区。

打个比方，栅格化系统类似于理科生来做UI设计，过分强调数据的重要性。而设计专业的学生则正好相反。当然，如果我们可以在这其中做个中和，那就是再完美不过的。

一起来看看Vitsky的这篇关于8pt栅格系统的文章。其实本文有不少矛盾的点，文章中我会加入自己的感受和批注。文末有我自己的思考。

——————————————————

8pt网格（栅格）系统可以用于平面设计，图标，或者页面布局。

在本文中，我会说服你为什么要使用8pt的网格系统，因为这是最好的定位网格系统。以及为什么这种系统可以用于几乎所有正在进行的数字项目设计中，尤其是产品设计中。

8PT网格系统介绍

首先：什么是PT？

PT=Point。你有没有想过，为什么我们做设计的时候使用的画板非常小，而实际设备的分辨率却很大呢？比如iPhone XR的宽度不是414X896像素，而是828x1792像素？这是原来的两倍。

iPhone XR的渲染效果

这是因为iPhone XR的Retina屏幕的PPI是普通屏幕的两倍，所以渲染出的实际像素也是原来的两倍（静电注：其实就是一倍图和两倍图的关系，一倍图下ppi约为160，二倍图的ppi则为320。作者所说的普通屏幕其实就是ppi为160的屏幕）。

iphone X的渲染效果

对于iPhone X来说，它的屏幕密度是480左右，因此我们需要输出的素材是3倍的图片。

最小尺寸的设计（也就是一倍图设计）使我们能够将资产缩放到不同设备所需的不同尺寸，同时保持像素完美的渲染。因此，可以将@ 1x，@ 2x和@ 3x大小的1pt分别转换为1、4或9像素。

但是，为什么要用8pt呢？

有几个原因，第一个非常重要的原因就是，它可以在所有的不同的屏幕中完美缩放（包括Android的0.75和1.5倍缩放比例）

使用8pt为基准，可以让任何的倍数缩放都能保持为整数，没有小数点

另一个重要原因就是：这是个很好的基准数字。4和8非常容易相乘。

版式设计

在创建印刷系统时，设计师必须让版式鲜明而且又一致。尽管字体大小可能会发生变化并且偏离8倍，但重要的是行高不会。例如，段落字体大小可以为15像素，但行高应为8的倍数，因此24px是可以接受的值。

图标设计

因为上边的原因，基于8pt的网格可以让你的图标完美缩放：

为iOS导出16×16像素的图标将得到16、32和48像素的完美呈现的图标

如果你打算使用其他尺寸的图标，建议你在16X16像素的网格上设计，并在20x20的像素网格上设计另一个版本。这样，你的图标尺寸就可以涵盖任何大小的尺寸：16，20，24，32，40等等。

布局

首先，并非所有移动设备的宽度尺寸都能被8整除。在这种情况下，重要的是要依靠自己作为设计师的直觉，并找到中间值。其次，在设计窄屏时，实际上没有12列。我自己选择在移动设备上使用6列布局，尽管当我尝试使用2列布局时，最终结果并不是最差。

对于375pt宽的屏幕，我建议使用以下设置：

尽管这不是完美的8pt，但是却是适用于这种尺寸屏幕的最好方式

如果你习惯两列布局，则可以做如上栅格化布局设置

重要提示：布局的宽度应基于内容和用户需求。如果你发现它不适用于8pt网格系统，无需担心。我们是设计师，应该时刻保持灵活性？

（静电注：诶？看来8pt栅格系统在移动端界面的设计上只能用于图标？怎么到UI界面部分就要保持“灵活性”了？这里作者的解释有点尴尬了。）

到此为止，本文就结束了，作者还有本系列的第二篇文章，讲述的是如何设计基于8pt的网格设计系统。但是除了图标部分和文字部分，我并没有看出其它内容用8pt网格系统有什么关联。

静电的文末吐槽：

作者是一个严格的栅格化系统倡导者，但是通过翻译本文，我发现栅格化系统最好的运用途径是平面设计和传统的网页设计，而移动端UI设计因为列数比较少，所以用处非常局限。

在Ui设计领域，作者仅仅从图标和文字角度解释了为什么需要使用8的倍数来进行设计，无非是换算中比较容易一些。但是我的观点是：如果不使用8pt网格系统，除了换算容易之外，还有什么其它优势吗？ 是图标会糊掉吗？还是其它负面因素？作者并没有特别指出。

在这里解释下为何在UI设计领域，我个人对这种栅格化系统并不敏感：

1. 首先，现在移动端设计的宽度几乎都很窄，而大部分界面偏重于纵向的排版，因此强调横向效果的栅格化布局就没有太多的用武之地。一般的UI界面纵向列数一般只有2列，撑死为3到4列。所以栅格化布局应用受限。
2. 其次，现在的手机ppi越来越高，也就是说显示精度越来越高，为何之前有人反馈图标糊，其中最大的原因就是输出的图标为位图，而屏幕精度不够高比如（240ppi或者320ppi），在这种精度的设备上或多或少会有亚像素的情况发生，所以你的观感就是图标不锐利，糊糊的。但是现在随着 4k显示器的普及，手机屏幕的分辨率和精度的提高，这种糊的感觉已经非常弱化。因此，除非是像素眼，我们已经很难观察到图标亚像素的存在。（排除一些偏低端的机型）

因此，基于8pt的栅格系统对于我们UI设计师来说，并不是教科书般必须遵循的公式了。我们只需要记住，换算容易，相乘相除容易这一点，拿来为自己所用就OK啦，其它就不用太过担心即可，不妨将自己的精力放在视觉和创意，及产品本身。

作者Vitsky的两篇原文在这里，有兴趣的同学可以阅读原文，然后咱们一起来讨论。

https://medium.com/swlh/the-comprehensive-8pt-grid-guide-aa16ff402179

https://medium.com/swlh/design-system-based-on-the-8pt-grid-2473ca5f0ae1

作为设计师，我个人的观点是“绝对不要套公式，做数学题！”。须知，栅格化系统只是设计方法中的一种，设计方法千差万别，殊途同归，我们可以了解，但如果单纯用开发工程师的眼光来做设计，那我相信，你可能最终就不是一个有创意的“设计师”，而是一个超级理性的“开发者”了。

最后想起静Design的Slogan：“让感性设计和理性思维迸发光芒”，送给各位小伙伴。