B端设计之网格控制系统

有无想过我们在好好回转末端界面建筑设计的时候为什么换用特别小的画板，但我们的显示的设备却比较大？

比如，我们用375×812的尺码来同步进行建筑设计iphone X，但或许iphone X的也就是说尺码是1125×2436，是我们建筑设计尺码的3倍。

因为建筑设计尺码就会以2倍或3倍的缩放同步进行位图，比如iphoneX就是以3倍尺码同步进行位图，iphone8或iphoneXR就会以两倍尺码同步进行位图。所以我们在同步进行建筑设计的时候可以改用1倍最小尺码同步进行建筑设计，以并行到有所不同的设备的有所不同尺码。因此，1pt 可以分别叠加为 @1x（1倍尺码）、@2x（2倍）和 @3x（3倍）形状的 1px、4px 或 9px。

所以我们建筑设计一个16pt的图标，解析@2x或者@3x的尺码应该是32px、48px

改用个数来调整锕系元素形状或锕系元素间的每条可以很好的并行到各种尺码的显示屏。比如在@1.5x尺码下，如果用个数来表述锕系元素尺码或每条，就很难以再次出现半个缩放的可能。5px在1倍尺码之前解析为1.5倍尺码就难以再次出现半格缩放的可能。之所以必需8，也是因为大之外的显示屏尺码是可以被8整除的，这样就很难以并行。此外在PC末端没有改用2或4，是因为其外层度太小，不便于建筑设计者同步进行操纵；用8的个数来建筑设计还有一个好处就是避免我们在建筑设计之前更加纠结。

基于 8pt 交叉的排版系统对。字体的形状可以建筑设计成有所不同的尺码，但它们的行高要尽有可能是 8 的个数。

在其网站末端建筑设计时，很少就会遇到几倍尺码的输出，所以通常可能下都以缩放为的单位，这样一来就是8px的倍增。我们就可以把每条或者锕系元素表述成以8的倍增有所不同尺码。

例如：

small = 8px

medium = 16px

large = 24px

x-large = 32px

……

主页之前轴类型：

广泛应用了上述术语后，我们朋友们进一步了解下主页的之前轴，主页之前轴基本上可分一般而言：分开之前轴、流向之前轴、增量之前轴、鼓动的单之前轴。

分开之前轴，称好好就是主页的连续性跨度是分开的，不就会随着搜索引擎的剪切发生变化而发生变化。这种主页一般来说严肃单一，但对于建筑设计者来讲一般来说难以建筑设计，也难于开发。

流向之前轴，它就会随着搜索引擎窗口的形状而发生变化，但是它发生变化的语义是以模块的百分比来表述的。无论搜索引擎的跨度是多少，流向之前轴都就会填满主页的跨度。其次流向之前轴不所需像鼓动的单之前轴那么多样性的发生变化。它在巨大或极小的主页跨度上就会存在一些缺点。比如主页很高约，以下内容有可能就会被剪切得太长，单个文字整段有可能就会在单行上贯穿主页。意味著，小显示屏上的多四支之前轴也有可能对以下内容来说更加狭窄。

增量之前轴可以忽略为是分开之前轴的一个另一款，举个例子，当主页以下内容为960px，此时主页无论往北多高约剪切，主页以下内容始终显示960跨度。如果增加跨度到一个稳定状态时，比如960px以内，主页就就会增加到它的第二个跨度，结论是640，三和。这个稳定状态我们称之为断点。

鼓动的单之前轴密切关系结合了流向之前轴和增量之前轴。随着搜索引擎跨度的增加或减低，鼓动的单之前轴将像流向之前轴一样同步进行发生变化。同时，如果搜索引擎跨度超出了某个临界点，也就是断点，那么主页之前轴也就会发生意味著。通常，鼓动的单之前轴是为了必须兼容其网站末端、平板末端和回转末端等有所不同的设备同步进行建筑设计的，这样就会给改用者带来越来越难以的Flickr玩游戏。

先前用图例展示出下如何并用交叉系统对在其网站建筑设计上同步进行主页之前轴。

在figma上的设如图：

我们可以设好四支数，表述好四支高约和冷水高约来提议主页的也就是说跨度。

在其网站建筑设计上改用交叉系统对浅层实用性是为了让主页之前轴有章可循，使主页样子越来越加统合，深层实用性或许是为了好好增量之前轴，让主页在有所不同跨度下并行到有所不同的的设备上。

这之前的我也设立了4种有所不同尺码的其网站末端交叉系统对，专用大家参考，大家也可以根据自己的也就是说可能去设立自己的交叉。

切记，在也就是说项目之前，尽有可能灵活的改用交叉，无需直截了当8pt的的单位，但尽有可能持续保持在个数范围。

参考文献：

The Comprehensive 8pt Grid Guide

UI/UX Design: Setting Up Grids

material design

History of grids: from the printing press to modern web design

History of the design grid

本文由 @曲sir 原创面世于只求都是产品经理，未经许可，禁止刊出。

题图来自Unsplash，基于CC0备忘录