柵格化你的網(wǎng)頁

柵格系統(tǒng)的形成

1692年，新登基的法國國王路易十四感到法國的印刷水平差強人意，因此命令成立一個管理印刷的皇家特別委員會。他們的首要任務是設計出科學的、合理的， 重視功能性的新字體。委員會由數(shù)學家尼古拉斯加宗（Nicolas Jaugeon）擔任領導，他們以羅馬體為基礎，采用方格為設計依據(jù)，每個字體方格分為64個基本方各單位，每個方各單位再分成36個小格，這樣，一個印 刷版面就有 2304個小格組成，在這個嚴謹?shù)膸缀尉W(wǎng)格網(wǎng)絡中設計字體的形狀，版面的編排，試驗傳達功能的效能，這是是世界上最早對字體和版面進行科學實驗的活動，也 是柵格系統(tǒng)最早的雛形。

柵格系統(tǒng)英文為“grid systems”，也有人翻譯為“網(wǎng)格系統(tǒng)”，其實是一回事。不過從定義上說，柵格更為準確些，從維基百科查到柵格的定義為：柵格設計系統(tǒng)（又稱網(wǎng)格設計系統(tǒng)、標準尺寸系統(tǒng)、程序版面設計、瑞士平面設計風格、國際主義平面設計風格），是一種平面設計的方法與風格。運用固定的格子設計版面布局，其風格工整簡潔，在二戰(zhàn)后大受歡迎，已成為今日出版物設計的主流風格之一。

網(wǎng)頁設計中的柵格系統(tǒng)?
我給網(wǎng)頁柵格系統(tǒng)下的定義為：以規(guī)則的網(wǎng)格陣列來指導和規(guī)范網(wǎng)頁中的版面布局以及信息分布。
網(wǎng)頁柵格系統(tǒng)是從平面柵格系統(tǒng)中發(fā)展而來。對于網(wǎng)頁設計來說，柵格系統(tǒng)的使用，不僅可以讓網(wǎng)頁的信息呈現(xiàn)更加美觀易讀，更具可用性。而且，對于前端開發(fā)來說，網(wǎng)頁將更加的靈活與規(guī)范。

柵格系統(tǒng)在現(xiàn)在的網(wǎng)頁設計中應用越來越多，從網(wǎng)絡上搜羅了一篇關于柵格系統(tǒng)應用的文章：30個最頂尖的基于柵格系統(tǒng)的博客網(wǎng)站設計。

柵格系統(tǒng)的設計原理及應用
那么如何設計一個柵格系統(tǒng)？接下來我們將通過實例，詳細的介紹一下網(wǎng)頁柵格系統(tǒng)的原理與應用：

在網(wǎng)頁設計中，我們把寬度為“W”的頁面分割成n個網(wǎng)格單元“a”，每個單元與單元之間的間隙設為“i”,此時我們把“a+i”定義“A”。他們之間的關系如下：
W =（a×n）+（n-1）i
由于a+i=A，
可得：(A×n) – i = W
這個公式表述了網(wǎng)頁的布局與網(wǎng)頁“背后”的柵格系統(tǒng)之間的某種關系。我們拿yahoo作例，來看一下柵格系統(tǒng)的應用：

yahoo的網(wǎng)站頁面寬度為W=950px，每個區(qū)塊與區(qū)塊的間隔為i=10px；如果應用上面的公式，可以推出A=40px，既yahoo首頁橫向版式設計采用的柵格系統(tǒng)為：
（40×n）- 10 = W
下面我們列出當n等于不同數(shù)值時W變化的數(shù)值表格 ：

從表格可以看出：yahoo首頁的布局完全是按照柵格系統(tǒng)進行設計的，每個區(qū)塊的寬度對應的n值分別為：4，11，9。在這里我們看到一個很有意思 的事情：只要保證一個橫向維度的各個區(qū)塊的n值相加等于24，則即可保證頁面的寬度一定是950px。然而，950px的寬度也恰好就是當n=24的時 候，W的寬度值。由此我們得出以下的應用模式：

在柵格系統(tǒng)中，設計師根據(jù)需要制定不同的版式或者劃分區(qū)塊，他們的依據(jù)將是上面的那張對應表進行設計。這樣，一個柵格系統(tǒng)的應用就從此開始了。我們 看到，使用柵格系統(tǒng)的網(wǎng)頁設計，非常的有條理性；看上去也很舒服。最重要的是，它給整個網(wǎng)站的頁面結構定義了一個標準。對于視覺設計師來說，他們不用再為 設計一個網(wǎng)站每個頁面都要想一個寬度或高度而煩惱了。對于前端開發(fā)工程師來說，頁面的布局設計將完全是規(guī)范的和可重用的，這將大大節(jié)約了開發(fā)成本。對于內 容編輯或廣告銷售來說，所有的廣告都是規(guī)則的，通用的，他們再也不用做出一套N張不同尺寸的廣告圖了……

當然只要你愿意，我們可以衍生出任何一種柵格系統(tǒng)，只要改變A和i的值，這個根據(jù)網(wǎng)站的實際情況來制定。那么如何選擇合適柵格系統(tǒng)，主要通過“構成 要素與程序、限制與選擇、構成要素的比例、組合、虛空間與組合、四邊聯(lián)系與軸的聯(lián)系、三的法則、圓與構成、水平構成這些設計元素規(guī)劃，來實現(xiàn)比例和諧的平 面設計”。比較深奧，我們在這里就不詳細闡述了。

呵呵，說了一堆柵格系統(tǒng)的優(yōu)點。大家可能會問：難道柵格系統(tǒng)真的是完美的么？答案是否定的：對于內容信息不確定導致高度不確定的頁面，在高度層面上就無法做到柵格了。當然，具體的情況還需具體的分析與解決，這就需要設計師們在實際的應用中不斷的總結經驗，不斷實踐了。

本文轉載自：http://ued.taobao.com/blog/2008/09/grid_systems/

 
================關于優(yōu)設網(wǎng)================
"優(yōu)設網(wǎng)uisdc.com"是一個分享網(wǎng)頁設計、無線端設計以及PS教程的干貨網(wǎng)站。
【特色推薦】
設計講座：每月邀請國內互聯(lián)網(wǎng)公司設計前輩及行業(yè)總監(jiān)在群內及YY語音（YY頻道：15335158）分享實戰(zhàn)經驗。
設計微博：擁有粉絲量27萬的人氣微博@優(yōu)秀網(wǎng)頁設計 ，歡迎關注獲取網(wǎng)頁設計資源、下載頂尖設計素材。
設計導航：全球頂尖設計網(wǎng)站推薦，設計師必備導航：http://hao.uisdc.com
———————————————————–
想在手機上、被窩里獲取設計教程、經驗分享和各種意想不到的"福利"嗎？
添加 優(yōu)秀網(wǎng)頁設計 微信號：【youshege】優(yōu)設哥的全拼
您也可以通過掃描下方二維碼快速添加：