網(wǎng)頁的柵格系統(tǒng)設(shè)計(jì)

《網(wǎng)頁的柵格系統(tǒng)設(shè)計(jì)》由會(huì)員上傳分享，免費(fèi)在線閱讀，更多相關(guān)內(nèi)容在行業(yè)資料-天天文庫。

1、柵格系統(tǒng)的形成1692年，新登基的法國(guó)國(guó)王路易十四感到法國(guó)的印刷水平強(qiáng)差人意，因此命令成立一個(gè)管理印刷的皇家特別委員會(huì)。他們的首要任務(wù)是設(shè)計(jì)出科學(xué)的、合理的，重視功能性的新字體。委員會(huì)由數(shù)學(xué)家尼古拉斯加宗（NicolasJaugeon）擔(dān)任領(lǐng)導(dǎo)，他們以羅馬體為基礎(chǔ)，采用方格為設(shè)計(jì)依據(jù)，每個(gè)字體方格分為64個(gè)基本方各單位，每個(gè)方各單位再分成36個(gè)小格，這樣，一個(gè)印刷版面就有2304個(gè)小格組成，在這個(gè)嚴(yán)謹(jǐn)?shù)膸缀尉W(wǎng)格網(wǎng)絡(luò)中設(shè)計(jì)字體的形狀，版面的編排，試驗(yàn)傳達(dá)功能的效能，這是是世界上最早對(duì)字體和版面進(jìn)行科學(xué)實(shí)驗(yàn)的

2、活動(dòng)，也是柵格系統(tǒng)最早的雛形。柵格系統(tǒng)英文為“gridsystems”，也有人翻譯為“網(wǎng)格系統(tǒng)”，其實(shí)是一回事。不過從定義上說，柵格更為準(zhǔn)確些，從維基百科查到柵格的定義為：柵格設(shè)計(jì)系統(tǒng)（又稱網(wǎng)格設(shè)計(jì)系統(tǒng)、標(biāo)準(zhǔn)尺寸系統(tǒng)、程序版面設(shè)計(jì)、瑞士平面設(shè)計(jì)風(fēng)格、國(guó)際主義平面設(shè)計(jì)風(fēng)格），是一種平面設(shè)計(jì)的方法與風(fēng)格。運(yùn)用固定的格子設(shè)計(jì)版面布局，其風(fēng)格工整簡(jiǎn)潔，在二戰(zhàn)后大受歡迎，已成為今日出版物設(shè)計(jì)的主流風(fēng)格之一。網(wǎng)頁設(shè)計(jì)中的柵格系統(tǒng)?我給網(wǎng)頁柵格系統(tǒng)下的定義為：以規(guī)則的網(wǎng)格陣列來指導(dǎo)和規(guī)范網(wǎng)頁中的版面布局以及信息分布。網(wǎng)

3、頁柵格系統(tǒng)是從平面柵格系統(tǒng)中發(fā)展而來。對(duì)于網(wǎng)頁設(shè)計(jì)來說，柵格系統(tǒng)的使用，不僅可以讓網(wǎng)頁的信息呈現(xiàn)更加美觀易讀，更具可用性。而且，對(duì)于前端開發(fā)來說，網(wǎng)頁將更加的靈活與規(guī)范。柵格系統(tǒng)在現(xiàn)在的網(wǎng)頁設(shè)計(jì)中應(yīng)用越來越多?；跂鸥裣到y(tǒng)的設(shè)計(jì)在網(wǎng)絡(luò)上越來越流行了。一個(gè)設(shè)計(jì)優(yōu)良的基本柵格系統(tǒng)不但讓你的設(shè)計(jì)更漂亮和易讀，還更具可用性。柵格由一系列的垂直線和水平線組成，幾乎所有的視覺媒體都以之為基礎(chǔ)。清晰的結(jié)構(gòu)將內(nèi)容分割成愉悅視覺的比例。下面是30個(gè)最頂尖的基于網(wǎng)格系統(tǒng)的Weblog設(shè)計(jì)。http://www2.jeffcr

4、oft.com/http://ryanbrill.com/http://www.subtraction.com/http://www.bs-markup.de/http://www.alvarocastano.com/http://www.achtentachtig.com/http://eswat.ca/http://5thirtyone.com/http://www.peterpixel.nl/http://blog.criticalwebdesign.co.uk/http://www.youtili

5、ze.com/http://warpspire.com/http://www.emanuelblagonic.com/http://www.andyrutledge.com/http://jonasboner.com/http://journal.barleyhut.com/http://www.quicksprout.com/http://thefightspot.com/http://www.gapersblock.com/http://dfckr.com/http://meiert.com/en/h

6、ttp://usabletype.com/http://ideasonideas.com/http://intensify.org/http://www.jambor-ee.com/http://www.buzzingo.de/http://svenigson.com/http://riverfrontpark.com/http://design.weblogsinc.com/http://www.invalidresponse.com/柵格系統(tǒng)的設(shè)計(jì)原理及應(yīng)用那么如何設(shè)計(jì)一個(gè)柵格系統(tǒng)？接下來我們將通過實(shí)

7、例，詳細(xì)的介紹一下網(wǎng)頁柵格系統(tǒng)的原理與應(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這個(gè)公式表述了網(wǎng)頁的布局與網(wǎng)頁“背后”的柵格系統(tǒng)之間的某種關(guān)系。我們拿yahoo作例，來看一下柵格系統(tǒng)的應(yīng)用：yahoo的網(wǎng)站頁面寬度為W=950px，每個(gè)區(qū)塊與區(qū)塊的間隔為i=10px；如果應(yīng)用上面的公式，可以推出A=40px，既yahoo首頁

8、橫向版式設(shè)計(jì)采用的柵格系統(tǒng)為：（40×n）-10=W下面我們列出當(dāng)n等于不同數(shù)值時(shí)W變化的數(shù)值表格：從表格可以看出：yahoo首頁的布局完全是按照柵格系統(tǒng)進(jìn)行設(shè)計(jì)的，每個(gè)區(qū)塊的寬度對(duì)應(yīng)的n值分別為：4，11，9。在這里我們看到一個(gè)很有意思的事情：只要保證一個(gè)橫向維度的各個(gè)區(qū)塊的n值相加等于24，則即可保證頁面的寬度一定是950px。然而，950px的寬度也恰好就是當(dāng)n=24的時(shí)候，W的寬度值。由此我們得出以下的應(yīng)用模式：在柵格