柵格化布局與黃金比例布局淺析——讓你的網頁具有數學科技美
前段時間在網絡上發(fā)現最近網絡上開始有很多人在討論柵格化的網頁布局，嗯。我也先介紹一下網頁柵格化的布局情況吧。
最早提出網頁柵格化的設計的人我忘記是誰了，但是應該是網頁還停留在780寬度的時候就聽說過柵格化的問題。從taobao ued的博客了解到
“1692年，新登基的法國國王路易十四感到法國的印刷水平強差人意，因此命令成立一個管理印刷的皇家特別委員會。他們的首要任務是設計出科學的、合理的，重視功能性的新字體。委員會由數學家尼古拉斯加宗（Nicolas Jaugeon）擔任領。之前兩天它導，他們以羅馬體為基礎，采用方格為設計依據，每個字體方格分為64個基本方各單位，每個方各單位再分成36個小格，這樣，一個印刷版面就有 2304個小格組成，在這個嚴謹的幾何網格網絡中設計字體的形狀，版面的編排，試驗傳達功能的效能，這是是世界上最早對字體和版面進行科學實驗的活動，也是柵格系統(tǒng)最早的雛形?！?/font>
嗯。簡單說來，網頁柵格化解決的問題即是網頁如何能最多的分割成為各種整數寬度的問題。。通過看上面的圖片大家應該基本可以了解到什么是網頁柵格化的設計，以上是950寬度的網頁設計。如果把30作為每個單獨的單元格的寬度，10作為每個單元格之間的寬度。那么950恰好可以分成24個小列，每個間隔10像素。
因此，這個就是網頁柵格化最簡單的一個解釋了。下面我想說另外一個問題，即使黃金分割。
把一條線段分割為兩部分，使其中一部分與全長之比等于另一部分與這部分之比。其比值是[5^(1/2)-1]/2，取其前三位數字的近似值是0.618。由于按此比例設計的造型十分美麗，因此稱為黃金分割，也稱為中外比。這是一個十分有趣的數字，我們以0.618來近似，通過簡單的計算就可以發(fā)現：
1/0.618=1.618
(1-0.61 / 0.618=0.618
這個數值的作用不僅僅體現在諸如繪畫、雕塑、音樂、建筑等藝術領域，而且在管理、工程設計等方面也有著不可忽視的作用。
如果細心一些的人會發(fā)現，黃金分割無所不在，包括拍張照片人物放在畫面的黃金分割點上也是一種很好的構圖方法。因此，黃金分割是一種公認最優(yōu)秀的分割比例。
因此如果以一個950寬度的網頁為例。最合適的分割比例其實是。
左側：950× 0.618 = 587
右側：950 × 0.382 =363
個人覺得黃金比例分割比柵格化靠譜很多，但是如果是一個門戶網站，需要很多的小區(qū)塊分割的網站，你要考慮倒柵格化的化，即是為了以后再分割考慮的化，那兩列的比例也應該是最接近的應該是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的高度。我們對比一下：
非常明顯，下面是最合適閱讀的一種比例。
在一些比例問題上，就討論到這里把。歡迎各抒己見。
