http://www.piece2ec.com.tw/news.asp?ID=127 (詳閱)

欄格系統的形成

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

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

網頁設計 中的欄格系統

我給網頁欄格系統下的定義：以規則的網格陣列來指導和規範網頁中的版面佈局以及資訊分佈。

網頁欄格系統是從平面欄格系統中發展而來。對於網頁設計來說，欄格系統的使用，不僅可以讓網頁的資訊呈現更加美觀易讀，更具可用性。而且，對於前端開發來說，網頁將更加的靈活與規範。

欄格系統在現在的網頁設計中應用越來越多，從網絡上搜羅了一篇關於欄格系統應用的文章：30個最頂尖的基於欄格系統的博客 網站設計 。

欄格系統的設計原理及應用

那如何設計一個欄格系統？接下來我們將通過實例，詳細的介紹一下網頁欄格系統的原理與應用：

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

yahoo的網站設計頁面寬度W=950px，每個區塊與區塊的間隔i=10px；如果應用上面的公式，可以推出A=40px，既yahoo首頁橫向版式設計採用的欄格系統：
（40×n）- 10 = W
下面我們列出當n等於不同數值時W變化的數值表格。

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

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

當然只要你願意，我們可以衍生出任何一種欄格系統，只要改變A和i的值，這個根據網站的實際情況來制定。那如何選擇合適欄格系統，主要通過“構成 要素與程式、限制與選擇、構成要素的比例、組合、虛空間與組合、四邊聯系與軸的聯系、三的法則、圓與構成、水準構成這些設計元素規劃，來實現比例和諧的平面設計”。比較深奧，我們在這裏就不詳細闡述了。

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

轉貼來源：MiyaC的部落格觀察

參考文獻：

1.林永惟、宋同正 (2008), 商業平面設計之設計品質, 商業設計學報, 12(), 19-34.

2.戴軒廷、馬恆、張紹勳 (2004), 衡量網路廣告態度之指標建構, 台灣管理學刊, 4(1), 59-84.

3.李青蓉等編著.(1998).人機介面設計，台北縣：空大。