• 
• 
• 
• 
• 
• 
• 

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

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

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

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

網(wǎng)頁的柵格系統(tǒng)設(shè)計(jì)相關(guān)標(biāo)簽：網(wǎng)站改版，企業(yè)建站，網(wǎng)站建設(shè)公司，網(wǎng)頁制作

相關(guān)熱點(diǎn)推薦

青島網(wǎng)站設(shè)計(jì)哪家好 常見的排版方式與表現(xiàn)類 優(yōu)化用戶體驗(yàn)，讓網(wǎng)站呈 影響網(wǎng)站排名的一些不必 青島網(wǎng)站設(shè)計(jì)容易犯的幾 用戶體驗(yàn)中溝通的技巧 如何計(jì)算搜索引擎關(guān)鍵詞 網(wǎng)頁設(shè)計(jì)中的版式原理- 做網(wǎng)站的一些定律 為什么網(wǎng)站制作價(jià)格越來 網(wǎng)頁配色密碼 響應(yīng)式網(wǎng)頁你了解嗎？ 如何創(chuàng)建一個(gè)用戶體驗(yàn)良 店鋪推廣之SEO入門 寫給在職設(shè)計(jì)師們 分類目錄 一個(gè)好的網(wǎng)站應(yīng)該同時(shí)具 網(wǎng)頁設(shè)計(jì)制作應(yīng)注意的問 網(wǎng)頁界面設(shè)計(jì)教程四：色 化妝品的網(wǎng)站策劃分析 網(wǎng)站設(shè)計(jì)如何做好風(fēng)格統(tǒng) 2020年主流網(wǎng)頁的設(shè) 網(wǎng)站重建怎么保護(hù)已有的 頻繁改版引發(fā)的合意性思 迅速提高網(wǎng)站流量的方法 企業(yè)建站誤區(qū) 防止IE主頁被修改的辦 WEB設(shè)計(jì)經(jīng)驗(yàn) 網(wǎng)站推廣技巧之鏈接策略 如何做出創(chuàng)意設(shè)計(jì)的網(wǎng)站 網(wǎng)頁的版式設(shè)計(jì)—文字的 平度網(wǎng)站設(shè)計(jì)公司哪家好 搜索引擎的算法 一個(gè)網(wǎng)站，5個(gè)目標(biāo) 軟件與網(wǎng)站設(shè)計(jì)的區(qū)別 如何挑選專業(yè)的網(wǎng)站建設(shè) 個(gè)人主頁作用 生動(dòng)的設(shè)計(jì)

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

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