我们期望此篇文章可以和大家共同探讨学习关于栅格的底层设计原则，希望能够给到大家启发，也欢迎大家一起互相交流学习。
1、栅格是什么？为什么要定义栅格？
栅格其实就是我们常规理解的网格，从基础的作文本，再到围棋棋盘，都有栅格的身影。
为什么设计师需要关注栅格呢？通过栅格中的网格系统，可以有效的将内容组织起来，形成内容布局的规律性，更易识别。
栅格于设计师的价值主要体现在以下2方面：
1.To用户：提高内容布局规律性，减少认知成本
熟练运用网格系统能够让你的设计更有秩序和节奏感，页面信息的展现更加清晰，提高用户的阅读和浏览效率，减少认知成本，提供更好的用户体验。
2.To设计师：提高布局统一性，提高效率
当多位视觉设计师共同参与一个项目时，需要统一的标准来对项目进行规范。通过栅格体系，多位视觉设计师可以一起协作，提高整体布局的统一性。同时，因为栅格的复用性，也避免了设计与开发在细节上反复沟通确认，提升整个效率。
2、大促活动栅格碰到的问题
在之前的活动中，我们并没有完整&严密的栅格体系，只对常见的模块边距、1行2/1行3/1行4坑位的间距进行了定义。在实际的应用中，就会出现如下问题：
问题1：间距定义全凭设计师感觉，不统一
在同一个页面设计中，不同的模块间距定义比较随性，全凭设计师的感觉，在750*1334px的画布下，有的模块间距是2px，有的是3px，有的是6px，没有规律；这样不利于整体平台的设计统一性，也会影响设计的品质感。
问题2：间距标注效率较低
为了保证设计稿的还原度，视觉同学需要进行标注，同时开发同学也需要依据标注实现每个模块的尺寸和间距，效率较低；基于以上的2个问题，我们进行一次活动栅格的深入研究，希望能够构建更严密的活动栅格体系，保证统一性和效率；
3、大促活动栅格深入研究
在栅格的深入研究中，我们的主要思路如下，总共涵盖了4个步骤。
Step1：大促活动栅格画布尺寸定义
如果要确定栅格，首先得定义设计和开发实现的画布尺寸基准，只有确定了这一点，才能进行后续的栅格计算。针对画布尺寸，我们主要进行了2方面的探索：了解相关概念 + 确定画布尺寸
1.了解栅格画布尺寸中涉及的常见概念
a.手机分辨率
手机屏幕的像素点数目，即屏幕像素宽高，比如iphone6s的手机分辨率是750px*1334px。
b.屏幕尺寸
用户最直接感受到的手机屏幕物理宽高，比如iphone6s的屏幕尺寸是4.7寸。
c.密度（DPI:dots per inch;PPI:pixels per inch）
手机屏幕上每英寸对应的像素点，其计算方式为：屏幕对角线像素/屏幕尺寸。以iphone6s为例，通过计算对角线为1530px，所以iphone6s的dpi为326。
安卓机型下，生产厂家众多，有各种尺寸的屏幕以及分辨率。对于移动端刚入门的朋友，可能有个常见误区：各个安卓手机的兼容，和手机的屏幕大小、手机分辨率相关。如果按照这个思路，设计和开发同学方案的工作量需要成N倍增加。但实际上，在前端进行兼容时，需要关注的值主要是密度（DPI）。同时为了便于适配，屏幕的DPI以初始的固定密度为准。目前常见值有：120、160、240、320、480。以百度统计（https://tongji.baidu.com/research/）可查的数据来看，以480占比居多。具体安卓下排名在前12的分辨率以及其对应的密度如下图所示：
（取百度统计的数据是为了让大家查找，实际上是以各自APP中数据为参考）
IOS官方有明确的设计规范，分辨率宽主要是750和1125，指定了2倍图、3倍图的使用范围。目前IOS分辨率以及其对开发倍数如下图所示：
2.确定画布尺寸
在运营活动中，我们一般采用iPhone通用的750px宽作为设计稿基准。原因如下：
1)在IOS中，750的尺寸，往下可以兼容单倍的325，往上可以适配三倍图的1125；
2)安卓占比大的分辨率，比如：1080*1920，720*1280，尺寸比例和750*1334几乎相同。
因此采用750*1334是行业中一般做法，避免多个尺寸设计稿的资源浪费。
结论：最终我们确定了采用750*1334的画布尺寸作为交互、视觉、前端确定的画布尺寸。
Step2：明确栅格好坏判断标准
确定了画布尺寸之后，下一步就是明确栅格的判断标准。这样后续通过栅格公式进行计算之后，能够直接选择和判断。经过沟通，我们对栅格主要有以下2个要求：适应性+ 灵活性；
1.较好的适应性：能够满足活动多样的业务场景
活动页面基数庞大，大型活动涉及到的活动页非常多，例如主会场、预售会场、榜单会场、爆品会场、站内攻略等等。因此，为了满足多样的诉求，我们的栅格体系需要具有较好的灵活性，能够满足多样业务场景。比如，有些活动页面较少，对内容和画布的间距有一定的要求，为了满足透气感，不能间距太小；有的活动页面内容较多，如果内容和画布的间距过大，则会中间内容布局太挤，影响内容的展示。
2.较强的灵活性：能够启发视觉同学进行创新
栅格系统定义的是底层规则，但是对上层的视觉表现而言，除了限制之外，更多的是启发，我们需要保证栅格体系能够给视觉同学充分的创造空间，而不是扼杀大家的创意。
Step3：利用栅格公式计算栅格体系
明确了判断标准之后，我们开始了细致的栅格计算。栅格计算公式如下：页面宽 = 栅格宽 X 栅格数（m） + （栅格数-1）X 槽宽（a）+ 2 X 留白宽（b）
基于前文【页面宽】为750px的前提，我们进行了栅格的计算。在【栅格数】m的数值选择上，为了满足视觉的灵活性要求，我们选择了行业内常见的12、24两个数值进行基础计算，并且列出了所有的可能性，具体如下。
1.12栅格体系下所有的可能性
在12栅格体系下，将具体的值带入公式，则有如下结果：750 = 栅格宽 X 12 + 11 X 槽宽（a）+ 2 X 留白宽（b）
我们针对所有的可能性进行了计算，计算结果如下:
其中12栅格体系下，栅格宽=54、槽宽=6、留白宽=18时，能够满足当前活动的场景。
2.24栅格体系下所有的可能性
通过对栅格公式的计算，在24栅格体系下，将具体的值带入公式，则有如下结果：750 = 栅格宽 X 24 + 23 X 槽宽（a）+ 2 X 留白宽（b）
我们针对所有的可能性进行了计算，计算结果如下:
其中24栅格体系下，栅格宽=24、槽宽=6、留白宽=18时，能够满足当前活动的场景。
3.确定最终栅格
在上一步计算中，我们发现12栅格、24栅格均有合适的栅格布局，将两个栅格对比后，我们发现有很多数值都是类似的：
上图2个方案的槽宽、留白宽都是一样的；主要的差别在于是分成12栏、还是24栏。和设计师一起商量后，为了保证灵活性，我们最终确定选用24栅格体系。
结论：最终确定为24栅格体系，当页面分别为750px、1125px时，具体栅格尺寸如下：
Step4：确定【前端实现方式】
设计确定栅格体系后，前端针对实现方式也进行了梳理。在前端还原设计时，随着移动端技术的发展、系统的更新，我们从Rem适配，转换成采用vw（1% of viewport’s width）弹性布局方案，这样可以让适配更纯粹的放在CSS处理上。代码设置层面，只需要设置对应设计稿尺寸即可：
4、栅格运用&延展
1.使用场景延展
在实际运用的过程中，上述栅格体系能够满足绝大部分的使用场景。下图列举了模块作为例子；
但是存在一类特殊的情况，有时为了体现更紧密的卡片关系，如果使用6px就会出现间距过大的情况。例如下图中的单品紧凑布局。由于6px间距过大，导致内容关系并不紧密，略显疏离。基于此种的紧密关系，我们也试验了槽宽为2px的视觉效果。如下图所示。
对比后发现，2px的间距更能传达信息间的关系。
基于这种场景，我们对栅格体系进行了场景延伸，扩展了紧密关系、宽松关系2套间距。其中宽松布局适用于绝大多数场景，紧凑布局适用于卡片设计中紧密内容布局的场景。
2.前端布局沉淀
结合确定的栅格体系，前端将不同的布局沉淀到代码中，在固定左右留白间距的前提下，除了适配两套体系，还增加了其他布局拓展。
基础布局：24栅格布局，可任意设置每列栅格数。前端展示效果如下。
每列的宽度符合24栅格标准，前端可以方便的设置每列布局栏数（1-24），边界落在栅格基线上。同时每列内部可以控制右侧间隙以及分割线，来实现分隔。一般来说，视觉都会有间距，不会多有的内容无间距排列，基于此，我们从基础布局演变出以下几种常用布局：
a.宽松布局。在基础布局上，每列增加内部间隔。如下图所示：
以一行2的布局（col12）为例，可以看到，加上右侧6px的间隔，和基础布局中的一行2宽度是完全吻合的。
b.紧密布局。将a版本中的间距换成border（分割线），如下图所示：
c.混合布局。一行中每列栏数不相同，每列分隔以分割线实现。如下图所示：
3.栅格体系是启发，而不是限制
有些设计师会觉得，如果栅格定义的非常死了，是不是就没有创新的空间了。其实并非如此。栅格系统只是一种布局辅助工具，可灵活根据实际项目需要在整体或局部合理应用。例如活动会场中，出现了IP类的重氛围会场，这时其实没有必要非要延续2等分/4等分的做法，可以回到24栅格框架，进行更不均等的布局划分，也是在栅格的框架之内，进行创意的表达。
5、优化效果
通过确定栅格，让布局变得有规律可循，对统一性确实有非常大的提升。下面两个图为栅格定义前和定义后的效果，大家可以感受下。
以上就是我们关于栅格的思考，希望能够给到大家启发，也欢迎互相交流学习。
