網頁美工設計

網頁設計中的柵格系統是什么？

編輯：時間：2016-04-10 10:57:51

　　經常瀏覽網頁、制作網頁的同學會發現，許多大站的采用的頁面不是950像素就是960像素。還有一些知名站點，雖然首頁寬度沒什么固定規律，但共同的特點是：功能專一，頁面結構相對簡單。

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

　　(A×n) - i = W

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

<< 上一篇：網頁設計顏色搭配的三條原則

>> 下一篇：網頁設計制作是如何精確還原設計稿的

推薦資訊