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

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

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

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

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

　　為什么設計師們都不約而同的采用幾乎相同的布局尺寸呢?這不是巧合，而是遵循著(zhù)一個(gè)規律——柵格系統。柵格系統英文為“grid systems”，也有人翻譯為“網(wǎng)格系統”，其實(shí)是一回事。不過(guò)從定義上說(shuō)，柵格更為準確些，從維基百科查到柵格的定義為：柵格設計系統(又稱(chēng)網(wǎng)格設計系統、標準尺寸系統、程序版面設計、瑞士平面設計風(fēng)格、國際主義平面設計風(fēng)格)，是一種平面設計的方法與風(fēng)格。運用固定的格子設計版面布局，其風(fēng)格工整簡(jiǎn)潔，在二戰后大受歡迎，已成為今日出版物設計的主流風(fēng)格之一。如今，柵格系統也已經(jīng)被運用到網(wǎng)頁(yè)中。它以規則的網(wǎng)格陣列來(lái)指導和規范網(wǎng)頁(yè)中的版面布局以及信息分布。對于網(wǎng)頁(yè)設計來(lái)說(shuō)，柵格系統的使用，不僅可以讓網(wǎng)頁(yè)的信息呈現更加美觀(guān)易讀，更具可用性。而且，對于前端開(kāi)發(fā)來(lái)說(shuō)，網(wǎng)頁(yè)將更加的靈活與規范。柵格系統的原理和應用柵格系統的計算公式：

　　(A×n) - i = W

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

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

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

推薦資訊