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

新聞 2023-07-24編輯：深圳網(wǎng)站建設(shè)閱讀（）標(biāo)簽： 柵格 網(wǎng)頁設(shè)計

深圳網(wǎng)站建設(shè)公司 幫助企業(yè)提升網(wǎng)站形象,彰顯公司實力,PC+手機(jī)+微信+小程序
【模板網(wǎng)站的價格】國際域名+阿里1G空間+備案 一條龍服務(wù)
【定制網(wǎng)站的功能】SEO精準(zhǔn)營銷系統(tǒng)+城市分站+W3C標(biāo)準(zhǔn)
【營銷網(wǎng)站的效果】重長尾，重優(yōu)化，提權(quán)重，擴(kuò)收錄，提排名
【量身訂制的設(shè)計】據(jù)據(jù)需求量身定制。設(shè)計到滿意為止
【專屬VIP的服務(wù)】24RX365 為您提供1對1的專屬VIP服務(wù)

　　柵格系統(tǒng)的形成

　　柵格系統(tǒng)(Grid system)最早使用在17世紀(jì)末的法國印刷業(yè)，出版業(yè)。

　　維基百科對其定義為：柵格設(shè)計系統(tǒng)(又稱網(wǎng)格設(shè)計系統(tǒng)、標(biāo)準(zhǔn)尺寸系統(tǒng)、程序版面設(shè)計、瑞士平面設(shè)計風(fēng)格、國際主義平面設(shè)計風(fēng)格)，是一種平面設(shè)計的方法與風(fēng)格。

　　網(wǎng)頁柵格系統(tǒng)是有平面柵格系統(tǒng)中發(fā)展而來，以規(guī)則的網(wǎng)格陣列來指導(dǎo)和規(guī)范網(wǎng)頁中的版面布局以及信息分布。

　　柵格系統(tǒng)的原理

　　柵格系統(tǒng)可以按柵格數(shù)分為12列，16列，24列等，可以自由設(shè)計柵格寬度和柵格與柵格間寬度。如下圖所示，記頁面或區(qū)塊寬度為W，A代表一個柵格單元的寬度，a代表一個柵格的寬度，i為柵格與柵格之間的距離，n為正整數(shù)，則有W=(a*n)+(n-1)*i,由于A=a+i，可得(A*n)-i=W。

　　這個公式表述了網(wǎng)頁的布局與網(wǎng)頁背后柵格系統(tǒng)之間的關(guān)系。來觀察經(jīng)典的雅虎案例：

　　Yahoo的網(wǎng)站頁面寬度為W=950px，每個區(qū)塊與區(qū)塊的間隔為i=10px;如果應(yīng)用上面的公式，可以推出A=40px，既Yahoo首頁橫向版式設(shè)計采用的柵格系統(tǒng)為：(40×n)- 10 = W。只要保證一個橫向維度的各個區(qū)塊的n值相加等于24，即可保證頁面的寬度一定是950px，950px的寬度也恰好就是當(dāng)n=24的時候，W的寬度值。

　　在柵格系統(tǒng)中，設(shè)計師根據(jù)需要指定不同的版式或者劃分區(qū)塊改變A和i的值進(jìn)行設(shè)計，這樣，一個柵格系統(tǒng)的應(yīng)用就從此開始了。

　　經(jīng)典960柵格

　　設(shè)計師們偏愛用蘋果系統(tǒng)做設(shè)計，蘋果下瀏覽器的默認(rèn)寬度為960px, 在 1024 x 768 的分辨率下，我們再打開Firefox，自然狀態(tài)下，F(xiàn)irefox窗體的大小約為 974 x 650. 減掉左右兩邊7px的邊框，網(wǎng)頁的實際大小為上圖中的紅色部分，高寬為 960 x 650.有趣的960就這樣出現(xiàn)了。960只是個符號，并不是標(biāo)準(zhǔn)數(shù)。

　　上面列舉的都是大型門戶網(wǎng)站，它們的首頁寬度為950px/960px。除了微軟的Live Search。根據(jù)上面的簡單分析可以認(rèn)為：當(dāng)搭建頁面結(jié)構(gòu)復(fù)雜的門戶型網(wǎng)站時，開發(fā)工程師們不約而同地都選擇將頁面寬度定為950px/960px。為什么要選擇這個寬度呢?我們從數(shù)學(xué)著手：960可以分解為2的6次方乘以3和5, 這使得960可以分割成以下寬度的整數(shù)倍：

　　2, 3, 4, 5, 6, 8, 10, 12, 15, 16, 20, 24, 30, 32, 40, 48, 60, 64, 80, 96, 120, 160, 192, 240, 320, 480

　　共26種(26 = 7 * 2 * 2 – 2, 減去2是去掉1和960自身)，我們標(biāo)記為：

　　N(960) = N(2^6 * 3 * 5) = 26

　　根據(jù)上面的算法，可以得到：

　　N(360) = N(2^3 * 3^2 * 5) = 22

　　N(480) = N(2^5 * 3 * 5) = 22

　　N(720) = N(2^4 * 3^2 * 5) = 28

　　N(750) = N(2 * 3 * 5^3) = 14

　　N(800) = N(2^5 * 5^2) = 16

　　N(960) = N(2^6 * 3 * 5) = 26

　　N(1000) = N(2^3 * 5^3) = 14

　　N(1024) = N(2^10) = 9

　　N(1440) = N(2^6 * 3^2 * 5) = 34

　　N(1920) = N(2^7 * 3 * 5) = 30

　　N越大，可組合的寬度值就越多。對柵格系統(tǒng)來說，這意味著越靈活。

　　目前絕大多數(shù)顯示器都支持 1024 x 768 及其以上分辨率。為了有效的利用屏幕寬度同時保證柵格的靈活度，可以看出960是非常合適的。這樣，在目前主流顯示器下，960就成為網(wǎng)頁柵格系統(tǒng)中的最佳寬度了，也許不久的將來，將會流行1440。

　　使用柵格系統(tǒng)的優(yōu)勢

　　對于設(shè)計師來說，柵格系統(tǒng)更多的是一種布局思想，可以更有邏輯地進(jìn)行設(shè)計工作。靈活地運用柵格系統(tǒng)，不僅可以讓整個網(wǎng)站各個頁面的布局保持一致，讓網(wǎng)頁的信息呈現(xiàn)更加美觀易讀，讓設(shè)計稿有更好的結(jié)構(gòu)，更可以通過匹配不同組合，做出很多優(yōu)秀和獨特的排版設(shè)計。

　　使用網(wǎng)格系統(tǒng)，可以使網(wǎng)頁設(shè)計給用戶正式感和規(guī)范感，還具有一種結(jié)構(gòu)分明的設(shè)計感，提升用戶體驗。網(wǎng)格系統(tǒng)不意味著循規(guī)蹈矩，一味按照網(wǎng)格線來進(jìn)行布局。網(wǎng)格系統(tǒng)的意義在于更靈活的幫助設(shè)計師有序布局，而不是限制設(shè)計師的設(shè)計。

　　對于前端開發(fā)人員來說，柵格系統(tǒng)的使用，給整個網(wǎng)站的頁面結(jié)構(gòu)定義了一個標(biāo)準(zhǔn)，大大提高了網(wǎng)頁的規(guī)范性。在柵格系統(tǒng)下，頁面中所有組件的尺寸都是有規(guī)律的，可重用的，這對于大型網(wǎng)站的開發(fā)和維護(hù)來說，能節(jié)約不少成本。

　　隨著響應(yīng)式設(shè)計的流行，柵格系統(tǒng)開始被賦予新的意義，那就是，一種響應(yīng)式設(shè)計的實現(xiàn)方式。響應(yīng)式的要點是為同一個頁面設(shè)計多種布局形態(tài)，分別適配不同屏幕尺寸的設(shè)備。

　　可以看到，一個頁面可以拆分成多個區(qū)塊來理解，而正是這些區(qū)塊共同構(gòu)成了這個頁面的布局。根據(jù)不同的屏幕尺寸情況，調(diào)整這些區(qū)塊的排版，就可以實現(xiàn)響應(yīng)式設(shè)計。而借助柵格系統(tǒng)，設(shè)計與前端開發(fā)人員可以很容易的設(shè)計和創(chuàng)建響應(yīng)式的頁面布局。

　　柵格系統(tǒng)是一種格式化的設(shè)計工具，使用柵格系統(tǒng)是一種好的習(xí)慣，設(shè)計師可以更專注于內(nèi)容呈遞，更專注于強調(diào)重點。當(dāng)然，規(guī)矩是用來打破的，當(dāng)我們理解了布局的理念，掌握了柵格的手法之后，也無需拘泥于柵格的形式，可以對其“革命”，進(jìn)行創(chuàng)新。

• 上一章：網(wǎng)頁設(shè)計師:原來Banner設(shè)計還有這么多套...
• 下一章：網(wǎng)頁設(shè)計價格