内容正在载入中,请稍后……
公告
搜索
统计
其他
28 Jun.2012

栅格化研究总结(二) 阴

作者: 我就是个世界   分类:管理策划   出处:CSS库吧            | |
  

在上一篇《栅格化研究总结前析》中,我们已经做了初步了解,下面我们继续来学习:

一个标准的栅格系统,包括以下部分:

将Flowline的总宽度标记为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

上面的公式就是栅格系统的基础,很简单吧。

950的来历

具体应用时,Margin其实是一个空白边,从视觉上看并不属于总宽度。不少栅格设计里习惯性地设定Gutter为10px, 这样Margin就是5px. 当W为960,分割成6列时,栅格如下图:

Highslide JS


上图的处理是左右Margin各为5px. 也可以将Margin集中放在一边,比如右边:

Highslide JS


无论Margin放在何处(这只影响技术实现,不影响设计),我们真正要关注的是去除Margin之后的部分:

Highslide JS


这就是我们要真正关注的950!将W的含义变为去除Margin的总宽度,公式变化为:

W = N * C - g

将上面的公式实例化一下:

950 = 12 * 80 - 10950 = 16 * 60 - 10950 = 24 * 40 - 10

这就形成了960蛋糕的三种常见切法。

12 x 80

Highslide JS


16 x 60

Highslide JS


24 x 40

Highslide JS


上面三种切法,N越大,灵活度越高。可以根据网页的实际复杂度来选用对应的切法。在960 Grid System首页中,展示了12 x 80的应用:

Highslide JS


我们来看下 研究(1)中开头列举的网站的栅格应用情况。

Yahoo!是很标准的 24 x 40 栅格:

Highslide JS


淘宝网目前只有商城上部分使用了栅格系统(大的两栏布局遵守了 24 x 40 的栅格化,主体部分使用的另一套740的栅格划分):

Highslide JS


网易很不错,采用的是 16 x 60 的栅格系统:

Highslide JS


栅格系统的优势

上面的“发现”是让人有点沮丧的。目前严格采用栅格系统的站点非常少,为什么我们还要努力的让网页栅格化呢?

栅格系统具有以下优势:

能大大提高网页的规范性。在栅格系统下,页面中所有组件的尺寸都是有规律的。这对于大型网站的开发和维护来说,能节约不少成本。

基于栅格进行设计,可以让整个网站各个页面的布局保持一致。这能增加页面的相似度,提升用户体验。

对于设计师们来说,灵活地运用栅格系统,能做出很多优秀和独特的设计。(详见《超越CSS》一书)

对于大型网站来说,我相信栅格化将是一种潮流和趋势。

下面讨论栅格系统中的黄金分割。

黄金分割

黄金分割可以归结为数学问题:对于长度为1的线段,将其分成两部分 x 和 1 - x, 使得:

x / 1 = (1 - x) / x

化为简单的二次方程:

x^2 + x - 1 = 0

正数解为:

x = (sqrt(5) - 1) / 2 ~= 0.618

这就是黄金分割。这个比例不仅仅出现在诸如绘画、雕塑、音乐、建筑等艺术领域,在管理、工程设计等方面也有着不可忽视的作用。 (这是个自然界的魔数,类似的还有真空光速、普朗克常数、精细结构等等,感兴趣的Google吧)

在平面设计领域,黄金分割点被广泛采用。比如下面这种图:

Highslide JS


数一数上面有多少黄金分割?

960栅格,实际宽度是950. 对于 24 x 40 的情景,最接近黄金分割的两栏布局是 350 : 590, 栏数比例为 9 : 15:

Highslide JS


但实际使用时,因为窄栏经常用来做导航或放辅助信息,并不需要350px这么宽。因此实际情况下经常被采用的布局是:

Highslide JS


上面讲的都是宽度方向上的栅格化,下面我们看看高度方向上如何应用。

高度方向上的栅格

还记得研究(1)中那张红红的很刺眼的图吗?注意高度值560也是很神奇的。

N(560) = N(2^4 * 5 * 7) = 18560 / 960 ~= 0.583

N(560)比较大,同时可以让高宽比接近黄金分割。针对560, 我们采用 14 x 40 栅格:

Highslide JS


这样,我们就在宽度和高度两个方向上都实现了栅格化。

栅格化理解了,来看看如何进行栅栏布局模块化命名 分享到QQ空间
最后编辑: 我就是个世界 编辑于June 28, 2012 10:43
时间:10:42 评论(0) 引用(0) 阅读(3298) Tags: , , ,
发表评论
  昵称 [注册]
  密码 (游客无需密码)
  网址
  电邮
OpenID登入 权限选项 表情