?Liya - 2015年8月31日
當(dāng)女神潘潘導(dǎo)師問我是否了解網(wǎng)頁設(shè)計(jì)中的柵格系統(tǒng)片部，為什么要使用柵格系統(tǒng)時(shí)，腦中能想到的只有，“遵循柵格使網(wǎng)頁看起來整齊規(guī)范”财骨，“方便重構(gòu)”，“有利于響應(yīng)式布局”藏姐。隆箩。。其實(shí)對(duì)柵格系統(tǒng)只是一知半解羔杨，并沒有系統(tǒng)深入的理解捌臊，于是做了些功課，整理出這篇文章兜材，希望能給新接觸網(wǎng)頁設(shè)計(jì)的小伙伴們一點(diǎn)參考理澎。
柵格系統(tǒng)的形成
柵格系統(tǒng)（Grid system）最早使用在17世紀(jì)末的法國(guó)印刷業(yè)，出版業(yè)曙寡。維基百科對(duì)其定義為：柵格設(shè)計(jì)系統(tǒ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)格。網(wǎng)頁柵格系統(tǒng)是有平面柵格系統(tǒng)中發(fā)展而來镀琉，以規(guī)則的網(wǎng)格陣列來指導(dǎo)和規(guī)范網(wǎng)頁中的版面布局以及信息分布峦嗤。
柵格系統(tǒng)的原理
柵格系統(tǒng)可以按柵格數(shù)分為12列，16列屋摔，24列等忆家，可以自由設(shè)計(jì)柵格寬度和柵格與柵格間寬度。如下圖所示厕妖，記頁面或區(qū)塊寬度為W橙喘，A代表一個(gè)柵格單元的寬度，a代表一個(gè)柵格的寬度亚侠，i為柵格與柵格之間的距離曹体，n為正整數(shù)，則有W=(a＊n)+(n-1)*i,由于A=a+i硝烂，可得（A＊n）-i=W箕别。
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?（A*n）-i = W
這個(gè)公式表述了網(wǎng)頁的布局與網(wǎng)頁背后柵格系統(tǒng)之間的關(guān)系。來觀察經(jīng)典的雅虎案例：
Yahoo的網(wǎng)站頁面寬度為W=950px滞谢，每個(gè)區(qū)塊與區(qū)塊的間隔為i=10px串稀；如果應(yīng)用上面的公式，可以推出A=40px狮杨，既Yahoo首頁橫向版式設(shè)計(jì)采用的柵格系統(tǒng)為：（40×n）- 10 = W母截。只要保證一個(gè)橫向維度的各個(gè)區(qū)塊的n值相加等于24，即可保證頁面的寬度一定是950px橄教，950px的寬度也恰好就是當(dāng)n=24的時(shí)候清寇，W的寬度值。
在柵格系統(tǒng)中护蝶，設(shè)計(jì)師根據(jù)需要指定不同的版式或者劃分區(qū)塊改變A和i的值進(jìn)行設(shè)計(jì)华烟，這樣，一個(gè)柵格系統(tǒng)的應(yīng)用就從此開始了持灰。
經(jīng)典960柵格
設(shè)計(jì)師們偏愛用蘋果系統(tǒng)做設(shè)計(jì)盔夜，蘋果下瀏覽器的默認(rèn)寬度為960px, 在 1024 x 768 的分辨率下，我們?cè)俅蜷_Firefox堤魁，自然狀態(tài)下喂链，F(xiàn)irefox窗體的大小約為 974 x 650. 減掉左右兩邊7px的邊框，網(wǎng)頁的實(shí)際大小為上圖中的紅色部分姨涡，高寬為 960 x 650.有趣的960就這樣出現(xiàn)了衩藤。960只是個(gè)符號(hào)，并不是標(biāo)準(zhǔn)數(shù)涛漂。
上面列舉的都是大型門戶網(wǎng)站赏表，它們的首頁寬度為950px/960px检诗。除了微軟的Live Search。根據(jù)上面的簡(jiǎn)單分析可以認(rèn)為：當(dāng)搭建頁面結(jié)構(gòu)復(fù)雜的門戶型網(wǎng)站時(shí)瓢剿，開發(fā)工程師們不約而同地都選擇將頁面寬度定為950px/960px逢慌。為什么要選擇這個(gè)寬度呢？我們從數(shù)學(xué)著手：960可以分解為2的6次方乘以3和5, 這使得960可以分割成以下寬度的整數(shù)倍：
2, 3, 4, 5, 6, 8, 10, 12, 15, 16, 20, 24, 30, 32, 40, 48, 60, 64, 80, 96, 120, 160, 192, 240, 320, 480
共26種（26 = 7 * 2 * 2 – 2, 減去2是去掉1和960自身）间狂，我們標(biāo)記為：
N(960) = N(2^6 * 3 * 5) = 26
根據(jù)上面的算法攻泼，可以得到：
N(360) = N(2^3 * 3^2 * 5) = 22
N(480) = N(2^5 * 3 * 5) = 22
N(720) = N(2^4 * 3^2 * 5) = 28
N(750) = N(2 * 3 * 5^3) = 14
N(800) = N(2^5 * 5^2) = 16
N(960) = N(2^6 * 3 * 5) = 26
N(1000) = N(2^3 * 5^3) = 14
N(1024) = N(2^10) = 9
N(1440) = N(2^6 * 3^2 * 5) = 34
N(1920) = N(2^7 * 3 * 5) = 30
N越大，可組合的寬度值就越多鉴象。對(duì)柵格系統(tǒng)來說忙菠，這意味著越靈活。
目前絕大多數(shù)顯示器都支持 1024 x 768 及其以上分辨率纺弊。為了有效的利用屏幕寬度同時(shí)保證柵格的靈活度牛欢，可以看出960是非常合適的。這樣淆游，在目前主流顯示器下傍睹，960就成為網(wǎng)頁柵格系統(tǒng)中的最佳寬度了，也許不久的將來犹菱，將會(huì)流行1440拾稳。
使用柵格系統(tǒng)的優(yōu)勢(shì)
對(duì)于設(shè)計(jì)師來說，柵格系統(tǒng)更多的是一種布局思想腊脱，可以更有邏輯地進(jìn)行設(shè)計(jì)工作访得。靈活地運(yùn)用柵格系統(tǒng)，不僅可以讓整個(gè)網(wǎng)站各個(gè)頁面的布局保持一致虑椎，讓網(wǎng)頁的信息呈現(xiàn)更加美觀易讀震鹉，讓設(shè)計(jì)稿有更好的結(jié)構(gòu)，更可以通過匹配不同組合捆姜，做出很多優(yōu)秀和獨(dú)特的排版設(shè)計(jì)。使用網(wǎng)格系統(tǒng)迎膜，可以使網(wǎng)頁設(shè)計(jì)給用戶正式感和規(guī)范感泥技，還具有一種結(jié)構(gòu)分明的設(shè)計(jì)感，提升用戶體驗(yàn)磕仅。網(wǎng)格系統(tǒng)不意味著循規(guī)蹈矩珊豹，一味按照網(wǎng)格線來進(jìn)行布局。網(wǎng)格系統(tǒng)的意義在于更靈活的幫助設(shè)計(jì)師有序布局榕订，而不是限制設(shè)計(jì)師的設(shè)計(jì)店茶。
對(duì)于前端開發(fā)人員來說，柵格系統(tǒng)的使用劫恒，給整個(gè)網(wǎng)站的頁面結(jié)構(gòu)定義了一個(gè)標(biāo)準(zhǔn)贩幻，大大提高了網(wǎng)頁的規(guī)范性轿腺。在柵格系統(tǒng)下，頁面中所有組件的尺寸都是有規(guī)律的可重用的丛楚，這對(duì)于大型網(wǎng)站的開發(fā)和維護(hù)來說族壳，能節(jié)約不少成本。
隨著響應(yīng)式設(shè)計(jì)的流行趣些，柵格系統(tǒng)開始被賦予新的意義仿荆，那就是，一種響應(yīng)式設(shè)計(jì)的實(shí)現(xiàn)方式坏平。響應(yīng)式的要點(diǎn)是為同一個(gè)頁面設(shè)計(jì)多種布局形態(tài)拢操，分別適配不同屏幕尺寸的設(shè)備。
可以看到舶替，一個(gè)頁面可以拆分成多個(gè)區(qū)塊來理解庐冯，而正是這些區(qū)塊共同構(gòu)成了這個(gè)頁面的布局。根據(jù)不同的屏幕尺寸情況坎穿，調(diào)整這些區(qū)塊的排版展父，就可以實(shí)現(xiàn)響應(yīng)式設(shè)計(jì)。而借助柵格系統(tǒng)玲昧，設(shè)計(jì)與前端開發(fā)人員可以很容易的設(shè)計(jì)和創(chuàng)建響應(yīng)式的頁面布局栖茉。
柵格系統(tǒng)是一種格式化的設(shè)計(jì)工具，使用柵格系統(tǒng)是一種好的習(xí)慣孵延，設(shè)計(jì)師可以更專注于內(nèi)容呈遞吕漂，更專注于強(qiáng)調(diào)重點(diǎn)。當(dāng)然尘应，規(guī)矩是用來打破的惶凝，當(dāng)我們理解了布局的理念，掌握了柵格的手法之后犬钢，也無需拘泥于柵格的形式苍鲜，可以對(duì)其“革命”，進(jìn)行創(chuàng)新玷犹。
資源干貨
對(duì)于新手來說混滔，使用柵格系統(tǒng)有一定的成本，需要數(shù)學(xué)基礎(chǔ)歹颓，懂比例坯屿，會(huì)計(jì)算，但現(xiàn)在網(wǎng)絡(luò)上已經(jīng)有很多幫助設(shè)計(jì)柵格系統(tǒng)的工具和模版巍扛，可以即拿即用领跛。這里介紹幾個(gè)常用工具。
960.GS
使用960.GS應(yīng)該是最簡(jiǎn)單的柵格方法撤奸，下載960柵格系統(tǒng)吠昭，地址http://960.gs/合并圖層喊括，置入網(wǎng)頁文件，選擇混合模式疊加怎诫，并鎖定瘾晃，便可以按照其柵格設(shè)計(jì)網(wǎng)頁。
GuideGuide
這個(gè)是免費(fèi)的好用PS外掛幻妓，輸入數(shù)值就會(huì)自動(dòng)畫參考線蹦误。在設(shè)計(jì)網(wǎng)頁前先將參考線全部拉出來。至于如何安裝和操作方式肉津，網(wǎng)絡(luò)上已經(jīng)很多人寫了强胰，可以參考這里：PS 參考線插件GUIDEGUIDE下載及使用說明
WebZap
另一款PS外掛神器，但是要付費(fèi)妹沙，擁有強(qiáng)大的布局產(chǎn)生器偶洋，可只通過點(diǎn)擊操作，在幾分鐘內(nèi)做出網(wǎng)頁原型距糖。下載和演示地址：http://webzap.uiparade.com/
參考文章
Grid的運(yùn)用：ps外掛
網(wǎng)頁的柵格系統(tǒng)設(shè)計(jì)
網(wǎng)頁設(shè)計(jì)中的960柵格系統(tǒng)
