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