栅格化的网页布局和0.618的关系

转自：http://dreamcog.yo2.cn/articles/%E6%A0%85%E6%A0%BC%E5%8C%96%E7%9A%84%E7%BD%91%E9%A1%B5%E5%B8%83%E5%B1%80%E5%92%8C0618%E7%9A%84%E5%85%B3%E7%B3%BB.html

 

前段时间在网络上发现最近网络上开始有很多人在讨论栅格化的网页布局，嗯。我也先介绍一下网页栅格化的布局情况吧。

最早提出网页栅格化的设计的人我忘记是谁了，但是应该是网页还停留在780宽度的时候就听说过栅格化的问题。从taobao ued的博客了解到

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

嗯。简单说来，网页栅格化解决的问题即是网页如何能最多的分割成为各种整数宽度的问题。。通过看上面的图片大家应该基本可以了解到什么是网页栅格化的设计，以上是950宽度的网页设计。如果把30作为每个单独的单元格的宽度，10作为每个单元格之间的宽度。那么950恰好可以分成24个小列，每个间隔10像素。

因此，这个就是网页栅格化最简单的一个解释了。下面我想说另外一个问题，即使黄金分割。
把一条线段分割为两部分，使其中一部分与全长之比等于另一部分与这部分之比。其比值是[5^(1/2)-1]/2，取其前三位数字的近似值是0.618。由于按此比例设计的造型十分美丽，因此称为黄金分割，也称为中外比。这是一个十分有趣的数字，我们以0.618来近似，通过简单的计算就可以发现：

1/0.618=1.618
(1-0.61 / 0.618=0.618

这个数值的作用不仅仅体现在诸如绘画、雕塑、音乐、建筑等艺术领域，而且在管理、工程设计等方面也有着不可忽视的作用。

如果细心一些的人会发现，黄金分割无所不在，包括拍张照片人物放在画面的黄金分割点上也是一种很好的构图方法。因此，黄金分割是一种公认最优秀的分割比例。

因此如果以一个950宽度的网页为例。最合适的分割比例其实是。

左侧：950× 0.618 = 587

右侧：950 × 0.382 =363

个人觉得黄金比例分割比栅格化靠谱很多，但是如果是一个门户网站，需要很多的小区块分割的网站，你要考虑倒栅格化的化，即是为了以后再分割考虑的化，那两列的比例也应该是最接近的应该是590像素和360像素。

为什么呢？

590 = 14 × (30+10) + 30

360 = 9 × (30+10)

其实这个比例已经几乎等于黄金分割。因此这样的使用比较好。

同时，黄金分割不仅仅体现在网页的栅格化中,还体现在行高（line-height）上，一个网站的文字怎么样的距离才是最合适阅读的呢？这个是我一个困扰了很久的问题。

结果黄金分割很好的解决了我的问题。用中文最常见的12px宋体和14px宋体为例:

最合适阅读的行高是12像素：12× 1.618=19.4 PX

最合适阅读的行高是14像素：14× 1.618=22.7 PX

再举个实际的例子，在豆瓣上目前的行高度是150%，因此12像素宋体是18像素的行高。如果换用1.618的高度。我们对比一下：

非常明显，下面是最合适阅读的一种比例。

在一些比例问题上，就讨论到这里把。欢迎各抒己见。