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