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

1 網(wǎng)頁柵格設(shè)計(jì)系統(tǒng) 09 12 14 2 3 版式設(shè)計(jì)1919年德國(guó)著名建筑家沃爾特 格羅佩斯 WaltGropius 在魏瑪建立國(guó)立包豪斯學(xué)院 包豪斯的平面設(shè)計(jì)基本是在荷蘭 風(fēng)格派 和俄國(guó) 構(gòu)成主義 的影響下形成的 因此 具有高度理性化 功能化 簡(jiǎn)單化 減少主義化和幾何形式化的特點(diǎn) 1928年 朱斯特 施密特 JoostSchmidt 發(fā)展出了一套新的理性設(shè)計(jì)系統(tǒng)和方法 20世紀(jì)50年代 柵格設(shè)計(jì)系統(tǒng)終于在前西德與瑞士得到完善 通過瑞士平面設(shè)計(jì)雜志的宣傳 將瑞士蘇黎士和巴塞爾兩個(gè)城市的設(shè)計(jì)家從20世紀(jì)40年代探索的成果全面展示 并影響世界各國(guó) 因此也被稱為 瑞士平面設(shè)計(jì)風(fēng)格 SwissDesign 由于這種風(fēng)格簡(jiǎn)單明確 傳達(dá)功能準(zhǔn)確 因而很快得到世界范圍內(nèi)的普遍認(rèn)可 成為戰(zhàn)后影響最大的一種平面設(shè)計(jì)風(fēng)格 也是國(guó)際最流行的風(fēng)格 因此又被稱為 國(guó)際主義平面設(shè)計(jì)風(fēng)格 InternationalTypographicStyle 1965年 在美國(guó)的芝加哥成立了一家新的平面設(shè)計(jì)公司 尤尼馬克設(shè)計(jì)公司 Unimark 主要設(shè)計(jì)人員包括有拉爾夫 依克斯特朗姆 RalphEckerstrom 詹姆斯 佛格曼 JamesFogleman 馬西莫 維格涅里 MassimoVignelli 1934 等 尤尼馬克設(shè)計(jì)公司的設(shè)計(jì)思想基本是國(guó)際主義的 強(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ù)所的大型國(guó)際設(shè)計(jì)公司 國(guó)際主義平面設(shè)計(jì)在這家公司的業(yè)務(wù)中得到很大的成功 而企業(yè)的規(guī)模又使得這個(gè)風(fēng)格在世界各地得到進(jìn)一步推廣 字體設(shè)計(jì)1629年 法王路易十四命令成立一個(gè)管理印刷的皇家特別委員會(huì) 由數(shù)學(xué)家尼古拉斯 加宗 NicolasJaugeon 擔(dān)任領(lǐng)導(dǎo) 委員會(huì)提出了新字體設(shè)計(jì)建議 以羅馬體為基礎(chǔ) 采用方格為設(shè)計(jì)依據(jù) 每個(gè)字體方格分為64個(gè)基本方格單位 每個(gè)方格單位再分成36小格 這樣 一個(gè)印刷版面就由2304個(gè)小格組成 這是世上最早對(duì)字體和版面進(jìn)行科學(xué)實(shí)驗(yàn)的活動(dòng) 也是柵格系統(tǒng)的雛形 其實(shí)早在1539年就有字體設(shè)計(jì)專家喬佛雷 托利 GeoffroyTory 采用類似的方法設(shè)計(jì)字體 歷史 4 網(wǎng)頁設(shè)計(jì)中的柵格系統(tǒng)網(wǎng)頁柵格系統(tǒng)是從平面柵格系統(tǒng)中發(fā)展而來 以規(guī)則的網(wǎng)格陣列來指導(dǎo)和規(guī)范網(wǎng)頁中的版面布局以及信息分布 對(duì)于網(wǎng)頁設(shè)計(jì)來說 柵格系統(tǒng)的使用 不僅可以讓網(wǎng)頁的信息呈現(xiàn)更加美觀易讀 更具可用性 而且 對(duì)于前端開發(fā)來說 網(wǎng)頁將更加的靈活與規(guī)范 5 柵格系統(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 a n n 1 i由于a i A 可得 A n i W 6 柵格系統(tǒng)的設(shè)計(jì)原理及應(yīng)用 Yahoo的網(wǎng)站頁面寬度為W 950px每個(gè)區(qū)塊與區(qū)塊的間隔為i 10px如果應(yīng)用上面的公式 可以推出A 40px 既Yahoo首頁橫向版式設(shè)計(jì)采用的柵格系統(tǒng)為 40 n 10 W 7 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)用 8 柵格系統(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 c N g N 1 2 m一般來說 Gutter的寬度是Margin的兩倍 上面的公式可以簡(jiǎn)化為 W c N g N 1 g c g N將c g標(biāo)記為C 公式變得非常簡(jiǎn)單 W C N 9 柵格系統(tǒng)的設(shè)計(jì)原理及應(yīng)用 頁面結(jié)構(gòu)較復(fù)雜 門戶型網(wǎng)站首頁寬度為950px 960px 10 神奇的960 柵格系統(tǒng)的設(shè)計(jì)原理及應(yīng)用 設(shè)計(jì)師們對(duì)蘋果情有獨(dú)衷 在1024x768的分辨率下 打開Firefox Firefox窗體的大小約為974x650 減掉左右兩邊7px的邊框 網(wǎng)頁的實(shí)際大小為上圖中的紅色部分 高寬為960 x650 柵格系統(tǒng)最早出現(xiàn)在平面設(shè)計(jì)領(lǐng)域 設(shè)計(jì)師們愛用蘋果 蘋果下瀏覽器的默認(rèn)寬度為960px 于是960就這么 自然 地出現(xiàn)了 11 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)用 12 W的含義變?yōu)槿コ齅argin的總寬度 公式變化為 W N C g將上面的公式實(shí)例化一下 950 12 80 10950 16 60 10950 24 40 10這就形成了960蛋糕的三種常見切法 柵格系統(tǒng)的設(shè)計(jì)原理及應(yīng)用 950的來歷 13 12x80 16x60 24x40 柵格系統(tǒng)的設(shè)計(jì)原理及應(yīng)用 14 Yahoo 24x40 淘寶商城大的兩欄布局24x40主體部分使用740的柵格劃分 網(wǎng)易16x60 柵格系統(tǒng)的設(shè)計(jì)原理及應(yīng)用 15 柵格系統(tǒng)的設(shè)計(jì)原理及應(yīng)用 16 黃金分割黃金分割可以歸結(jié)為數(shù)學(xué)問題 對(duì)于長(zhǎng)度為1的線段 將其分成兩部分x和1 x 使得 x 1 1 x x化為簡(jiǎn)單的二次方程 x 2 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)用 17 960柵格 實(shí)際寬度是950 對(duì)于24x40的情景 最接近黃金分割的兩欄布局是350 590 欄數(shù)比例為9 15 寬度方向上的柵格但實(shí)際使用時(shí) 因?yàn)檎瓩诮?jīng)常用來做導(dǎo)航或放輔助信息 并不需要350px這么寬 柵格系統(tǒng)的設(shè)計(jì)原理及應(yīng)用 18 高度方向上的柵格高度值560可以讓高寬比接近黃金分割 針對(duì)560 我們采用14x40柵格 19 柵格系統(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ì) 20 Thankyou 21 Blueprint的實(shí)現(xiàn)Blueprint是一個(gè)完整的CSS框架 柵格系統(tǒng)是它的一部分功能 我們來看demo頁面 以上三欄布局的代碼為 container margin 0auto 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的特點(diǎn)簡(jiǎn)單總結(jié)如下 采用浮動(dòng)來實(shí)現(xiàn)布局 簡(jiǎn)單明了950兩側(cè)沒有margin 最后一列的class需要加上last采用額外標(biāo)簽來清除浮動(dòng) 22 960 gs的實(shí)現(xiàn)談到960柵格系統(tǒng) 不得不提960 gs NathanSmith在這篇文章中 詳細(xì)闡述了他的想法和設(shè)計(jì)思路 這里有個(gè)demo頁面 核心代碼很簡(jiǎn)單 container 12 margin 0auto width 960px grid 4 float left margin 010px 有意思的幾點(diǎn) margin是均勻放在950兩側(cè)的所有g(shù)rid除了寬度不同 左右邊距都一致margin 010px 代碼簡(jiǎn)單清晰 起始和結(jié)束列不需要添加額外class很明顯 Blueprint和960 gs都是采用浮動(dòng)來實(shí)現(xiàn)布局的 主容器需要添加額外標(biāo)簽來清除浮動(dòng) 當(dāng)然 這也不是什么大問題 不添加額外標(biāo)簽也可以清除浮動(dòng) 23 YUI的實(shí)現(xiàn)接著來看大名鼎鼎的YUIGridsCSS YUI的CSS框架由三個(gè)文件組成 reset css 樣式重置fonts css 版式字體控制grids css 柵格系統(tǒng) 我們從demo開始 注意 demo鏈接中的寬度是750的 但我們只要將中的id改為doc2 頁面寬度就自動(dòng)變?yōu)?50寬了 YUI非常強(qiáng)大 o 來看下dom結(jié)構(gòu) 采用的也是浮動(dòng)布局 簡(jiǎn)化后的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 24 YUI的特點(diǎn)是 依舊是采用浮動(dòng)布局 槽 G