柵格系統(tǒng)的形成
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)最早的雛形。
柵格系統(tǒng)英文為“grid systems”，也有人翻譯為“網(wǎng)格系統(tǒng)”，其實(shí)是一回事。不過(guò)從定義上說(shuō)，柵格更為準(zhǔn)確些，從維基百科查到柵格的定義為：柵格設(shè)計(jì)系統(tǒng)（又稱(chēng)網(wǎng)格設(shè)計(jì) 系統(tǒng)、標(biāo)準(zhǔn)尺寸系統(tǒng)、程序版面設(shè)計(jì)、瑞士平面設(shè)計(jì)風(fēng)格、國(guó)際主義平面設(shè)計(jì)風(fēng)格），是一種平面設(shè)計(jì)的方法與風(fēng)格。運(yùn)用固定的格子設(shè)計(jì)版面布局，其風(fēng)格工整簡(jiǎn) 潔，在二戰(zhàn)后大受歡迎，已成為今日出版物設(shè)計(jì)的主流風(fēng)格之一。
網(wǎng)頁(yè)設(shè)計(jì)中的柵格系統(tǒng)
柵格系統(tǒng)有三個(gè)總類(lèi)，分別是：
960的寬度對(duì)于信息的閱讀比較友善（Joe Clark寫(xiě)了一篇屏幕閱讀時(shí)有關(guān)行長(zhǎng)的有趣文章）。種種因素使得Yahoo!最后采用了定寬布局（Tommy Olsson總結(jié)了 每種布局設(shè)計(jì)的優(yōu)缺點(diǎn) ）。
這里將只關(guān)注定寬布局，適用的場(chǎng)景是搭建復(fù)雜的門(mén)戶(hù)型網(wǎng)站。對(duì)于寬度自適應(yīng)布局和相應(yīng)的柵格系統(tǒng)，暫不討論（根據(jù)實(shí)現(xiàn)的技術(shù)手段不同，寬度自適應(yīng)布局又分為流體布局和彈性布局。我個(gè)人蠻喜歡彈性布局，以后有時(shí)間再研究）。
幾個(gè)術(shù)語(yǔ)和一個(gè)公式
一個(gè)標(biāo)準(zhǔn)的柵格系統(tǒng)，包括以下部分：
將Flowing的寬度標(biāo)記為W，Column的寬度標(biāo)記為c，Gutter寬度標(biāo)記為g，Margin的寬度標(biāo)記為m，Column的個(gè)數(shù)標(biāo)記為N，我們可以得到以下公式：
W=c*n+g(n-1)+2m
一遍來(lái)說(shuō)，Gutter是2倍的Magin，上面的公司可以簡(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)單吧。
950的來(lái)歷
具體應(yīng)用時(shí)，Margin其實(shí)是一個(gè)空白邊，從視覺(jué)上看并不屬于總寬度。不少柵格設(shè)計(jì)里習(xí)慣性地設(shè)定Gutter為10px, 這樣Margin就是5px. 可以集中將Margin集中放在一邊，也可以放在兩邊，但無(wú)論放在何處（這只影響技術(shù)實(shí)現(xiàn)、不影響設(shè)計(jì)），我們真正要關(guān)注的是去掉Margin之后的部分。這就是我們真正要關(guān)注的950！將W的寬度變?yōu)槿サ鬗argin的總寬度，公式變化為：
W=N*C-g
將上面的公式實(shí)例化一下：
950 = 12 * 80 - 10
950 = 16 * 60 - 10
950 = 24 * 40 - 10
上面三種切法，N越大，靈活度越高?？梢愿鶕?jù)網(wǎng)頁(yè)的實(shí)際復(fù)雜度來(lái)選用對(duì)應(yīng)的切法。
12*80
16*60
24*40
這里提供一個(gè)插件工具，安裝到Ps、Ai、Fw等可以幫助你的頁(yè)面自動(dòng)生成12、16、24Column的柵格系統(tǒng)。http://960.gs
在960 Grid System首頁(yè)中，展示了12*80的應(yīng)用。
柵格系統(tǒng)的優(yōu)勢(shì)：
提高網(wǎng)頁(yè)的規(guī)范性。在柵格系統(tǒng)下，頁(yè)面中所有組件的尺寸都是有規(guī)律的。這對(duì)于大型網(wǎng)站的開(kāi)發(fā)和維護(hù)來(lái)說(shuō)，能節(jié)約不少成本。
使網(wǎng)站布局保持一致。這能增加頁(yè)面的相似度，提升用戶(hù)體驗(yàn)。
對(duì)于設(shè)計(jì)師們來(lái)說(shuō)，靈活地運(yùn)用柵格系統(tǒng)，能做出很多優(yōu)秀和獨(dú)特的設(shè)計(jì)。（詳見(jiàn)《超越CSS》一書(shū)）
柵格系統(tǒng)的黃金分割
黃金分割歸結(jié)為數(shù)學(xué)問(wèn)題：對(duì)于長(zhǎng)度為1的線段，將其分成兩部分x和1-x，使得：
x/1=(1-x)/x
化為簡(jiǎn)單的二次方程：
X2+X-1=0
正數(shù)解為：
X=（sqrt(5)-1）/2~=0.618
這就是黃金分割。這個(gè)比例不僅僅出現(xiàn)在諸如繪畫(huà)、雕塑、音樂(lè)、建筑等藝術(shù)領(lǐng)域，在管理、工程設(shè)計(jì)等方面也有著不可忽視的作用。 （這是個(gè)自然界的魔數(shù)，類(lèi)似的還有真空光速、普朗克常數(shù)、精細(xì)結(jié)構(gòu)等等，感興趣的Google吧）。
對(duì)于 24 x 40 的情景，最接近黃金分割的兩欄布局是 350 : 590, 欄數(shù)比例為 9 : 15. 但實(shí)際使用時(shí)，因?yàn)檎瓩诮?jīng)常用來(lái)做導(dǎo)航或放輔助信息，并不需要350px這么寬。因此實(shí)際情況下經(jīng)常被采用的布局是：
高度方向上的柵格
N(560) = N(2^4 * 5 * 7) = 18560 / 960 ~= 0.583
N(560)比較大，同時(shí)可以讓高寬比接近黃金分割。針對(duì)560, 我們采用 14 x 40 柵格：
這樣，我們就在寬度和高度兩個(gè)方向上都實(shí)現(xiàn)了柵格化。
延伸閱讀：
Grids make eyes happy: how to use Grids by Jason Lynes
柵格愉悅視覺(jué)：如何使用柵格
Grids: Order Out of Chaos by About.com
柵格：從混亂到秩序
Cutting and sewing grid-based design: Part 1
裁剪+縫紉----基于柵格的設(shè)計(jì) Part1
Grid-based design: Part 2, Designing blog theme templates by Michael Angeles
設(shè)計(jì)Blog主題模版---基于柵格設(shè)計(jì) Part2
五步入門(mén)柵格系統(tǒng)設(shè)計(jì)
Five simple steps to designing grid systems - Preface
Five simple steps to designing grid systems - Part 1
Five simple steps to designing grid systems - Part 2
Five simple steps to designing grid systems - Part 3
Five simple steps to designing grid systems - Part 4
Five simple steps to designing grid systems - Part 5 by Mark Boulton
參考文獻(xiàn)
寫(xiě)點(diǎn)什么吧
3
作品
23
粉絲
4
關(guān)注
分享能獲取更多贊？
密碼登錄
大牛，別默默的看了，快登錄幫我點(diǎn)評(píng)一下吧！:)
登錄 立即注冊(cè)