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，以此类推。这个临界值我们称之为断点。

作出反应的设计结构新设计融合了浮动结构新设计和自适应结构新设计。随着浏览器宽度的增加或减少，作出反应的设计结构新设计将像浮动结构新设计一样展开巨大变化。同时，如果浏览器宽度超出了某个临界点，也就是断点，那么网页结构新设计也时会发生改变。往往，作出反应的设计结构新设计是为了能够兼容的网站后端、平板后端和伸展后端等不尽相同通讯设备展开新设计的，这样时会给普通用户带来更为好的浏览领略。

最后用可视展览品下如何借助六边形的系统在的网站新设计上展开网页结构新设计。

在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协议