網(wǎng)頁柵格化設(shè)計(jì)學(xué)習(xí)ppt

1、網(wǎng)頁柵格設(shè)計(jì)系統(tǒng) 09.12.14 柵格設(shè)計(jì)系統(tǒng) “grid systems”（又稱網(wǎng)格設(shè)計(jì) 系統(tǒng)、標(biāo)準(zhǔn)尺寸系統(tǒng)、程序版面設(shè)計(jì)、瑞士平面 設(shè)計(jì)風(fēng)格、國際主義平面設(shè)計(jì)風(fēng)格），是一種平 面設(shè)計(jì)的方法與風(fēng)格。運(yùn)用固定的格子設(shè)計(jì)版面 布局，其風(fēng)格工整簡潔，在二戰(zhàn)后大受歡迎，已 成為今日出版物設(shè)計(jì)的主流風(fēng)格之一。 版式設(shè)計(jì) 1919年德國著名建筑家沃爾特格羅佩斯（Walt Gropius）在魏瑪建立國立包豪斯學(xué)院。包 豪斯的平面設(shè)計(jì)基本是在荷蘭“風(fēng)格派”和俄國“構(gòu)成主義”的影響下形成的。因此，具有 高度理性化、功能化、簡單化、減少主義化和幾何形式化的特點(diǎn)。 1928年，朱斯特施密特（Joost Schm

2、idt）發(fā)展出了一套新的理性設(shè)計(jì)系統(tǒng)和方法。 20世紀(jì)50年代，柵格設(shè)計(jì)系統(tǒng)終于在前西德與瑞士得到完善。通過瑞士平面設(shè)計(jì)雜志的宣傳， 將瑞士蘇黎士和巴塞爾兩個(gè)城市的設(shè)計(jì)家從20世紀(jì)40年代探索的成果全面展示，并影響世界 各國，因此也被稱為“瑞士平面設(shè)計(jì)風(fēng)格”（Swiss Design）。由于這種風(fēng)格簡單明確，傳 達(dá)功能準(zhǔn)確，因而很快得到世界范圍內(nèi)的普遍認(rèn)可，成為戰(zhàn)后影響最大的一種平面設(shè)計(jì)風(fēng)格， 也是國際最流行的風(fēng)格，因此又被稱為“國際主義平面設(shè)計(jì)風(fēng)格”（International Typographic Style）。 1965年，在美國的芝加哥成立了一家新的平面設(shè)計(jì)公司尤尼馬克設(shè)計(jì)公司（Un

3、imark）， 主要設(shè)計(jì)人員包括有拉爾夫依克斯特朗姆（Ralph Eckerstrom）、詹姆斯佛格曼（James Fogleman）、馬西莫維格涅里（Massimo Vignelli，1934-）等。尤尼馬克設(shè)計(jì)公司的設(shè) 計(jì)思想基本是國際主義的：強(qiáng)調(diào)平面設(shè)計(jì)上的標(biāo)準(zhǔn)化，采用方格網(wǎng)絡(luò)為設(shè)計(jì)依據(jù)，目的是良 好的視覺傳 達(dá)功能。這家公司發(fā)展很快，不久就成為一家擁有402名工作人員、在全世界設(shè) 有48個(gè)設(shè)計(jì)事務(wù)所的大型國際設(shè)計(jì)公司。國際主義平面設(shè)計(jì)在這家公司的業(yè)務(wù)中 得到很大的 成功，而企業(yè)的規(guī)模又使得這個(gè)風(fēng)格在世界各地得到進(jìn)一步推廣。 歷史 網(wǎng)頁設(shè)計(jì)中的柵格系統(tǒng) 網(wǎng)頁柵格系統(tǒng)是從平面柵格系統(tǒng)中發(fā)展

4、而來。以規(guī)則的網(wǎng)格陣列來指 導(dǎo)和規(guī)范網(wǎng)頁中的版面布局以及信息分布 。 對(duì)于網(wǎng)頁設(shè)計(jì)來說，柵格系統(tǒng)的使用，不僅可以讓網(wǎng)頁的信息呈現(xiàn)更 加美觀易讀，更具可用性。而且，對(duì)于前端開發(fā)來說，網(wǎng)頁將更加的 靈活與規(guī)范。 柵格系統(tǒng)的設(shè)計(jì)原理及應(yīng)用 在網(wǎng)頁設(shè)計(jì)中，我們把寬度為“W”的頁面 分割成n個(gè)網(wǎng)格單元“a”，每個(gè)單元與單元 之間的間隙設(shè)為“i”,此時(shí)我們把“a+i”定 義“A”。他們之間的關(guān)系如下： W =（an）+（n-1）i 由于a+i=A， 可得：(An) i = W 柵格系統(tǒng)的設(shè)計(jì)原理及應(yīng)用 Yahoo的網(wǎng)站頁面寬度為W=950px 每個(gè)區(qū)塊與區(qū)塊的間隔為i=10px 如果應(yīng)用上面的公式，可以推

5、出 A=40px，既Yahoo首頁橫向版式設(shè) 計(jì)采用的柵格系統(tǒng)為： （40n）- 10 = W Yahoo首頁的布局完全是按照柵格 系統(tǒng)進(jìn)行設(shè)計(jì)的，每個(gè)區(qū)塊的寬 度對(duì)應(yīng)的n值分別為：4，11，9。 只要保證一個(gè)橫向維度的各個(gè)區(qū) 塊的n值相加等于24，則即可保證 頁面的寬度一定是950px。然而， 950px的寬度也恰好就是當(dāng)n=24 的時(shí) 候，W的寬度值。 柵格系統(tǒng)的設(shè)計(jì)原理及應(yīng)用 柵格系統(tǒng)的設(shè)計(jì)原理及應(yīng)用 將Flowline的總寬度標(biāo)記為W, Column的寬度標(biāo)記為c, Gutter寬度 標(biāo)記為g, Margin的寬度標(biāo)記為m, Column的個(gè)數(shù)標(biāo)記為N, 我們可以得 到以下公式： W

6、= c * N + g * (N - 1) + 2 * m 一般來說，Gutter的寬度是Margin 的兩倍，上面的公式可以簡化為： W = c * N + g * (N - 1) + g = (c + g) * N 將c+g標(biāo)記為C, 公式變得非常簡單： W = C * N 網(wǎng)站首頁頁面寬度 px Yahoo!950 淘寶950 MySpace960 新浪950 網(wǎng)易960 Live Search958 搜狐950 優(yōu)酷960 AOL960 柵格系統(tǒng)的設(shè)計(jì)原理及應(yīng)用 頁面結(jié)構(gòu)較復(fù)雜,門戶型網(wǎng)站 首頁寬度為950px/960px 神奇的960 柵格系統(tǒng)的設(shè)計(jì)原理及應(yīng)用 設(shè)計(jì)師們對(duì)蘋果情有獨(dú)衷

7、。在 1024 x 768 的 分辨率下，打開Firefox： Firefox窗體的大小約為 974 x 650. 減掉左右兩邊 7px的邊框，網(wǎng)頁的實(shí)際大 小為上圖中的紅色部分， 高寬為 960 x 650. 柵格系統(tǒng)最早出現(xiàn)在平面 設(shè)計(jì)領(lǐng)域，設(shè)計(jì)師們愛用 蘋果，蘋果下瀏覽器的默 認(rèn)寬度為960px, 于是960 就這么“自然”地出現(xiàn)了。 950的來歷 具體應(yīng)用時(shí)，Margin其 實(shí)是一個(gè)空白邊，從視覺 上看并不屬于總寬度。不 少柵格設(shè)計(jì)里習(xí)慣性地設(shè) 定Gutter為10px, 這樣 Margin就是5px. 當(dāng)W為 960，分割成6列時(shí) 柵格系統(tǒng)的設(shè)計(jì)原理及應(yīng)用 W的含義變?yōu)槿コ齅argi

8、n的總寬度， 公式變化為： W = N * C - g 將上面的公式實(shí)例化一下： 950 = 12 * 80 - 10 950 = 16 * 60 - 10 950 = 24 * 40 - 10 這就形成了960蛋糕的三種常見切法。 柵格系統(tǒng)的設(shè)計(jì)原理及應(yīng)用 950的來歷 12 x 8016 x 60 24 x 40 柵格系統(tǒng)的設(shè)計(jì)原理及應(yīng)用 Yahoo! 24 x 40 淘寶商城 大的兩欄布局 24 x 40 主體部分使用740的柵格劃分 網(wǎng)易 16 x 60 柵格系統(tǒng)的設(shè)計(jì)原理及應(yīng)用 柵格系統(tǒng)的設(shè)計(jì)原理及應(yīng)用 黃金分割 黃金分割可以歸結(jié)為數(shù)學(xué)問題：對(duì)于長度為1的線段，將其分成兩部分 x 和

9、 1 x, 使得： x / 1 = (1 - x) / x 化為簡單的二次方程： x2 + x - 1 = 0 正數(shù)解為： x = (sqrt(5) - 1) / 2 = 0.618 這就是黃金分割。 這個(gè)比例不僅僅出現(xiàn)在諸如繪畫、雕塑、音樂、建筑等藝術(shù)領(lǐng)域，在管理、工程設(shè)計(jì)等方 面也有著不可忽視的作用。 （這是個(gè)自然界的魔數(shù)，類似的還有真空光速、普朗克常數(shù)、 精細(xì)結(jié)構(gòu)等等，感興趣的Google吧） 在平面設(shè)計(jì)領(lǐng)域，黃金分割點(diǎn)被廣泛采用。比如下面這種圖： 柵格系統(tǒng)的設(shè)計(jì)原理及應(yīng)用 960柵格，實(shí)際寬度是950. 對(duì)于 24 x 40 的情景， 最接近黃金分割的兩欄布局是 350 : 590,

10、欄數(shù)比例為 9 : 15 寬度方向上的柵格 但實(shí)際使用時(shí)，因?yàn)檎瓩诮?jīng)常用來做 導(dǎo)航或放輔助信息，并不需要350px 這么寬。 柵格系統(tǒng)的設(shè)計(jì)原理及應(yīng)用 高度方向上的柵格 高度值560 可以讓高寬比接近黃金分割。 針對(duì)560, 我們采用 14 x 40 柵格 柵格系統(tǒng)的優(yōu)勢(shì) 能大大提高網(wǎng)頁的規(guī)范性。在柵格系統(tǒng)下，頁面中 所有組件的尺寸都是有規(guī)律的。這對(duì)于大型網(wǎng)站的 開發(fā)和維護(hù)來說，能節(jié)約不少成本。 基于柵格進(jìn)行設(shè)計(jì)，可以讓整個(gè)網(wǎng)站各個(gè)頁面的布 局保持一致。這能增加頁面的相似度，提升用戶體 驗(yàn)。 柵格系統(tǒng)更多的是一種布局思想。對(duì)于設(shè)計(jì)師們來 說，靈活地運(yùn)用柵格系統(tǒng)，能做出很多優(yōu)秀和獨(dú)特 的設(shè)計(jì)。

11、Thank you! Blueprint的實(shí)現(xiàn) Blueprint是一個(gè)完整的CSS框架，柵格系統(tǒng)是它的一部分功能。我們來看demo頁面： 以上三欄布局的代碼為： .container margin: 0 auto; width: 950px .span-8 float: left; margin-right: 10px div.last margin-right: 0 hr clear: both; height: 0; border: none 上面是基本功能，Blueprint還支持append-n, prepend-m, border等“高級(jí)”功能，這些 就不細(xì)說了。Blueprint

12、的特點(diǎn)簡單總結(jié)如下： 采用浮動(dòng)來實(shí)現(xiàn)布局，簡單明了 950兩側(cè)沒有margin, 最后一列的class需要加上last 采用額外標(biāo)簽來清除浮動(dòng) 960.gs的實(shí)現(xiàn) 談到960柵格系統(tǒng)，不得不提960.gs. Nathan Smith在這篇文章中，詳細(xì)闡述了他的想法和設(shè)計(jì)思路。這里有 個(gè)demo頁面，核心代碼很簡單： .container_12 margin: 0 auto; width: 960px .grid_4 float: left; margin: 0 10px 有意思的幾點(diǎn)： margin是均勻放在950兩側(cè)的 所有g(shù)rid除了寬度不同，左右邊距都一致margin: 0 10px;

13、代碼簡單清晰，起始和結(jié)束列不需要添加額外class 很明顯，Blueprint和960.gs都是采用浮動(dòng)來實(shí)現(xiàn)布局的，主容器需要添 加額外標(biāo)簽來清除浮動(dòng)。當(dāng)然，這也不是什么大問題，不添加額外標(biāo)簽 也可以清除浮動(dòng)。 YUI的實(shí)現(xiàn) 接著來看大名鼎鼎的YUI Grids CSS. YUI的CSS框架由三個(gè)文件組成： reset.css - 樣式重置 fonts.css - 版式字體控制 grids.css - 柵格系統(tǒng) 我們從demo開始： 注意，demo鏈接中的寬度是750的，但我們只要將中的id改為doc2, 頁面寬度就自動(dòng)變?yōu)?950寬了（YUI非常強(qiáng)大o）。來看下dom結(jié)構(gòu)： 采用的也是浮動(dòng)布局，簡化后的CSS代碼為： .doc2 margin: auto; width: 73.076em .yui-u float: left; margin-left: 1.99%; width: 32% div.first margin-left: 0 #ft clear: both YUI的特點(diǎn)是： 依舊是采用浮動(dòng)布局，槽（