唐老鸭

  1692年,新登基的法国国王路易十四感到法国的印刷水平差强人意,因此命令成立一个管理印刷的皇家特别委员会。他们的首要任务是设计出科学的、合理的, 重视功能性的新字体。委员会由数学家尼古拉斯加宗(Nicolas Jaugeon)担任领导,他们以罗马体为基础,采用方格为设计依据,每个字体方格分为64个基本方各单位,每个方各单位再分成36个小格,这样,一个印 刷版面就有 2304个小格组成,在这个严谨的几何网格网络中设计字体的形状,版面的编排,试验传达功能的效能,这是是世界上最早对字体和版面进行科学实验的活动,也 是栅格系统最早的雏形.

 

作为设计师,相信没有不知道栅格系统的。但是如果去问是否会用,得到的答案大多都是否定的。之前也听很多前辈说,栅格系统并没有什么用,但是我在学习了之后,将其用在项目界面上,页面更加规整清晰了,做起来也轻松很多。

我也是前段时间才想要去深入了解一下栅格系统,于是查阅了很多资料并进行学习总结。主要从以下四个方面入手:

1、什么是栅格系统

2、如何设定栅格

3、栅格使用原则

4、实例分析

 

什么是栅格系统

栅格系统,又叫网格系统。顾名思义,就是用多条横竖交叉的线来组成规律的网格,或者是只有竖线组成的列阵。用以规范版面布局以及信息分布。最初用来辅助平面设计工作,它的出现对设计界有着深远的影响,现在被广泛应用在各种介质上,包括书籍设计、网页设计、以及移动端设计。我今天分析的主要是网页中的栅格系统。
栅格的使用对于作品来说,能让信息排布统一,有秩序美感,并提高内容的可读性;对于设计者来说,能够提高效率,降低斟酌犹豫的成本;并且,在网页设计中,使用网格系统对于前端开发来说也能更加的灵活规范。
 

如何设定栅格

栅格的好处我们都知道,但是要怎么用呢?一个完整的栅格系统包含什么元素?栅格的大小间距是固定还是可以自己设定的?以及如何去设置?带着这些问题往下看。栅格是由列、水槽构成。可以做成只有列阵的网格系统,也可以做成横竖交叉的网格系统。先来说只有列阵的网格。
由图片可知:版面宽度=(列宽+水槽宽)*列数知道了列宽、列数、水槽、版面的关系,再来看看如何设定数值:列数的设定:我们可以根据版面的需求设定列数。比如页面中多是大块的内容,我们就可以把列数设置的少一些,而如果是比较复杂的页面,或者是希望页面更加灵活,就可以适当增加列数。一般情况下,列数都是用2、4、6、12、24这样的偶数。水槽宽度:

水槽的宽度也不是固定不变,同样是根据版面的需求来设定。比如说追求版面利用率的产品,水槽宽度就可以小一点,而轻量简洁的页面,水槽宽度就可以设置大一些,增强呼吸感。基本上可以设置为8、10、12、16、20、24这样的数值。

计算列宽:

比如说要在网页上画一组栅格,版心设定为1200px。假定我们使用列数为12,水槽的宽度为20px,那么套用上面的公式计算出列宽:

(列宽+20px)*12=1200

得出:列宽=80px

复杂的页面我们还可以画横竖交叉的网格系统来指导排版。

我用的方法就是绘制好列阵网格之后,直接打组,复制之后90度旋转,然后再稍作调整,就完成了横竖交叉型网格绘制。

 

我们在做界面的时候,可以自己绘制网格,也可以借助一些工具。比如说用sketch做设计的话,就可以用它里面自带的网格工具。要确定版面、水槽、列宽和列数。同时也可以增加横列。
绘制好栅格之后,在排版的时候就要尽量按照栅格的布局走。要注意两个基本的原则: 

1)、模块要贴齐网格,占整数列

放置内容时,要贴齐列,从列开始到列结束,保证内容占整数列,且不会流于水槽之外。至于要占几列可以根据自己的内容灵活决定。

图片中可以看到右侧案例是贴齐水槽的,这样并不规整。也就失去了栅格存在的意义。

 

2)、模块内的内容可以不由栅格限制

我们在排版的时候要把内容看成是多个模块,不可能任何元素都能对齐网格。因此模块内的内容可以不用限制。

很多成熟的产品都有用网格系统来规范版面。下面我以京东商城和虾米音乐两个案例来分析网格系统的实际运用。
京东商城的网格使用的是比较规整的。它的版心是1200的宽度,但是我在测量的时候发现,实际有1190px。我认为是因为它的水槽设定是10px,列数是12,得出列宽=1200/12-10=90px。那么他的最右侧有一个水槽的宽度,因此实际宽度=1200px-10px=1190px。
虾米音乐的感觉就是年轻、时尚。它的界面就相对来说比较轻量,简洁,采用的大网格。它的水槽宽度是28px。但是这里我们可以看到,界面中的四个图标并没有按照网格进行排布。因为这里四个图标,如果严格贴合网格的话会比较别扭,不够均衡,因此他这里采用的等分排布。像这种情况我们就要灵活运用,不能生搬硬套,还是要根据版面需要适当调整。毕竟栅格是工具,用来辅助指导我们的界面排布,而不是禁锢我们的设计。 

 

划重点

1、栅格的设定是灵活的,要根据自己要做的版面的需求来定。如果都是大模块的内容,那么就可以设定大网格,如果页面相对复杂,或者是追求灵活的版面,网格就可以设置小一点。
2、根据栅格排版的时候,我们要记住两个原则:模块要贴齐网格占整数列;模块内的内容可以不受网格限制。
3、使用网格时避免生搬硬套,要根据我们的设计需要灵活运用,才能更好的指导我们的设计。

 

原文链接:海盐社(公众号)

作者:山竹屁

转载请注明:学UI网 » 网页中的栅格系统你了解么

登录收藏
 
你可能喜欢的:
一篇教程搞懂网页设计一篇教程搞懂网页设计
干货!让人一见钟情的网站header设计干货!让人一见钟情的网站header设计
别让我思考别让我思考
【干货】25个故事性网页设计,轻松讲述网页独有的故事!!!【干货】25个故事性网页设计,轻松讲述网页独有的故事!!!
设计好看,有本事设计中的数字也好看设计好看,有本事设计中的数字也好看
这次中秋节,这些店铺又玩成什么样了?这次中秋节,这些店铺又玩成什么样了?
卡片式设计流行的秘密 — 看完这15个案例你就懂了卡片式设计流行的秘密 — 看完这15个案例你就懂了
B端产品的交互设计流程探索——乐高设计法和用户体验的二次提升B端产品的交互设计流程探索——乐高设计法和用户体验的二次提升
掌握这五点,玩转动态页设计掌握这五点,玩转动态页设计
想让网站销量爆涨?你离成功只差一个出色的购物车设计想让网站销量爆涨?你离成功只差一个出色的购物车设计