前段時間在網(wǎng)絡(luò)上發(fā)現(xiàn)最近網(wǎng)絡(luò)上開始有很多人在討論柵格化的網(wǎng)頁布局，嗯。我也先介紹一下網(wǎng)頁柵格化的布局情況吧。
最早提出網(wǎng)頁柵格化的設(shè)計的人我忘記是誰了，但是應(yīng)該是網(wǎng)頁還停留在780寬度的時候就聽說過柵格化的問題。從taobao ued的博客了解到
“1692年，新登基的法國國王路易十四感到法國的印刷水平強(qiáng)差人意，因此命令成立一個管理印刷的皇家特別委員會。他們的首要任務(wù)是設(shè)計出科學(xué)的、合理的， 重視功能性的新字體。委員會由數(shù)學(xué)家尼古拉斯加宗（Nicolas Jaugeon）擔(dān)任領(lǐng)導(dǎo)，他們以羅馬體為基礎(chǔ)，采用方格為設(shè)計依據(jù)，每個字體方格分為64個基本方各單位，每個方各單位再分成36個小格，這樣，一個印 刷版面就有 2304個小格組成，在這個嚴(yán)謹(jǐn)?shù)膸缀尉W(wǎng)格網(wǎng)絡(luò)中設(shè)計字體的形狀，版面的編排，試驗(yàn)傳達(dá)功能的效能，這是是世界上最早對字體和版面進(jìn)行科學(xué)實(shí)驗(yàn)的活動，也 是柵格系統(tǒng)最早的雛形。”
嗯。簡單說來，網(wǎng)頁柵格化解決的問題即是網(wǎng)頁如何能最多的分割成為各種整數(shù)寬度的問題。。通過看上面的圖片大家應(yīng)該基本可以了解到什么是網(wǎng)頁柵格化的設(shè)計，以上是950寬度的網(wǎng)頁設(shè)計。如果把30作為每個單獨(dú)的單元格的寬度，10作為每個單元格之間的寬度。那么950恰好可以分成24個小列，每個間隔10像素。
因此，這個就是網(wǎng)頁柵格化最簡單的一個解釋了。下面我想說另外一個問題，即使黃金分割。
把一條線段分割為兩部分，使其中一部分與全長之比等于另一部分與這部分之比。其比值是[5^(1/2)-1]/2，取其前三位數(shù)字的近似值是0.618。由于按此比例設(shè)計的造型十分美麗，因此稱為黃金分割，也稱為中外比。這是一個十分有趣的數(shù)字，我們以0.618來近似，通過簡單的計算就可以發(fā)現(xiàn)：
1/0.618=1.618
(1-0.61 / 0.618=0.618
這個數(shù)值的作用不僅僅體現(xiàn)在諸如繪畫、雕塑、音樂、建筑等藝術(shù)領(lǐng)域，而且在管理、工程設(shè)計等方面也有著不可忽視的作用。
如果細(xì)心一些的人會發(fā)現(xiàn)，黃金分割無所不在，包括拍張照片人物放在畫面的黃金分割點(diǎn)上也是一種很好的構(gòu)圖方法。因此，黃金分割是一種公認(rèn)最優(yōu)秀的分割比例。
因此如果以一個950寬度的網(wǎng)頁為例。最合適的分割比例其實(shí)是。
左側(cè)：950× 0.618 = 587
右側(cè)：950 × 0.382 =363
個人覺得黃金比例分割比柵格化靠譜很多，但是如果是一個門戶網(wǎng)站，需要很多的小區(qū)塊分割的網(wǎng)站，你要考慮倒柵格化的化，即是為了以后再分割考慮的化，那兩列的比例也應(yīng)該是最接近的應(yīng)該是590像素和360像素。
為什么呢？
590 = 14 × (30+10) + 30
360 = 9 × (30+10)
其實(shí)這個比例已經(jīng)幾乎等于黃金分割。因此這樣的使用比較好。
同時，黃金分割不僅僅體現(xiàn)在網(wǎng)頁的柵格化中,還體現(xiàn)在行高（line-height）上，一個網(wǎng)站的文字怎么樣的距離才是最合適閱讀的呢？這個是我一個困擾了很久的問題。
結(jié)果黃金分割很好的解決了我的問題。用中文最常見的12px宋體和14px宋體為例:
最合適閱讀的行高是12像素：12× 1.618=19.4 PX
最合適閱讀的行高是14像素：14× 1.618=22.7 PX
再舉個實(shí)際的例子，在豆瓣上目前的行高度是150%，因此12像素宋體是18像素的行高。如果換用1.618的高度。我們對比一下：
非常明顯，下面是最合適閱讀的一種比例。
在一些比例問題上，就討論到這里把。歡迎各抒己見。
粵公網(wǎng)安備 44010402000282號