萬盛學電腦網

 萬盛學電腦網 >> 網頁制作 >> 交互設計 >> 網頁設計中的柵格系統

網頁設計中的柵格系統

 網頁設計中的柵格系統 三聯

  柵格系統的形成

  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的值,這個根據網站的實際情況來制定。那麼如何選擇合適柵格系統,主要通過“構成 要素與程序、限制與選擇、構成要素的比例、組合、虛空間與組合、四邊聯系與軸的聯系、三的法則、圓與構成、水平構成這些設計元素規劃,來實現比例和諧的平 面設計”。比較深奧,我們在這裡就不詳細闡述了。

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

copyright © 萬盛學電腦網 all rights reserved