栅格是什么?为什么要定义栅格?

栅格其实就是我们常规理解的网格,从基础的作文本,再到围棋棋盘,都有栅格的身影。

为什么设计师需要关注栅格呢?通过栅格中的网格系统,可以有效的将内容组织起来,形成内容布局的规律性,更易识别。

栅格于设计师的价值主要体现在以下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栅格框架,进行更不均等的布局划分,也是在栅格的框架之内,进行创意的表达。

优化效果

通过确定栅格,让布局变得有规律可循,对统一性确实有非常大的提升。下面两个图为栅格定义前和定义后的效果,大家可以感受下。

如何定义栅格?来看京东的实战案例!

以上就是我们关于栅格的思考,希望能够给到大家启发,也欢迎互相交流学习。

更多栅格系统文章:

欢迎关注「京东设计中心JDC」的微信公众号:

如何定义栅格?来看京东的实战案例!

点赞 18
收藏 103
继续阅读相关文章

发表评论 已发布 2

还可以输入 800 个字
 
 
载入中....
2 收藏