静电说：8pt化设计系统只是设计方法中的一种

静态说：在昨天的公开课上，一些学生提到了所谓的8pt网格设计系统。今天让我们进行全面的了解。请注意，光栅化设计系统只是设计方法之一，请灵活使用它而不是教条主义。简而言之，使用它可以避免某些问题，但是不使用它不会产生任何负面影响。尤其是在UI界面设计过程中，栅格化系统是一个相对较弱的系统（与以前的Web设计时代中列的重要性相比）。

关于设计方法论的问题，我一直主张先感性然后讲理性。感知级别是您首先将设计草图设计为富有创意且优雅，而理性级别是当达到优雅的第一个级别时，我们将从理性级别开始。处理一些细节。因此，在用户界面教学的开始，特别是在新手阶段，过分强调公式化和教条式理论很容易导致设计者产生误解。

例如，栅格化系统类似于理科学生的UI设计，它过分强调了数据的重要性。对于设计的学生来说，情况恰恰相反。当然，如果我们可以中和这一点，那就太完美了。

让我们看一下Vitsky的有关8pt网格系统的文章。实际上，本文有许多矛盾之处。我将在文章中添加我自己的感受和评论。我在文章末尾有自己的想法。

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

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

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

8PT网格系统简介

首先：什么是PT？

PT =点。您是否曾经想过为什么我们在设计时使用的画板很小，而实际设备的分辨率却很大？例如，iPhone XR的宽度不是414X896像素，而是828x1792像素？这是原来的两倍。

iPhone XR的渲染效果

这是因为iPhone XR的Retina屏幕的PPI是普通屏幕的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. 5x缩放比例）

以8pt为基准，您可以将任意倍数和缩放比例保持为无小数点的整数

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

布局设计

在创建打印系统时，设计人员必须使布局清晰且一致。尽管字体大小可能会发生8倍的变化和偏差，但重要的是行高不会发生变化。例如，段落字体大小可以为15个像素，但行高应为8的倍数，因此24px是可以接受的值。

图标设计

由于上述原因，基于8pt的网格可以使您的图标完美缩放：

导出iOS的16×16像素图标将获得1 6、 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设计领域中，我个人对此栅格化系统不敏感：

首先，现在移动设计的宽度几乎非常狭窄，并且大多数界面都集中在垂直布局上，因此强调水平效果的栅格化布局没有多大用处。通常，UI界面中的垂直列数通常只有2列，并且是3到4列。因此，光栅化布局的应用受到限制。其次，当前手机的ppi越来越高，也就是说，显示精度越来越高。为什么以前有人报告图标是糊状的？最大的原因是输出图标是位图，并且屏幕精度不够高（例如（240ppi或320ppi）），在这种精度的设备上会出现更多或更少的子像素，因此您的印象是图标不尖锐和泥泞。但是现在随着4k显示器的普及以及手机屏幕的分辨率和准确性的提高，这种模糊感已经大大减弱。因此，除非是像素眼睛，否则我们很难观察到图标子像素的存在。 （不包括一些低端型号）

因此，对于我们的UI设计人员而言，基于8pt的网格系统不是教科书公式。我们只需要记住转换很容易，乘法和除法很容易，可以自己使用就可以了。您无需太担心其他人，也可以将精力集中在视觉和创造力以及产品本身上。

作者Vitsky的两个原始文本在这里，感兴趣的学生可以阅读原始文本，然后一起讨论。

作为设计师，我个人的观点是“永远不要使用公式，不要做数学题！”。应该注意的是，光栅化系统只是设计方法之一。设计方法非常不同，我们可以理解相同的结果。但是，如果您仅使用开发工程师的眼睛进行设计，那么我相信您最终可能不是创造者。“设计师”，而是超级理性的“开发者”。

最后，我想到“精设计”的口号：“让感性设计和理性思维闪耀”，并将其分发给所有人。

本文来自电脑杂谈，转载请注明本文网址：
http://www.pc-fly.com/a/tongxinshuyu/article-367188-1.html