阿里裝修托管
微信人工客服 |
深圳做網(wǎng)站網(wǎng)頁(yè)規(guī)劃之柵格體系
發(fā)布日期：2019/6/14 關(guān)鍵詞:深圳做網(wǎng)站網(wǎng)頁(yè)規(guī)劃之柵格體系 已有 3466 人瀏覽
01、柵格體系的形成
柵格體系（Grid system）最早運(yùn)用在17世紀(jì)末的法國(guó)印刷業(yè)，出版業(yè)。
維基百科對(duì)其界說(shuō)為：柵格規(guī)劃體系（又稱網(wǎng)格規(guī)劃體系、規(guī)范尺度體系、程序版面規(guī)劃、瑞士平面規(guī)劃風(fēng)格、國(guó)際主義平面規(guī)劃風(fēng)格），是一種平面規(guī)劃的辦法與風(fēng)格。
深圳做網(wǎng)站告訴大家網(wǎng)頁(yè)柵格體系是有平面柵格體系中開(kāi)展而來(lái)，以規(guī)則的網(wǎng)格陣列來(lái)指導(dǎo)和規(guī)范網(wǎng)頁(yè)中的版面布局以及信息分布。
02、柵格體系的原理
柵格體系能夠按柵格數(shù)分為12列，16列，24列等，能夠自由規(guī)劃柵格寬度和柵格與柵格間寬度。如下圖所示，記頁(yè)面或區(qū)塊寬度為W，A代表一個(gè)柵格單元的寬度，a代表一個(gè)柵格的寬度，i為柵格與柵格之間的距離，n為正整數(shù)，則有W=(a＊n)+(n-1)*i,由于A=a+i，可得（A＊n）-i=W。
（A*n）-i = W
這個(gè)公式表述了網(wǎng)頁(yè)的布局與網(wǎng)頁(yè)背后柵格體系之間的聯(lián)系。來(lái)觀察經(jīng)典的yahoo事例：
Yahoo的網(wǎng)站頁(yè)面寬度為W=950px，每個(gè)區(qū)塊與區(qū)塊的距離為i=10px；假如運(yùn)用上面的公式，能夠推出A=40px，既Yahoo主頁(yè)橫向版式規(guī)劃選用的柵格體系為：（40×n）- 10 = W。只需確保一個(gè)橫向維度的各個(gè)區(qū)塊的n值相加等于24，即可確保頁(yè)面的寬度一定是950px，950px的寬度也剛好便是當(dāng)n=24的時(shí)分，W的寬度值。
03、經(jīng)典960柵格
規(guī)劃師們偏愛(ài)用蘋(píng)果體系做規(guī)劃，蘋(píng)果下瀏覽器的默認(rèn)寬度為960px, 在 1024 x 768 的分辨率下，咱們?cè)俜_(kāi)Firefox，天然狀態(tài)下，F(xiàn)irefox窗體的巨細(xì)約為 974 x 650. 減掉左右兩邊7px的邊框，網(wǎng)頁(yè)的實(shí)踐巨細(xì)為上圖中的紅色部分，高寬為 960 x 650.有趣的960就這樣呈現(xiàn)了。960只是個(gè)符號(hào)，并不是規(guī)范數(shù)。
上面列舉的都是大型門戶網(wǎng)站，它們的主頁(yè)寬度為950px/960px。除了微軟的Live Search。依據(jù)上面的簡(jiǎn)單剖析能夠以為：當(dāng)建立頁(yè)面結(jié)構(gòu)復(fù)雜的門戶型網(wǎng)站時(shí)，開(kāi)發(fā)工程師們不約而同地都選擇將頁(yè)面寬度定為950px/960px。為什么要選擇這個(gè)寬度呢？咱們從數(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越大，可組合的寬度值就越多。對(duì)柵格體系來(lái)說(shuō)，這意味著越靈活。
現(xiàn)在絕大多數(shù)顯示器都支持 1024 x 768 及其以上分辨率。為了有用的運(yùn)用屏幕寬度同時(shí)確保柵格的靈活度，能夠看出960是非常合適的。這樣，在現(xiàn)在主流顯示器下，960就成為網(wǎng)頁(yè)柵格體系中的最佳寬度了，或許不久的將來(lái)，將會(huì)盛行1440。
04、運(yùn)用柵格體系的優(yōu)勢(shì)
關(guān)于規(guī)劃師來(lái)說(shuō)，柵格體系更多的是一種布局思維，能夠更有邏輯地進(jìn)行規(guī)劃工作。靈活地運(yùn)用柵格體系，不只能夠讓整個(gè)網(wǎng)站各個(gè)頁(yè)面的布局保持一致，讓網(wǎng)頁(yè)的信息呈現(xiàn)愈加漂亮易讀，讓規(guī)劃稿有更好的結(jié)構(gòu)，更能夠經(jīng)過(guò)匹配不同組合，做出許多優(yōu)秀和共同的排版規(guī)劃。
運(yùn)用網(wǎng)格體系，能夠使網(wǎng)頁(yè)規(guī)劃給用戶正式感和規(guī)范感，還具有一種結(jié)構(gòu)分明的規(guī)劃感，提升用戶體驗(yàn)。網(wǎng)格體系不意味著安分守己，一味依照網(wǎng)格線來(lái)進(jìn)行布局。網(wǎng)格體系的含義在于更靈活的幫助規(guī)劃師有序布局，而不是約束規(guī)劃師的規(guī)劃。
關(guān)于前端開(kāi)發(fā)人員來(lái)說(shuō)，柵格體系的運(yùn)用，給整個(gè)網(wǎng)站的頁(yè)面結(jié)構(gòu)界說(shuō)了一個(gè)規(guī)范，大大提高了網(wǎng)頁(yè)的規(guī)范性。在柵格體系下，頁(yè)面中所有組件的尺度都是有規(guī)則的，可重用的，這關(guān)于大型網(wǎng)站的開(kāi)發(fā)和保護(hù)來(lái)說(shuō)，能節(jié)約不少本錢。
隨著呼應(yīng)式規(guī)劃的盛行，柵格體系開(kāi)始被賦予新的含義，那便是，一種呼應(yīng)式規(guī)劃的實(shí)現(xiàn)方法。呼應(yīng)式的關(guān)鍵是為同一個(gè)頁(yè)面規(guī)劃多種布局形態(tài)，別離適配不同屏幕尺度的設(shè)備。
能夠看到，一個(gè)頁(yè)面能夠拆分紅多個(gè)區(qū)塊來(lái)了解，而正是這些區(qū)塊共同構(gòu)成了這個(gè)頁(yè)面的布局。依據(jù)不同的屏幕尺度狀況，調(diào)整這些區(qū)塊的排版，就能夠?qū)崿F(xiàn)呼應(yīng)式規(guī)劃。而借助柵格體系，規(guī)劃與前端開(kāi)發(fā)人員能夠很簡(jiǎn)單的規(guī)劃和創(chuàng)建呼應(yīng)式的頁(yè)面布局。
柵格體系是一種格式化的規(guī)劃工具，運(yùn)用柵格體系是一種好的習(xí)慣，規(guī)劃師能夠更專注于內(nèi)容呈上，更專注于著重要點(diǎn)。當(dāng)然，規(guī)則是用來(lái)打破的，深圳做網(wǎng)站覺(jué)得當(dāng)咱們了解了布局的理念，掌握了柵格的方法之后，也無(wú)需拘泥于柵格的方式，能夠?qū)ζ洹案镄隆?，進(jìn)行立異。
柵格體系（Grid system）最早運(yùn)用在17世紀(jì)末的法國(guó)印刷業(yè)，出版業(yè)。
維基百科對(duì)其界說(shuō)為：柵格規(guī)劃體系（又稱網(wǎng)格規(guī)劃體系、規(guī)范尺度體系、程序版面規(guī)劃、瑞士平面規(guī)劃風(fēng)格、國(guó)際主義平面規(guī)劃風(fēng)格），是一種平面規(guī)劃的辦法與風(fēng)格。
深圳做網(wǎng)站告訴大家網(wǎng)頁(yè)柵格體系是有平面柵格體系中開(kāi)展而來(lái)，以規(guī)則的網(wǎng)格陣列來(lái)指導(dǎo)和規(guī)范網(wǎng)頁(yè)中的版面布局以及信息分布。
02、柵格體系的原理
柵格體系能夠按柵格數(shù)分為12列，16列，24列等，能夠自由規(guī)劃柵格寬度和柵格與柵格間寬度。如下圖所示，記頁(yè)面或區(qū)塊寬度為W，A代表一個(gè)柵格單元的寬度，a代表一個(gè)柵格的寬度，i為柵格與柵格之間的距離，n為正整數(shù)，則有W=(a＊n)+(n-1)*i,由于A=a+i，可得（A＊n）-i=W。
（A*n）-i = W
這個(gè)公式表述了網(wǎng)頁(yè)的布局與網(wǎng)頁(yè)背后柵格體系之間的聯(lián)系。來(lái)觀察經(jīng)典的yahoo事例：
Yahoo的網(wǎng)站頁(yè)面寬度為W=950px，每個(gè)區(qū)塊與區(qū)塊的距離為i=10px；假如運(yùn)用上面的公式，能夠推出A=40px，既Yahoo主頁(yè)橫向版式規(guī)劃選用的柵格體系為：（40×n）- 10 = W。只需確保一個(gè)橫向維度的各個(gè)區(qū)塊的n值相加等于24，即可確保頁(yè)面的寬度一定是950px，950px的寬度也剛好便是當(dāng)n=24的時(shí)分，W的寬度值。
在柵格體系中，規(guī)劃師依據(jù)需要指定不同的版式或者區(qū)分區(qū)塊改動(dòng)A和i的值進(jìn)行規(guī)劃，這樣，一個(gè)柵格體系的運(yùn)用就從此開(kāi)始了。
03、經(jīng)典960柵格
規(guī)劃師們偏愛(ài)用蘋(píng)果體系做規(guī)劃，蘋(píng)果下瀏覽器的默認(rèn)寬度為960px, 在 1024 x 768 的分辨率下，咱們?cè)俜_(kāi)Firefox，天然狀態(tài)下，F(xiàn)irefox窗體的巨細(xì)約為 974 x 650. 減掉左右兩邊7px的邊框，網(wǎng)頁(yè)的實(shí)踐巨細(xì)為上圖中的紅色部分，高寬為 960 x 650.有趣的960就這樣呈現(xiàn)了。960只是個(gè)符號(hào)，并不是規(guī)范數(shù)。
上面列舉的都是大型門戶網(wǎng)站，它們的主頁(yè)寬度為950px/960px。除了微軟的Live Search。依據(jù)上面的簡(jiǎn)單剖析能夠以為：當(dāng)建立頁(yè)面結(jié)構(gòu)復(fù)雜的門戶型網(wǎng)站時(shí)，開(kāi)發(fā)工程師們不約而同地都選擇將頁(yè)面寬度定為950px/960px。為什么要選擇這個(gè)寬度呢？咱們從數(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越大，可組合的寬度值就越多。對(duì)柵格體系來(lái)說(shuō)，這意味著越靈活。
現(xiàn)在絕大多數(shù)顯示器都支持 1024 x 768 及其以上分辨率。為了有用的運(yùn)用屏幕寬度同時(shí)確保柵格的靈活度，能夠看出960是非常合適的。這樣，在現(xiàn)在主流顯示器下，960就成為網(wǎng)頁(yè)柵格體系中的最佳寬度了，或許不久的將來(lái)，將會(huì)盛行1440。
04、運(yùn)用柵格體系的優(yōu)勢(shì)
關(guān)于規(guī)劃師來(lái)說(shuō)，柵格體系更多的是一種布局思維，能夠更有邏輯地進(jìn)行規(guī)劃工作。靈活地運(yùn)用柵格體系，不只能夠讓整個(gè)網(wǎng)站各個(gè)頁(yè)面的布局保持一致，讓網(wǎng)頁(yè)的信息呈現(xiàn)愈加漂亮易讀，讓規(guī)劃稿有更好的結(jié)構(gòu)，更能夠經(jīng)過(guò)匹配不同組合，做出許多優(yōu)秀和共同的排版規(guī)劃。
運(yùn)用網(wǎng)格體系，能夠使網(wǎng)頁(yè)規(guī)劃給用戶正式感和規(guī)范感，還具有一種結(jié)構(gòu)分明的規(guī)劃感，提升用戶體驗(yàn)。網(wǎng)格體系不意味著安分守己，一味依照網(wǎng)格線來(lái)進(jìn)行布局。網(wǎng)格體系的含義在于更靈活的幫助規(guī)劃師有序布局，而不是約束規(guī)劃師的規(guī)劃。
關(guān)于前端開(kāi)發(fā)人員來(lái)說(shuō)，柵格體系的運(yùn)用，給整個(gè)網(wǎng)站的頁(yè)面結(jié)構(gòu)界說(shuō)了一個(gè)規(guī)范，大大提高了網(wǎng)頁(yè)的規(guī)范性。在柵格體系下，頁(yè)面中所有組件的尺度都是有規(guī)則的，可重用的，這關(guān)于大型網(wǎng)站的開(kāi)發(fā)和保護(hù)來(lái)說(shuō)，能節(jié)約不少本錢。
隨著呼應(yīng)式規(guī)劃的盛行，柵格體系開(kāi)始被賦予新的含義，那便是，一種呼應(yīng)式規(guī)劃的實(shí)現(xiàn)方法。呼應(yīng)式的關(guān)鍵是為同一個(gè)頁(yè)面規(guī)劃多種布局形態(tài)，別離適配不同屏幕尺度的設(shè)備。
能夠看到，一個(gè)頁(yè)面能夠拆分紅多個(gè)區(qū)塊來(lái)了解，而正是這些區(qū)塊共同構(gòu)成了這個(gè)頁(yè)面的布局。依據(jù)不同的屏幕尺度狀況，調(diào)整這些區(qū)塊的排版，就能夠?qū)崿F(xiàn)呼應(yīng)式規(guī)劃。而借助柵格體系，規(guī)劃與前端開(kāi)發(fā)人員能夠很簡(jiǎn)單的規(guī)劃和創(chuàng)建呼應(yīng)式的頁(yè)面布局。
柵格體系是一種格式化的規(guī)劃工具，運(yùn)用柵格體系是一種好的習(xí)慣，規(guī)劃師能夠更專注于內(nèi)容呈上，更專注于著重要點(diǎn)。當(dāng)然，規(guī)則是用來(lái)打破的，深圳做網(wǎng)站覺(jué)得當(dāng)咱們了解了布局的理念，掌握了柵格的方法之后，也無(wú)需拘泥于柵格的方式，能夠?qū)ζ洹案镄隆?，進(jìn)行立異。
注：本文來(lái)自深一集團(tuán)原創(chuàng)或轉(zhuǎn)截 http://www.652544.com/newslist_6916_2.html 如需轉(zhuǎn)載，請(qǐng)注明出處！
專注設(shè)計(jì)14年
深一云服務(wù)器
拒絕不當(dāng)利
500強(qiáng)企業(yè)網(wǎng)
10000家客戶案
83位技術(shù)團(tuán)隊(duì)
只做有排名
200人服務(wù)團(tuán)隊(duì)
