国内最专业的IT技术学习网

UI设计

当前位置:主页 > UI设计 >

银河官网: 网页中的栅格系统你了解么

发布时间:2019/09/11标签:   网页设计      UI规范      网页设计规范    点击量:

原标题:银河官网: 网页中的栅格系统你了解么

  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)、模块要贴齐网格,占整数列

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

版权信息Copyright © 银河官网 版权所有    ICP备案编号:鲁ICP备09013610号