2013年01月21日

栅格化布局

Filed under: — cmpan @ 2013-01-21 10:54:58

栅格化布局样式表生成工具

有些前端设计师使用div+css布局的时候,每次做页面都要花大量的时间去写布局的样式,再用n个浏览器来轮个遍去测试布局是否能兼容浏览器。这样把大把的青春花在布局上,感叹着table布局的便利。其实这个是很容易解决的。如果你碰到了这样的问题,并且还没有解决的,请继续往下看就很容易搞定了。

我们的解决方案叫做:网页栅格化布局

什么是网页栅格化布局呢?

把页面等分成N个小的模块,每等份的宽度是Xpx,不同个数的模块组合成不同的栏目宽度,分别是:(1*X)px,(2*X)px、(3*X)px、……、(N*X)px。而页面的宽度就是W = (N*X)px。我们把这些(1*X)px,(2*X)px、(3*X)px、……、(N*X)px分别作为一个样式,我们布局的时候只要套用这几个样式就可以很快的把整个复杂的网页布局好了。这就是传说中的栅格化布局。别讨厌我故弄玄虚列出这么些小学水平的公式来,列出这些公式是要说明,我们在样式表里设定的样式宽度是根据这么个简单公式得出的值。

为什么使用栅格化布局?

这里说明了栅格化布局是什么,从这里我们也很容易了解为什么我们要用栅格化布局,因为栅格化布局,我们做布局的时候,只需要把用于这些个不同个栅格数的模块组合成不同的栏目宽度的样式套到div中就可以了,这样,优点可归结为:

  1. 能大大提高网页的规范性,提高开发速度和减少维护成本。在栅格系统下,页面中所有组件的尺寸都是有规律的。这对于大型网站的开发和维护来说,能节约不少成本。
  2. 基于栅格进行设计,可以让整个网站各个页面的布局保持一致。这能增加页面的相似度,提升用户体验。
  3. 减少布局不兼容

栅格设计的特点是重视比例、秩序、连续感, 以及对存在于版面上的元素进行规划、组合、保持平衡或者打破平衡,以便让信息可以更快速、更便捷、更系统和更有效率的读取;另外最重要的一点是,负空间的规划(即:留白)也是栅格系统设计当中非常重要的部分。

你可能会说,如果我需要布局的区块的宽度在这些样式中不适合,这啥办?
这时候,页面布局的规范就起作用了。我们划分栅格的时候,选择划分成比较容易组合成各种比例的宽度,如果没有适合页面使用宽度的布局,只需要将就一下栅格化布局的样式,这样开发比较快、以后页面维护成本也低很多,实在需要比较特殊的布局,在区块中使用绝对定位就能解决了。我们这里的栅格化只是定了大的布局而已,细节的样式是没有限制的。
页面宽度 W = N*X 像素(N和X分别为前面说的,N是把页面分成N等份,X是每等份的宽度)。很多网站使用960px宽,当N=24, X=40px的时候,W=960。我们把网页宽度切分成24个等份,每份宽40px,总共页面宽度就是960px了。
但是我们网页中每个区块都会有间距,如果我们把间距也加入到栅格中,则如下图:

Yahoo!是很标准的 24 x 40 栅格。
把区块间距加进来以后,每个栅格的宽度由栅格内的内容宽度(宽y)和栅格右边的空白(宽z)组成,每个栅格宽、X=(y+z),而每个栅格右边都加上空白部分,到最后一个栅格的时候,就多出了一个空白,因此我们需要把最后一个栅格右边的空白去掉。由此得 页面宽度 W = N*(y+z)-z=N*X-z=(栅格数*栅格宽-栅格间距)。阿里巴巴和淘宝都是划分栅格数N=24个,栅格宽X=40px,栅格间距z=8 px,页面宽度 W=N*X-z= 24*40-8 =952px。

建议栅格划分:分成24个栅格,每个栅格宽40px,栅格间距8px,页宽952px。

如果你要最求灵活,可以用W=N*X-z=48*20-8=96*10-8 把栅格划分更细。

为什么这么划分呢?

很明显 24 = 2*12 = 3*8 = 4*6,我们可以把划分出的这些小格组成页面宽度 1/2、1/3、1/4、1/6、1/8、1/12、1/24的区块,布局样式的使用和调整更灵活。

8px栅格间距作为布局紧凑的电子商务网站比较合适,机器比较热衷于2n的数据。

 

如果你是视觉设计师,你可能会气愤的说:这不是在扼杀视觉设计师创作的自由发挥吗?

这个你不用担心,有些人还提出每个区块的高度也搞栅格化,如果这样的话对视觉设计影响的确很大。但我们只要不对高进行栅格化,对视觉设计师的设计几乎没影响。这只是相当于要求设计师把页面设计成分2列、3列还是4列6列的布局而已,视觉设计师不确定这些比例的区块该用多少像素的宽度的时候使,我们给他们提供了几个可选的值而已。复杂的电子商务网站首页的布局不能像游戏原型图或者是平面广告,任由视觉设计师怎样发挥都行,而是设计主要是为了展现信息,而不是为了表现意境。

上面说了一大通了,来点实际的吧。为了方便布局样式的实际使用,我在这里写了个小工具,

Demo:栅格化布局样式表生成工具

分享到:
Copyright © 2009 流水孟春 版权所有
Web技术,LAMP,Nginx,Web2.0,前端技术
Powered by WordPress & UI Designed by 流水孟春