網(wǎng)頁設(shè)計中柵格系統(tǒng)的學(xué)習(xí)
2022-01-18點擊量:380
柵格系統(tǒng)的形成柵格系統(tǒng)(Gridsystem)最早使用在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。經(jīng)典960柵格設(shè)計師們偏愛用蘋果系統(tǒng)做設(shè)計,蘋果下瀏覽器的默認(rèn)寬度為960px,在1024x768的分辨率下,我們再打開Firefox,自然狀態(tài)下,F(xiàn)irefox窗體的大小約為974x650.減掉左右兩邊7px的邊框,網(wǎng)頁的實際大小為上圖中的紅色部分,高寬為960x650.有趣的960就這樣出現(xiàn)了。960只是個符號,并不是標(biāo)準(zhǔn)數(shù)。目前絕大多數(shù)顯示器都支持1024x768及其以上分辨率。為了有效的利用屏幕寬度同時保證柵格的靈活度,可以看出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è)備。柵格系統(tǒng)是一種格式化的設(shè)計工具,使用柵格系統(tǒng)是一種好的習(xí)慣,設(shè)計師可以更專注于內(nèi)容呈遞,更專注于強調(diào)重點。當(dāng)然,規(guī)矩是用來打破的,當(dāng)我們理解了布局的理念,掌握了柵格的手法之后,也無需拘泥于柵格的形式,可以對其“革命”,進(jìn)行創(chuàng)新。...