首先澄清一個(gè)應(yīng)用場(chǎng)景問(wèn)題。研究（1）中指出，對(duì)于結(jié)構(gòu)復(fù)雜的網(wǎng)站，不少設(shè)計(jì)師們喜歡采用960固定寬度布局。但要注意的是，960并不是萬(wàn)能鑰匙，大部分網(wǎng)站沒(méi)有也不需要柵格系統(tǒng)。Amazon采用的是寬度自適應(yīng)布局，最大限度的呈現(xiàn)信息。Google更是簡(jiǎn)簡(jiǎn)單單，主題部分就一個(gè)列表。eBay的頁(yè)面非常簡(jiǎn)潔，商品頁(yè)面寬度自適應(yīng)，信息自然流暢，噪音少，購(gòu)物很踏實(shí)。類似的站點(diǎn)還有很多，對(duì)于這些站點(diǎn)來(lái)說(shuō)，寬度自適應(yīng)布局更受青睞。
有個(gè)很有意思的網(wǎng)站是Yahoo!, 看起來(lái)是固定寬度布局，實(shí)際上在CSS中只要去掉一行，就能搖身一變自適應(yīng)寬度了：
#page { width: 70em;}為什么Yahoo!最后選擇了定寬布局呢？這很可能是因?yàn)槎▽挷季直葘挾茸赃m應(yīng)布局更容易控制。對(duì)于結(jié)構(gòu)復(fù)雜的網(wǎng)站來(lái)說(shuō)，可維護(hù)性和可擴(kuò)展性非常重要。Yahoo!是以信息展示為主的門戶型網(wǎng)站，960的寬度對(duì)于信息的閱讀比較友善（Joe Clark寫了一篇屏幕閱讀時(shí)有關(guān)行長(zhǎng)的有趣文章）。種種因素使得Yahoo!最后采用了定寬布局（Tommy Olsson總結(jié)了每種布局設(shè)計(jì)的優(yōu)缺點(diǎn)）。
這里將只關(guān)注定寬布局，適用的場(chǎng)景是搭建復(fù)雜的門戶型網(wǎng)站。對(duì)于寬度自適應(yīng)布局和相應(yīng)的柵格系統(tǒng)，暫不討論（根據(jù)實(shí)現(xiàn)的技術(shù)手段不同，寬度自適應(yīng)布局又分為流體布局和彈性布局。我個(gè)人蠻喜歡彈性布局，以后有時(shí)間再研究）。
好了，已經(jīng)將范圍縮小到定寬布局的網(wǎng)頁(yè)柵格系統(tǒng)，那我們開(kāi)始吧。
還記得800×600的顯示器不？雖然才時(shí)隔幾年，感覺(jué)卻好像是上個(gè)世紀(jì)的事了。Mark Boulton做了最早的探索：
將750分割成均等的6份，這就形成了柵格系統(tǒng)，稍加組合劃分就形成了兩欄布局和三欄布局。Mark Boulton還研究了Gutter（垂直欄之間的間隙）對(duì)柵格的影響，有興趣的可以閱讀原文，或者跟著我往下看吧，下面將詳細(xì)闡述。
一個(gè)標(biāo)準(zhǔn)的柵格系統(tǒng)，包括以下部分：
W = c * N + g * (N - 1) + 2 * m
一般來(lái)說(shuō)，Gutter的寬度是Margin的兩倍，上面的公式可以簡(jiǎn)化為：
W = c * N + g * (N - 1) + g = (c + g) * N
將c+g標(biāo)記為C, 公式變得非常簡(jiǎn)單：
W = C * N
上面的公式就是柵格系統(tǒng)的基礎(chǔ)，很簡(jiǎn)單吧。
具體應(yīng)用時(shí)，Margin其實(shí)是一個(gè)空白邊，從視覺(jué)上看并不屬于總寬度。不少柵格設(shè)計(jì)里習(xí)慣性地設(shè)定Gutter為10px, 這樣Margin就是5px. 當(dāng)W為960，分割成6列時(shí)，柵格如下圖：
上圖的處理是左右Margin各為5px. 也可以將Margin集中放在一邊，比如右邊：
無(wú)論Margin放在何處（這只影響技術(shù)實(shí)現(xiàn)，不影響設(shè)計(jì)），我們真正要關(guān)注的是去除Margin之后的部分：
這就是我們要真正關(guān)注的950！將W的含義變?yōu)槿コ齅argin的總寬度，公式變化為：
W = N * C - g
將上面的公式實(shí)例化一下：
950 = 12 * 80 - 10950 = 16 * 60 - 10950 = 24 * 40 - 10
這就形成了960蛋糕的三種常見(jiàn)切法。
12 x 80
16 x 60
24 x 40
上面三種切法，N越大，靈活度越高?？梢愿鶕?jù)網(wǎng)頁(yè)的實(shí)際復(fù)雜度來(lái)選用對(duì)應(yīng)的切法。在960 Grid System首頁(yè)中，展示了12 x 80的應(yīng)用：
我們來(lái)看下 研究（1）中開(kāi)頭列舉的網(wǎng)站的柵格應(yīng)用情況。
Yahoo!是很標(biāo)準(zhǔn)的 24 x 40 柵格：
淘寶網(wǎng)目前只有商城上部分使用了柵格系統(tǒng)（大的兩欄布局遵守了 24 x 40 的柵格化，主體部分使用的另一套740的柵格劃分）：
網(wǎng)易很不錯(cuò)，采用的是 16 x 60 的柵格系統(tǒng)：
研究（1）中的其它站點(diǎn)都沒(méi)有真正嚴(yán)格地采用柵格系統(tǒng)。
上面的“發(fā)現(xiàn)”是讓人有點(diǎn)沮喪的。目前嚴(yán)格采用柵格系統(tǒng)的站點(diǎn)非常少，為什么我們還要努力的讓網(wǎng)頁(yè)柵格化呢？
柵格系統(tǒng)具有以下優(yōu)勢(shì)：
對(duì)于大型網(wǎng)站來(lái)說(shuō)，我相信柵格化將是一種潮流和趨勢(shì)。
下面討論柵格系統(tǒng)中的黃金分割。
黃金分割可以歸結(jié)為數(shù)學(xué)問(wèn)題：對(duì)于長(zhǎng)度為1的線段，將其分成兩部分 x 和 1 – x, 使得：
x / 1 = (1 - x) / x
化為簡(jiǎn)單的二次方程：
x^2 + x - 1 = 0
正數(shù)解為：
x = (sqrt(5) - 1) / 2 ~= 0.618
這就是黃金分割。這個(gè)比例不僅僅出現(xiàn)在諸如繪畫(huà)、雕塑、音樂(lè)、建筑等藝術(shù)領(lǐng)域，在管理、工程設(shè)計(jì)等方面也有著不可忽視的作用。 （這是個(gè)自然界的魔數(shù)，類似的還有真空光速、普朗克常數(shù)、精細(xì)結(jié)構(gòu)等等，感興趣的Google吧）
在平面設(shè)計(jì)領(lǐng)域，黃金分割點(diǎn)被廣泛采用。比如下面這種圖：
數(shù)一數(shù)上面有多少黃金分割？
對(duì)于960柵格，實(shí)際寬度是950. 兩欄布局時(shí)，黃金分割為：
對(duì)于 24 x 40 的情景，最接近黃金分割的兩欄布局是 350 : 590, 欄數(shù)比例為 9 : 15. 但實(shí)際使用時(shí)，因?yàn)檎瓩诮?jīng)常用來(lái)做導(dǎo)航或放輔助信息，并不需要350px這么寬。因此實(shí)際情況下經(jīng)常被采用的布局是：
上面講的都是寬度方向上的柵格化，下面我們看看高度方向上如何應(yīng)用。
還記得研究（1）中那張紅紅的很刺眼的圖嗎？注意高度值560也是很神奇的。
N(560) = N(2^4 * 5 * 7) = 18560 / 960 ~= 0.583
N(560)比較大，同時(shí)可以讓高寬比接近黃金分割。針對(duì)560, 我們采用 14 x 40 柵格：
這樣，我們就在寬度和高度兩個(gè)方向上都實(shí)現(xiàn)了柵格化。
下一篇將詳細(xì)闡述960柵格系統(tǒng)的模塊化應(yīng)用。
聯(lián)系客服
