再谈网页栅格化

1692年,新登基的法国国王路易十四感到法国的印刷水平强差人意,因此命令成立一个管理印刷的皇家特别委员会。他们的首要任务是设计出科学的、合理的, 重视功能性的新字体。委员会由数学家尼古拉斯加宗(Nicolas Jaugeon)担任领导, 他们以罗马体为基础,采用方格为设计依据,每个字体方格分为64个基本方各单位,每个方各单位再分成36个小格,这样,一个印刷版面就有 2304个小格组成,在这个严谨的几何网格网络中设计字体的形状,版面的编排,试验传达功能的效能,这是世界上最早对字体和版面进行科学实验的活动,也是栅格系统最早的雏形。
随着设计理念和原理的不断发展,栅格化的运用也开始广泛起来。许多平面设计师在进行设计之前会先把栅格确定了,这样能够使设计作品更规范,也能提高效率。网页设计中如果运用栅格化,其实也是能够起到这些作用的。
1.栅格系统概述

栅格系统包括以下几个方面:流线、列、槽和外边距。列是栅格的主要单位,列和列之间由槽来区分,栅格的最两段由外边距包裹。

将栅格的总宽度标记为W, Column的宽度标记为c, Gutter宽度标记为g, Margin的宽度标记为m, Column的个数标记为N, 我们可以得到以下公式:
W = c * N + g * (N - 1) + 2 * m,一般来说,Gutter的宽度是Margin的两倍,上面的公式可以简化为:
W = c * N + g * (N - 1) + g = (c + g) * N,将c+g标记为C, 公式变得非常简单:
W = C *N
在网页设计中,由于网页都是居中显示的,所以margin部分的留白就显得不是那么重要了,因此一些网站设置栅格的时候就把margin去掉,这也是960px栅格和950px栅格的差别。
2.关于栅格系统中N的取值
我们知道一个宽度值拥有的约数越多,那个这个宽度能够建立的栅格系统就越多,设计就越灵活。比如20px与14px相比较,那么20px能够取的列值包括2、4 、5、10,而14px能够取的只有2、7,相较而言,20px就比14px更适合作为设计的宽度了。
以960px为例:
960可以分解为2的6次方乘以3和5, 这使得960可以分割成以下宽度的整数倍:
2, 3, 4, 5, 6, 8, 10, 12, 15, 16, 20, 24, 30, 32, 40,48, 60, 64, 80, 96, 120, 160, 192, 240, 320, 480
共26种(26 = 7 * 2 * 2 - 2, 减去2是去掉1和960自身),我们标记为:
N(960) = N(2^6 * 3 * 5) = 26
也就是说,960px可以建立26种栅格系统。
神奇的淘宝首页
了解了栅格的基本原理和N的取值,我们再来分析一下新版的淘宝首页。

上图是新版淘宝首页三栏式结构的宽度值,我们发现下面的规律:
•190/300=0.633
•300/490=0.612
而黄金分割比为0.618,也就是说淘宝首页三栏宽度能够完美的黄金分割,所以使得首页看起来很舒服。
按照刚才的栅格理论,我们把淘宝新首页的c、m、n、g推算出来:
•c=90 ,g=10, m=5, n=10
就是下图展示的:

那么淘宝的黄金分割比例又是怎么来的呢?
我们要引出一个很有意思的数列,斐波拉契数列:
1、2、3、5、8、13、21……
斐波拉契数列的特点是,从第三项开始每个数字都是前两项数字之和,而且相邻两项数字的比是黄金分割比。淘宝网的黄金分割比例旧书取得斐波拉契数列中的2、3、5三项。所以淘宝网栅格所定的n=2+3+5=10。
了解了这一点,我们就可以很方便的达到黄金分割比。网页首页改版前得960栅格,就是采用的斐波拉契数列的3、5、8数列段达到的黄金分割,此时的n=3+5+8=16,C=30,g=10,m=5。
随着显示器分辨率的增大,我们可以运用的斐波拉契数列段就会更多,比如5、8、13,那么n=5+8+13=26,如果c=30,m=10的话,那么总宽度W=(30+10)*26=1040px,除去m,我们可以得到的栅格宽度就是1030,这个宽度很适合1440分辨率的现实屏,不妨可以在网页改版的适合考虑。
综上,网页的栅格系统是设计规范化科学化的重要手段,她能够是设计师看似天马行空的灵感顿先找到更为科学、务实的落脚点,因此是十分值得研究的。笔者只是初窥端倪,希望此文能够抛砖引玉,引发大家对栅格理论的研究性质,让栅格多飞一会。

ttmass

Leave a Reply