網(wǎng)頁(yè)美工設(shè)計(jì)

網(wǎng)頁(yè)設(shè)計(jì)中的柵格系統(tǒng)是什么？

編輯：時(shí)間：2016-04-10 10:57:51

　　經(jīng)常瀏覽網(wǎng)頁(yè)、制作網(wǎng)頁(yè)的同學(xué)會(huì)發(fā)現(xiàn)，許多大站的采用的頁(yè)面不是950像素就是960像素。還有一些知名站點(diǎn)，雖然首頁(yè)寬度沒(méi)什么固定規(guī)律，但共同的特點(diǎn)是：功能專一，頁(yè)面結(jié)構(gòu)相對(duì)簡(jiǎn)單。

網(wǎng)頁(yè)柵格系統(tǒng)是什么？我們必須遵循它嗎？[點(diǎn)擊放大]

　　為什么設(shè)計(jì)師們都不約而同的采用幾乎相同的布局尺寸呢?這不是巧合，而是遵循著一個(gè)規(guī)律——柵格系統(tǒng)。柵格系統(tǒng)英文為“grid systems”，也有人翻譯為“網(wǎng)格系統(tǒng)”，其實(shí)是一回事。不過(guò)從定義上說(shuō)，柵格更為準(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)格之一。如今，柵格系統(tǒng)也已經(jīng)被運(yùn)用到網(wǎng)頁(yè)中。它以規(guī)則的網(wǎng)格陣列來(lái)指導(dǎo)和規(guī)范網(wǎng)頁(yè)中的版面布局以及信息分布。對(duì)于網(wǎng)頁(yè)設(shè)計(jì)來(lái)說(shuō)，柵格系統(tǒng)的使用，不僅可以讓網(wǎng)頁(yè)的信息呈現(xiàn)更加美觀易讀，更具可用性。而且，對(duì)于前端開發(fā)來(lái)說(shuō)，網(wǎng)頁(yè)將更加的靈活與規(guī)范。柵格系統(tǒng)的原理和應(yīng)用柵格系統(tǒng)的計(jì)算公式：

　　(A×n) - i = W

　　如上圖所示： A 一個(gè)柵格單元的寬度 a 一個(gè)柵格寬度 A=a+i n 正整數(shù) i 柵格與柵格之間的間隙 W 頁(yè)面/區(qū)塊寬度這樣就可以計(jì)算出柵格系統(tǒng)所使用的尺寸。以頁(yè)面寬度950像素為例，每個(gè)區(qū)塊與區(qū)塊的間隔為i=10px;如果應(yīng)用上面的公式，可以推出A=40px，既頁(yè)面橫向版式設(shè)計(jì)采用的柵格系統(tǒng)為： (40×n) - 10 = W 用柵格系統(tǒng)設(shè)計(jì)的頁(yè)面非常直觀，有條理性，并且看起來(lái)十分舒服。如果你愿意，可以通過(guò)上面的啟發(fā)，衍生出自己的各種柵格系統(tǒng)。網(wǎng)頁(yè)柵格系統(tǒng)只是參照，具體情況需要具體分析，如果自己有想法，也可以不按照柵格系統(tǒng)進(jìn)行設(shè)計(jì)，它只是參照而已。

<< 上一篇：網(wǎng)頁(yè)設(shè)計(jì)顏色搭配的三條原則

>> 下一篇：網(wǎng)頁(yè)設(shè)計(jì)制作是如何精確還原設(shè)計(jì)稿的

推薦資訊