• 
• 
• 
• 
• 
• 
• 

知識普及 ? 網(wǎng)頁的柵格系統(tǒng)設(shè)計

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

網(wǎng)站工程師 于2020-03-30 11:23發(fā)表 閱讀次數(shù) 2231次

柵格系統(tǒng)的形成1692年，新登基的法國國王路易十四感到法國的印刷水平強(qiáng)差人意，因此命令成立一個管理印刷的皇家特別委員會。他們的首要任務(wù)是設(shè)計出科學(xué)的、合理的，重視功能性的新字體。委員會由數(shù)學(xué)家尼古拉斯加宗（NicolasJaugeon）擔(dān)任領(lǐng)導(dǎo)，他們以羅馬體為基礎(chǔ)，采用方格為設(shè)計依據(jù)，每個字體方格分為64個基本方各單位，每個方各單位再分成36個小格，這樣，一個印刷版面就有2304個小格組成，在這個嚴(yán)謹(jǐn)?shù)膸缀尉W(wǎng)格網(wǎng)絡(luò)中設(shè)計字體的形狀，版面的編排，試驗傳達(dá)功能的效能，這是是世界上最早對字體和版面進(jìn)行科學(xué)實驗的活動，也是柵格系統(tǒng)最早的雛形。 　　柵格系統(tǒng)英文為“gridsystems”，也有人翻譯為“網(wǎng)格系統(tǒng)”，其實是一回事。不過從定義上說，柵格更為準(zhǔn)確些，從維基百科查到柵格的定義為：柵格設(shè)計系統(tǒng)（又稱網(wǎng)格設(shè)計系統(tǒng)、標(biāo)準(zhǔn)尺寸系統(tǒng)、程序版面設(shè)計、瑞士平面設(shè)計風(fēng)格、國際主義平面設(shè)計風(fēng)格），是一種平面設(shè)計的方法與風(fēng)格。運用固定的格子設(shè)計版面布局，其風(fēng)格工整簡潔，在二戰(zhàn)后大受歡迎，已成為今日出版物設(shè)計的主流風(fēng)格之一。 　　網(wǎng)頁設(shè)計中的柵格系統(tǒng)我給網(wǎng)頁柵格系統(tǒng)下的定義為：以規(guī)則的網(wǎng)格陣列來指導(dǎo)和規(guī)范網(wǎng)頁中的版面布局以及信息分布。網(wǎng)頁柵格系統(tǒng)是從平面柵格系統(tǒng)中發(fā)展而來。對于網(wǎng)頁設(shè)計來說，柵格系統(tǒng)的使用，不僅可以讓網(wǎng)頁的信息呈現(xiàn)更加美觀易讀，更具可用性。而且，對于前端開發(fā)來說，網(wǎng)頁將更加的靈活與規(guī)范。 　　柵格系統(tǒng)在現(xiàn)在的網(wǎng)頁設(shè)計中應(yīng)用越來越多，從網(wǎng)絡(luò)上搜羅了一篇關(guān)于柵格系統(tǒng)應(yīng)用的文章：30個最頂尖的基于柵格系統(tǒng)的博客網(wǎng)站設(shè)計。 　　柵格系統(tǒng)的設(shè)計原理及應(yīng)用那么如何設(shè)計一個柵格系統(tǒng)？接下來我們將通過實例，詳細(xì)的介紹一下網(wǎng)頁柵格系統(tǒng)的原理與應(yīng)用： 　　在網(wǎng)頁設(shè)計中，我們把寬度為“W”的頁面分割成n個網(wǎng)格單元“a”，每個單元與單元之間的間隙設(shè)為“i”,此時我們把“a+i”定義“A”。他們之間的關(guān)系如下：W=（a×n）+（n-1）i由于a+i=A，可得：(A×n)-i=W這個公式表述了網(wǎng)頁的布局與網(wǎng)頁“背后”的柵格系統(tǒng)之間的某種關(guān)系。我們拿yahoo作例，來看一下柵格系統(tǒng)的應(yīng)用： 　　yahoo的網(wǎng)站頁面寬度為W=950px，每個區(qū)塊與區(qū)塊的間隔為i=10px；如果應(yīng)用上面的公式，可以推出A=40px，既yahoo首頁橫向版式設(shè)計采用的柵格系統(tǒng)為：（40×n）-10=W下面我們列出當(dāng)n等于不同數(shù)值時W變化的數(shù)值表格： 　　從表格可以看出：yahoo首頁的布局完全是按照柵格系統(tǒng)進(jìn)行設(shè)計的，每個區(qū)塊的寬度對應(yīng)的n值分別為：4，11，9。在這里我們看到一個很有意思的事情：只要保證一個橫向維度的各個區(qū)塊的n值相加等于24，則即可保證頁面的寬度一定是950px。然而，950px的寬度也恰好就是當(dāng)n=24的時候，W的寬度值。由此我們得出以下的應(yīng)用模式： 　　在柵格系統(tǒng)中，設(shè)計師根據(jù)需要制定不同的版式或者劃分區(qū)塊，他們的依據(jù)將是上面的那張對應(yīng)表進(jìn)行設(shè)計。這樣，一個柵格系統(tǒng)的應(yīng)用就從此開始了。我們看到，使用柵格系統(tǒng)的網(wǎng)頁設(shè)計，非常的有條理性；看上去也很舒服。最重要的是，它給整個網(wǎng)站的頁面結(jié)構(gòu)定義了一個標(biāo)準(zhǔn)。對于視覺設(shè)計師來說，他們不用再為設(shè)計一個網(wǎng)站每個頁面都要想一個寬度或高度而煩惱了。對于前端開發(fā)工程師來說，頁面的布局設(shè)計將完全是規(guī)范的和可重用的，這將大大節(jié)約了開發(fā)成本。對于內(nèi)容編輯或廣告銷售來說，所有的廣告都是規(guī)則的，通用的，他們再也不用做出一套N張不同尺寸的廣告圖了…… 　　當(dāng)然只要你愿意，我們可以衍生出任何一種柵格系統(tǒng)，只要改變A和i的值，這個根據(jù)網(wǎng)站的實際情況來制定。那么如何選擇合適柵格系統(tǒng)，主要通過“構(gòu)成要素與程序、限制與選擇、構(gòu)成要素的比例、組合、虛空間與組合、四邊聯(lián)系與軸的聯(lián)系、三的法則、圓與構(gòu)成、水平構(gòu)成這些設(shè)計元素規(guī)劃，來實現(xiàn)比例和諧的平面設(shè)計”。比較深奧，我們在這里就不詳細(xì)闡述了。 　　呵呵，說了一堆柵格系統(tǒng)的優(yōu)點。大家可能會問：難道柵格系統(tǒng)真的是完美的么？答案是否定的：對于內(nèi)容信息不確定導(dǎo)致高度不確定的頁面，在高度層面上就無法做到柵格了。當(dāng)然，具體的情況還需具體的分析與解決，這就需要設(shè)計師們在實際的應(yīng)用中不斷的總結(jié)經(jīng)驗，不斷實踐了。

網(wǎng)頁的柵格系統(tǒng)設(shè)計相關(guān)標(biāo)簽：網(wǎng)站建設(shè)，網(wǎng)站制作，網(wǎng)站建設(shè)方案，網(wǎng)站制作

相關(guān)熱點推薦

在青島做一個公司網(wǎng)站多 談搜索引擎影響網(wǎng)站收錄 探討運用seo技術(shù)做網(wǎng) 八個優(yōu)秀的圖片和圖標(biāo)的 通過robots.tx 青島網(wǎng)站改版的公司哪家 青島網(wǎng)站制作支持舊IE 如何處理好網(wǎng)站設(shè)計的細(xì) 產(chǎn)品設(shè)計的模糊前期 奈薇建站網(wǎng)科技2017 搜索引擎蜘蛛理解相關(guān)性 網(wǎng)站的表單設(shè)計要點 與用戶體驗的這兩年 運用什么技巧使用戶喜歡 網(wǎng)站設(shè)計中程序員和美工 Tab(選項卡)的產(chǎn)品 從精簡導(dǎo)航談小型網(wǎng)站的 如今虛擬外鏈對我們的作 網(wǎng)頁設(shè)計中的版式原理- 使用框架和滑動門技術(shù)進(jìn) 清新的網(wǎng)站設(shè)計風(fēng)格 網(wǎng)頁設(shè)計之視覺信息傳達(dá) 用戶體驗與網(wǎng)頁界面設(shè)計 沒有交互意識的設(shè)計師， 企業(yè)網(wǎng)站規(guī)劃和網(wǎng)頁設(shè)計 網(wǎng)站大改版=壯烈的死亡 2016年百度排名的算 網(wǎng)站建設(shè)合同簽訂需要注 人機(jī)交互界面設(shè)計的三個 系統(tǒng)化學(xué)習(xí)SEO技術(shù)的 用戶體驗中溝通的技巧 迭代的設(shè)計 網(wǎng)站中視覺元素的設(shè)計 網(wǎng)站設(shè)計的前期溝通之重 在青島，企業(yè)網(wǎng)站建設(shè)對 手機(jī)建站時容易進(jìn)入哪些 如何有效的提高網(wǎng)站關(guān)鍵 淺談品牌的視覺識別 怎樣充分利用你的網(wǎng)站設(shè)

奈薇建站網(wǎng)青島網(wǎng)站建設(shè)公司/青島網(wǎng)站制作公司，專業(yè)提供"氣質(zhì)"型網(wǎng)站建設(shè)及精美網(wǎng)站制作服務(wù)，同時歡迎各地網(wǎng)站建設(shè)公司、網(wǎng)站制作公司代理我們的奈薇建站系統(tǒng)共同發(fā)展

熱點地區(qū)：青島網(wǎng)站建設(shè)價格 青島即墨網(wǎng)站制作公司 開發(fā)區(qū)信息港 山東在線門戶