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

1、網(wǎng)頁柵格設(shè)計系統(tǒng),09.12.14,版式設(shè)計 1919年德國著名建筑家沃爾特格羅佩斯（Walt Gropius）在魏瑪建立國立包豪斯學(xué)院。包豪斯的平面設(shè)計基本是在荷蘭“風(fēng)格派”和俄國“構(gòu)成主義”的影響下形成的。因此，具有高度理性化、功能化、簡單化、減少主義化和幾何形式化的特點。 1928年，朱斯特施密特（Joost Schmidt）發(fā)展出了一套新的理性設(shè)計系統(tǒng)和方法。 20世紀(jì)50年代，柵格設(shè)計系統(tǒng)終于在前西德與瑞士得到完善。通過瑞士平面設(shè)計雜志的宣傳，將瑞士蘇黎士和巴塞爾兩個城市的設(shè)計家從20世紀(jì)40年代探索的成果全面展示，并影響世界各國，因此也被稱為“瑞士平面設(shè)計風(fēng)格”（Swiss Des

2、ign）。由于這種風(fēng)格簡單明確，傳達(dá)功能準(zhǔn)確，因而很快得到世界范圍內(nèi)的普遍認(rèn)可，成為戰(zhàn)后影響最大的一種平面設(shè)計風(fēng)格，也是國際最流行的風(fēng)格，因此又被稱為“國際主義平面設(shè)計風(fēng)格”（International Typographic Style）。 1965年，在美國的芝加哥成立了一家新的平面設(shè)計公司尤尼馬克設(shè)計公司（Unimark），主要設(shè)計人員包括有拉爾夫依克斯特朗姆（Ralph Eckerstrom）、詹姆斯佛格曼（James Fogleman）、馬西莫維格涅里（Massimo Vignelli，1934-）等。尤尼馬克設(shè)計公司的設(shè)計思想基本是國際主義的：強調(diào)平面設(shè)計上的標(biāo)準(zhǔn)化，采用方格網(wǎng)絡(luò)為

3、設(shè)計依據(jù)，目的是良好的視覺傳 達(dá)功能。這家公司發(fā)展很快，不久就成為一家擁有402名工作人員、在全世界設(shè)有48個設(shè)計事務(wù)所的大型國際設(shè)計公司。國際主義平面設(shè)計在這家公司的業(yè)務(wù)中 得到很大的成功，而企業(yè)的規(guī)模又使得這個風(fēng)格在世界各地得到進(jìn)一步推廣。,歷史,網(wǎng)頁設(shè)計中的柵格系統(tǒng) 網(wǎng)頁柵格系統(tǒng)是從平面柵格系統(tǒng)中發(fā)展而來。以規(guī)則的網(wǎng)格陣列來指導(dǎo)和規(guī)范網(wǎng)頁中的版面布局以及信息分布。 對于網(wǎng)頁設(shè)計來說，柵格系統(tǒng)的使用，不僅可以讓網(wǎng)頁的信息呈現(xiàn)更加美觀易讀，更具可用性。而且，對于前端開發(fā)來說，網(wǎng)頁將更加的靈活與規(guī)范。,柵格系統(tǒng)的設(shè)計原理及應(yīng)用,在網(wǎng)頁設(shè)計中，我們把寬度為“W”的頁面分割成n個網(wǎng)格單元“a”，每

4、個單元與單元之間的間隙設(shè)為“i”,此時我們把“a+i”定義“A”。他們之間的關(guān)系如下：W =（an）+（n-1）i由于a+i=A，可得：(An) i = W,柵格系統(tǒng)的設(shè)計原理及應(yīng)用,Yahoo的網(wǎng)站頁面寬度為W=950px每個區(qū)塊與區(qū)塊的間隔為i=10px 如果應(yīng)用上面的公式，可以推出A=40px，既Yahoo首頁橫向版式設(shè)計采用的柵格系統(tǒng)為：（40n）- 10 = W,Yahoo首頁的布局完全是按照柵格系統(tǒng)進(jìn)行設(shè)計的，每個區(qū)塊的寬度對應(yīng)的n值分別為：4，11，9。 只要保證一個橫向維度的各個區(qū)塊的n值相加等于24，則即可保證頁面的寬度一定是950px。然而，950px的寬度也恰好就是當(dāng)n=

5、24的時 候，W的寬度值。,柵格系統(tǒng)的設(shè)計原理及應(yīng)用,柵格系統(tǒng)的設(shè)計原理及應(yīng)用,將Flowline的總寬度標(biāo)記為W, Column的寬度標(biāo)記為c, Gutter寬度標(biāo)記為g, Margin的寬度標(biāo)記為m, Column的個數(shù)標(biāo)記為N, 我們可以得到以下公式： W = 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,柵格系統(tǒng)的設(shè)計原理及應(yīng)用,頁面結(jié)構(gòu)較復(fù)雜,門戶型網(wǎng)站 首頁

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

7、割成6列時,柵格系統(tǒng)的設(shè)計原理及應(yīng)用,W的含義變?yōu)槿コ齅argin的總寬度，公式變化為： W = N * C - g 將上面的公式實例化一下： 950 = 12 * 80 - 10 950 = 16 * 60 - 10 950 = 24 * 40 - 10 這就形成了960蛋糕的三種常見切法。,柵格系統(tǒng)的設(shè)計原理及應(yīng)用,950的來歷,12 x 80,16 x 60,24 x 40,柵格系統(tǒng)的設(shè)計原理及應(yīng)用,Yahoo! 24 x 40,淘寶商城 大的兩欄布局 24 x 40 主體部分使用740的柵格劃分,網(wǎng)易 16 x 60,柵格系統(tǒng)的設(shè)計原理及應(yīng)用,柵格系統(tǒng)的設(shè)計原理及應(yīng)用,黃金分割 黃金分

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

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

10、運用柵格系統(tǒng)，能做出很多優(yōu)秀和獨特的設(shè)計。,Thank you!,Blueprint的實現(xiàn) Blueprint是一個完整的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等“高級

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

12、右邊距都一致margin: 0 10px; 代碼簡單清晰，起始和結(jié)束列不需要添加額外class 很明顯，Blueprint和960.gs都是采用浮動來實現(xiàn)布局的，主容器需要添加額外標(biāo)簽來清除浮動。當(dāng)然，這也不是什么大問題，不添加額外標(biāo)簽也可以清除浮動。,YUI的實現(xiàn) 接著來看大名鼎鼎的YUI Grids CSS. YUI的CSS框架由三個文件組成： reset.css - 樣式重置 fonts.css - 版式字體控制 grids.css - 柵格系統(tǒng),我們從demo開始：,注意，demo鏈接中的寬度是750的，但我們只要將中的id改為doc2, 頁面寬度就自動變?yōu)?50寬了（YUI非常強大o）。來看下dom結(jié)構(gòu)：,采用的也是浮動布局，簡化后的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的特點是： 依舊是采用浮動布局，槽（Gutter）