注册 登录  
 加关注
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

神魔破杜梓的叨叨堂

Programming every day!

 
 
 

日志

 
 
 
 

網頁的柵格系統設計   

2008-09-27 08:52:22|  分类: My Design |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |
原文来自wowbox blog


柵格系統的形成

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

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

历史上的今天

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2017