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

設(shè)計(jì)中常見的問題網(wǎng)頁設(shè)計(jì)中的臟、亂、差，是我們?cè)谠O(shè)計(jì)過程中常會(huì)遇到的問題。臟-是由對(duì)色彩使用不當(dāng)所產(chǎn)生的，而色彩使用不當(dāng)產(chǎn)生的不好效果也分為："花、灰"，花哨、灰頭土臉也就是這里所說的"臟"。亂-這里的亂不是指用色亂，也不是指內(nèi)容亂，而主要是指布局亂。（本課的重點(diǎn)）差-而"差"基本上是由于我們的技法上不夠嫻熟所產(chǎn)生的。比如細(xì)節(jié)上的處理不到位，某個(gè)局部的效果制作得粗糙。這可以稱之為"差"，特別是在處理帶有2D效果的設(shè)計(jì)作品時(shí)，這種情況常會(huì)出現(xiàn)。網(wǎng)頁的柵格設(shè)計(jì)全文共56頁，當(dāng)前為第1頁。什么是柵格設(shè)計(jì)？什么是柵格系統(tǒng)？

柵格系統(tǒng)是一種框架，是一種可以被用來搭建”組合”的系統(tǒng)。柵格系統(tǒng)無處不在：城市布局、雜志、報(bào)紙和大廈的外觀等等。柵格系統(tǒng)可以用”黃金分割”，一種幾個(gè)世紀(jì)以來一直被認(rèn)為是具有美感的”比率”，來設(shè)計(jì)。柵格設(shè)計(jì)的特點(diǎn)是重視比例、秩序、連續(xù)感和現(xiàn)代感。以及對(duì)存在于版面上的元素進(jìn)行規(guī)劃、組合、保持平衡或者打破平衡，以便讓信息可以更快速、更便捷、更系統(tǒng)和更有效率的讀??；另外最重要的一點(diǎn)是，負(fù)空間的規(guī)劃（即：留白）也是柵格系統(tǒng)設(shè)計(jì)當(dāng)中非常重要的部分。柵格的歷史：

二戰(zhàn)以前的柵格系統(tǒng)是非常簡(jiǎn)單和公式化的構(gòu)建在基準(zhǔn)中的，各個(gè)區(qū)域四周的矩形結(jié)構(gòu)。他們一般受限與制作他們的技術(shù)，也包括偶爾點(diǎn)綴一張圖片的文字縱欄。那一時(shí)期的柵格系統(tǒng)很少使用空白作為設(shè)計(jì)裝飾。這種狀態(tài)一直持續(xù)到幾位著名的設(shè)計(jì)師打破了當(dāng)時(shí)的設(shè)計(jì)習(xí)慣。他們提議了一個(gè)新的系統(tǒng)，一個(gè)更靈活的，能給予設(shè)計(jì)師更多開發(fā)工具的系統(tǒng)：模塊柵格

網(wǎng)頁的柵格設(shè)計(jì)全文共56頁，當(dāng)前為第2頁。單純的文字是沒辦法讓設(shè)計(jì)師們耐心的看下去的，所以還是老辦法，用示圖來作為講解模型。這次我們使用的網(wǎng)頁是微軟、IBM、2個(gè)公司網(wǎng)站來講解。希望通過分解這2個(gè)公司的網(wǎng)站設(shè)計(jì)，能把我所理解的柵格設(shè)計(jì)傳達(dá)出來。廢話少說，看示圖：網(wǎng)頁的柵格設(shè)計(jì)全文共56頁，當(dāng)前為第3頁。網(wǎng)頁的柵格設(shè)計(jì)全文共56頁，當(dāng)前為第4頁。我們看到微軟公司的網(wǎng)站設(shè)計(jì)中并沒有什么明顯的線去區(qū)隔不同的區(qū)塊，但是當(dāng)我們把當(dāng)蒙上一層紗，然后用實(shí)線把每個(gè)部分都畫出來這時(shí)我們發(fā)現(xiàn)這個(gè)網(wǎng)站其實(shí)是處在一個(gè)柵格陣列中。那么這個(gè)陣列中的內(nèi)容已經(jīng)很明顯了，并且我們從中發(fā)現(xiàn)了很多區(qū)塊在頁面中的位置居然是那么的有條理，并且有一些并不在一起的區(qū)塊，居然也有一定的規(guī)律。當(dāng)然有人可能會(huì)說，都用線畫出來了當(dāng)然顯得條理，整齊了。問題就在于這里，我們的網(wǎng)站都可以用縱橫線區(qū)分開。但是一些設(shè)計(jì)得不好的網(wǎng)站的縱橫線可能數(shù)量非常的多，縱橫線的數(shù)量過多并且都擠在一直，這就說明網(wǎng)站的布局顯得太亂。或者是過于條理而變得布局平均，沒有對(duì)比，缺乏美感。其實(shí)只要用這樣的方法去分析一下自己設(shè)計(jì)的作品也許就能從中看到問題所在。

網(wǎng)頁的柵格設(shè)計(jì)全文共56頁，當(dāng)前為第5頁。網(wǎng)頁的柵格設(shè)計(jì)全文共56頁，當(dāng)前為第6頁。我們看到IBM的柵格與MS的有很大的不同，IBM中還出現(xiàn)了一些差不多大的柵格，但是這里要注意其實(shí)這些柵格是由于底部很小的幾個(gè)區(qū)塊所產(chǎn)生的，并且這凡個(gè)區(qū)塊還可以看作是一個(gè)橫向的區(qū)塊。我們從這里可以看到IBM的布局設(shè)計(jì)是對(duì)稱的。但是這種對(duì)稱卻是在離在縱橫線上卻不容易注意到的。這是很高明的手法。網(wǎng)頁的柵格設(shè)計(jì)全文共56頁，當(dāng)前為第7頁。從這2個(gè)網(wǎng)站中我們可以看到2種不同風(fēng)格的柵格設(shè)計(jì)，雖然有所不同，但我們依然可以發(fā)現(xiàn)兩者都會(huì)盡可能的把最重要的信息放在視覺中心點(diǎn)上，不論是放在左邊的還是右邊的或是中間的，他們都得到了最大的柵格區(qū)，得到了足夠的重視！我們的視覺中心也自然盯在了上面！

網(wǎng)頁的柵格設(shè)計(jì)全文共56頁，當(dāng)前為第8頁。960的秘密首先澄清一個(gè)應(yīng)用場(chǎng)景問題。，對(duì)于結(jié)構(gòu)復(fù)雜的網(wǎng)站，不少設(shè)計(jì)師們喜歡采用960固定寬度布局。但要注意的是，960并不是萬能鑰匙，一部分網(wǎng)站沒有也不需要柵格系統(tǒng)。網(wǎng)頁的柵格設(shè)計(jì)全文共56頁，當(dāng)前為第9頁。使用960柵格的網(wǎng)站網(wǎng)站首頁頁面寬度px

Yahoo!

950

淘寶950

MySpace

960

新浪950網(wǎng)易960

LiveSearch

958

搜狐950優(yōu)酷960

AOL

960網(wǎng)頁的柵格設(shè)計(jì)全文共56頁，當(dāng)前為第10頁。上面列舉的都是Alexa全球排名前100的站點(diǎn)，它們的首頁寬度為950px/960px.除了微軟的LiveSearch,這些站點(diǎn)有個(gè)共同特點(diǎn)：頁面結(jié)構(gòu)較復(fù)雜，都可以認(rèn)為是門戶型網(wǎng)站。再來看看Google,YouTube,Facebook,Flickr!,eBay等知名站點(diǎn)，它們的首頁寬度沒什么固定規(guī)律，共同的特點(diǎn)是：功能專一，頁面結(jié)構(gòu)相對(duì)簡(jiǎn)單。根據(jù)上面的簡(jiǎn)單分析可以認(rèn)為：當(dāng)搭建頁面結(jié)構(gòu)復(fù)雜的門戶型網(wǎng)站時(shí)，開發(fā)工程師們不約而同地都選擇將頁面寬度定為950px/960px.這是一件很有趣的事情，為什么要選擇這個(gè)寬度呢?這個(gè)寬度值究竟有什么魔力?網(wǎng)頁的柵格設(shè)計(jì)全文共56頁，當(dāng)前為第11頁。神奇的960計(jì)師們對(duì)蘋果情有獨(dú)衷。在1024x768的分辨率下，打開Firefox網(wǎng)頁的柵格設(shè)計(jì)全文共56頁，當(dāng)前為第12頁。自然狀態(tài)下，F(xiàn)irefox窗體的大小約為974x650.減掉左右兩邊7px的邊框，網(wǎng)頁的實(shí)際大小為上圖中的紅色部分，高寬為960x650.有趣的960就這樣出現(xiàn)了。是的，可以認(rèn)為一切就這么簡(jiǎn)單。柵格系統(tǒng)最早出現(xiàn)在平面設(shè)計(jì)領(lǐng)域，設(shè)計(jì)師們愛用蘋果，蘋果下瀏覽器的默認(rèn)寬度為960px,于是960就這么“自然”地出現(xiàn)了。數(shù)字背后的奧妙上面的“自然”出現(xiàn)，細(xì)究自然是不讓人信服的。蘋果系統(tǒng)的設(shè)計(jì)者們?cè)跊]有喝醉酒的情況下選擇了960，而不是其它什么1000之類的整數(shù)，自然另有奧妙。網(wǎng)頁的柵格設(shè)計(jì)全文共56頁，當(dāng)前為第13頁?？茖W(xué)界有很多問題都可以歸結(jié)到數(shù)學(xué)問題上，我們也從數(shù)學(xué)著手：

960可以分解為2的6次方乘以3和5,這使得960可以分割成以下寬度的整數(shù)倍：以下為引用的內(nèi)容：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èi)容：N(960)=N(2^6*3*5)=26網(wǎng)頁的柵格設(shè)計(jì)全文共56頁，當(dāng)前為第14頁。根據(jù)上面的算法，可以得到：以下為引用的內(nèi)容：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

根據(jù)直覺(嚴(yán)格證明也不難，不過還是留給數(shù)學(xué)系的學(xué)生去證明吧)，我們得到一個(gè)有趣的結(jié)論：網(wǎng)頁的柵格設(shè)計(jì)全文共56頁，當(dāng)前為第15頁。目前絕大多數(shù)顯示器都支持1024x768及其以上分辨率。為了有效的利用屏幕寬度同時(shí)保證柵格的靈活度，可以看出960是非常合適的。這樣，在目前主流顯示器下，960就成為網(wǎng)頁柵格系統(tǒng)中的最佳寬度了。(也許不久的將來，將會(huì)流行1440)細(xì)心的你也許會(huì)記得，本文開頭列舉的寬度值中，950也出現(xiàn)了好幾次。950是怎么來的?和960是啥關(guān)系?網(wǎng)頁的柵格設(shè)計(jì)全文共56頁，當(dāng)前為第16頁。這就是我們要真正關(guān)注的950!將W的含義變?yōu)槿コ齅argin的總寬度，公式變化為：

W=N*C-g將上面的公式實(shí)例化一下：

950=12*80-10

950=16*60-10

950=24*40-10網(wǎng)頁的柵格設(shè)計(jì)全文共56頁，當(dāng)前為第17頁。常見的960柵格種類12x8024x4016x60網(wǎng)頁的柵格設(shè)計(jì)全文共56頁，當(dāng)前為第18頁。三種切法，N越大，靈活度越高12x80的應(yīng)用：網(wǎng)頁的柵格設(shè)計(jì)全文共56頁，當(dāng)前為第19頁。Yahoo!是很標(biāo)準(zhǔn)的24x40柵格網(wǎng)頁的柵格設(shè)計(jì)全文共56頁，當(dāng)前為第20頁。淘寶網(wǎng)目前只有商城上部分使用了柵格系統(tǒng)網(wǎng)頁的柵格設(shè)計(jì)全文共56頁，當(dāng)前為第21頁。網(wǎng)易很不錯(cuò)，采用的是16x60的柵格系統(tǒng)：網(wǎng)頁的柵格設(shè)計(jì)全文共56頁，當(dāng)前為第22頁。柵格系統(tǒng)具有以下優(yōu)勢(shì)：能大大提高網(wǎng)頁的規(guī)范性。在柵格系統(tǒng)下，頁面中所有組件的尺寸都是有規(guī)律的。這對(duì)于大型網(wǎng)站的開發(fā)和維護(hù)來說，能節(jié)約不少成本。基于柵格進(jìn)行設(shè)計(jì)，可以讓整個(gè)網(wǎng)站各個(gè)頁面的布局保持一致。這能增加頁面的相似度，提升用戶體驗(yàn)。對(duì)于設(shè)計(jì)師們來說，靈活地運(yùn)用柵格系統(tǒng)，能做出很多優(yōu)秀和獨(dú)特的設(shè)計(jì)網(wǎng)頁的柵格設(shè)計(jì)全文共56頁，當(dāng)前為第23頁。下面討論柵格系統(tǒng)中的黃金分割。黃金分割黃金分割可以歸結(jié)為數(shù)學(xué)問題：對(duì)于長(zhǎng)度為1的線段，將其分成兩部分x和1-x,使得：x/1=(1-x)/x化為簡(jiǎn)單的二次方程：

x^2+x-1=0正數(shù)解為：

x=(sqrt(5)-1)/2~=0.618這就是黃金分割。這個(gè)比例不僅僅出現(xiàn)在諸如繪畫、雕塑、音樂、建筑等藝術(shù)領(lǐng)域，在管理、工程設(shè)計(jì)等方面也有著不可忽視的作用。(這是個(gè)自然界的魔數(shù)，類似的還有真空光速、普朗克常數(shù)、精細(xì)結(jié)構(gòu)等等，羅馬步兵方陣)網(wǎng)頁的柵格設(shè)計(jì)全文共56頁，當(dāng)前為第24頁。對(duì)于24x40的情景，最接近黃金分割的兩欄布局是350:590,欄數(shù)比例為9:15.但實(shí)際使用時(shí)，因?yàn)檎瓩诮?jīng)常用來做導(dǎo)航或放輔助信息，并不需要350px這么寬。因此實(shí)際情況下經(jīng)常被采用的布局是：網(wǎng)頁的柵格設(shè)計(jì)全文共56頁，當(dāng)前為第25頁。上面講的都是寬度方向上的柵格化，下面我們看看高度方向上如何應(yīng)用。高度方向上的柵格還記得研究(1)中那張紅紅的很刺眼的圖嗎?注意高度值560也是很神奇的。

N(560)=N(2^4*5*7)=18

560/960~=0.583

N(560)比較大，同時(shí)可以讓高寬比接近黃金分割。針對(duì)560,我們采用14x40柵格：網(wǎng)頁的柵格設(shè)計(jì)全文共56頁，當(dāng)前為第26頁。網(wǎng)頁的柵格設(shè)計(jì)全文共56頁，當(dāng)前為第27頁。參考書設(shè)計(jì)幾何學(xué)——關(guān)于比例與構(gòu)成的研究，（美）伊拉姆（Elam,k.），李樂山譯，中國(guó)水利水電出版社，2004年7月。ISBN:9787508415628柵格系統(tǒng)與版式設(shè)計(jì)，（美）伊拉姆（Elam,k.），王昊譯，上海人民美術(shù)出版社，2006年，ISBN:9787532245345書籍設(shè)計(jì)，（英）安德魯·哈斯拉姆（AndrewHaslam），鐘曉南譯，中國(guó)青年出版社，2007年，ISBN:978-7-5006-7531-0網(wǎng)頁的柵格設(shè)計(jì)全文共56頁，當(dāng)前為第28頁。幾種常用的布局一、骨骼型

骨骼型是一種規(guī)范的理性的分割方法。常見的骨骼有豎向通欄、雙欄、三欄、四欄和橫向通欄、雙欄、三欄和四欄等。一般以豎向分欄為多。在圖片和文字的編排上則嚴(yán)格按照骨骼比例進(jìn)行編排配置，給人以嚴(yán)謹(jǐn)、和諧、理性的美。骨骼經(jīng)過相互混合后的版式，既理性、條理，又活潑而具彈性。網(wǎng)頁的柵格設(shè)計(jì)全文共56頁，當(dāng)前為第29頁。網(wǎng)頁的柵格設(shè)計(jì)全文共56頁，當(dāng)前為第30頁。網(wǎng)頁的柵格設(shè)計(jì)全文共56頁，當(dāng)前為第31頁。二、滿版型

版面以圖象充滿整版，主要以圖象為訴求，視覺傳達(dá)直觀而強(qiáng)烈。文字的配置壓置在上下、左右或中部的圖象上。滿版型給人以大方、舒展的感覺，是商品廣告常用的形式。網(wǎng)頁的柵格設(shè)計(jì)全文共56頁，當(dāng)前為第32頁。網(wǎng)頁的柵格設(shè)計(jì)全文共56頁，當(dāng)前為第33頁。網(wǎng)頁的柵格設(shè)計(jì)全文共56頁，當(dāng)前為第34頁。網(wǎng)頁的柵格設(shè)計(jì)全文共56頁，當(dāng)前為第35頁。三、上下分割型

把整個(gè)版面分為上下兩個(gè)部分，在上半部或下半部配置圖片，另一部分則配置文案。配置有圖片的部分感性而有活力，而文案部分則理性而靜止。上下部分配置的圖片可以是一幅或多幅。網(wǎng)頁的柵格設(shè)計(jì)全文共56頁，當(dāng)前為第36頁。網(wǎng)頁的柵格設(shè)計(jì)全文共56頁，當(dāng)前為第37頁。網(wǎng)頁的柵格設(shè)計(jì)全文共56頁，當(dāng)前為第38頁。四、左右分割型

把整個(gè)版面分割為左右兩個(gè)部分，分別在左或右配置文案。當(dāng)左右兩部分形成強(qiáng)弱對(duì)比時(shí)，則造成視覺心理的不平衡。這僅僅是視覺習(xí)慣上的問題，也自然不如上下分割的視覺流程自然。不過，倘若將分割線虛化處理，或用文字進(jìn)行左右重復(fù)或穿插，左右圖文則變得自然和諧。網(wǎng)頁的柵格設(shè)計(jì)全文共56頁，當(dāng)前為第39頁。網(wǎng)頁的柵格設(shè)計(jì)全文共56頁，當(dāng)前為第40頁。網(wǎng)頁的柵格設(shè)計(jì)全文共56頁，當(dāng)前為第41頁。網(wǎng)頁的柵格設(shè)計(jì)全文共56頁，當(dāng)前為第42頁。五、中軸型

將圖形做水平或垂直方向的排列，文案以上下或左右配置。水平排列的版面給人穩(wěn)定、安靜、和平與含蓄之感。垂直排列的版面給人強(qiáng)烈的動(dòng)感。網(wǎng)頁的柵格設(shè)計(jì)全文共56頁，當(dāng)前為第43頁。網(wǎng)頁的柵格設(shè)計(jì)全文共56頁，當(dāng)前為第44頁。網(wǎng)頁的柵格設(shè)計(jì)全文共56頁，當(dāng)前為第45頁。

六、曲線型

圖片或文字在版面結(jié)構(gòu)上作曲線的編排構(gòu)成，產(chǎn)生節(jié)奏和韻律。網(wǎng)頁的柵格設(shè)計(jì)全文共56頁，當(dāng)前為第46頁。網(wǎng)頁的柵格設(shè)計(jì)全文共56頁，當(dāng)前為第47頁。七、傾斜型

版面主體形象或多幅圖版做傾斜編排，造成版面強(qiáng)烈的動(dòng)感和不穩(wěn)定因素，引人注目。網(wǎng)頁的柵格設(shè)計(jì)全文共56頁，當(dāng)前為第48頁。網(wǎng)頁的柵格設(shè)計(jì)全文共56頁，當(dāng)前為第49頁。網(wǎng)頁的柵格設(shè)計(jì)全文共56頁，當(dāng)前為第50頁。八、中心型

重心有三種楷念。1、直接以獨(dú)立而輪廓分明的形象占據(jù)版面中心。2、向心：視覺元素向版面中