網頁設計中的(Of)髒、亂、差，是(Yes)我(I)們在(Exist)設計過程中常會遇到的(Of)問題。通常髒是(Yes)由對色彩使用(Use)不(No)當所産生的(Of)，而色彩使用(Use)不(No)當産生的(Of)不(No)好效果也分爲(For)：花、灰，花哨、灰頭土臉也就是(Yes)這(This)裏所說的(Of)髒。我(I)已經在(Exist)早前的(Of)一(One)些文章中談過我(I)對設計中運用(Use)色彩的(Of)看法。有興趣的(Of)朋友可以(By)查閱一(One)下《色彩解釋》。而"差" 基本上(Superior)是(Yes)由于(At)我(I)們的(Of)技法上(Superior)不(No)夠娴熟所産生的(Of)。比如細節上(Superior)的(Of)處理不(No)到位，某個(Indivual)局部的(Of)效果制作(Do)得粗糙。這(This)可以(By)稱之爲(For)"差"，特别是(Yes)在(Exist)處理帶有2D效果的(Of)設計作(Do)品時(Hour)，這(This)種情況常會出(Out)現。但是(Yes)我(I)今天在(Exist)本文中所要(Want)談的(Of)是(Yes)"亂"。什麽是(Yes)亂？這(This)裏的(Of)亂不(No)是(Yes)指用(Use)色亂，也不(No)是(Yes)指内容亂，而主要(Want)是(Yes)指布局亂。以(By)前我(I)有幸接觸了(Got it)平面設計，并且從中學到了(Got it)很多平面設計上(Superior)的(Of)一(One)些知識與技法。其中"栅格設計"就是(Yes)平面設計中用(Use)于(At)處理布局的(Of)一(One)種理論。到目前爲(For)止我(I)還在(Exist)研究"栅格設計"。因爲(For)着實沒有什麽比較好的(Of)語言可以(By)非常簡潔明了(Got it)的(Of)概括這(This)個(Indivual)詞。這(This)更像是(Yes)需要(Want)不(No)斷用(Use)實踐去理解的(Of)。所以(By)很多時(Hour)候我(I)們們都無法去講述。但是(Yes)在(Exist)設計中這(This)個(Indivual)栅格卻是(Yes)能幫助我(I)們完成更好作(Do)品的(Of)一(One)個(Indivual)非常好用(Use)的(Of)利器。對于(At)栅格設計我(I)也不(No)能說是(Yes)認識深刻，我(I)這(This)裏隻是(Yes)依據我(I)對于(At)栅格設計的(Of)理解，将之用(Use)于(At)網頁設計中，希望能給更多的(Of)朋友們一(One)點啓示，或許能打開一(One)些朋友的(Of)思路。

 

　　單純的(Of)文字是(Yes)沒辦法讓設計師們耐心的(Of)看下去的(Of)，所以(By)還是(Yes)老辦法，用(Use)示圖來(Come)作(Do)爲(For)講解模型。這(This)次我(I)們使用(Use)的(Of)網頁是(Yes)微軟、IBM、ASTRO三個(Indivual)公司網站來(Come)講解。希望通過分解這(This)三個(Indivual)公司的(Of)網站設計，能把我(I)所理解的(Of)栅格設計傳達出(Out)來(Come)。

 

　我(I)們看到微軟公司的(Of)網站設計中并沒有什麽明顯的(Of)線去區隔不(No)同的(Of)區塊，但是(Yes)當我(I)們把當蒙上(Superior)一(One)層紗，然後用(Use)實線把每個(Indivual)部分都畫出(Out)來(Come)這(This)時(Hour)我(I)們發現這(This)個(Indivual)網站其實是(Yes)處在(Exist)一(One)個(Indivual)栅格陣列中。那麽這(This)個(Indivual)陣列中的(Of)内容已經很明顯了(Got it)，并且我(I)們從中發現了(Got it)很多區塊在(Exist)頁面中的(Of)位置居然是(Yes)那麽的(Of)有條理，并且有一(One)些并不(No)在(Exist)一(One)起的(Of)區塊，居然也有一(One)定的(Of)規律。當然有人(People)可能會說，都用(Use)線畫出(Out)來(Come)了(Got it)當然顯得條理，整齊了(Got it)。問題就在(Exist)于(At)這(This)裏，我(I)們的(Of)網站都可以(By)用(Use)縱橫線區分開。但是(Yes)一(One)些設計得不(No)好的(Of)網站的(Of)縱橫線可能數量非常的(Of)多，縱橫線的(Of)數量過多并且都擠在(Exist)一(One)直，這(This)就說明網站的(Of)布局顯得太亂。或者是(Yes)過于(At)條理而變得布局平均，沒有對比，缺乏美感。其實隻要(Want)用(Use)這(This)樣的(Of)方法去分析一(One)下自己設計的(Of)作(Do)品也許就能從中看到問題所在(Exist)。 

 

　我(I)們看到IBM的(Of)栅格與MS的(Of)有很大(Big)的(Of)不(No)同，IBM中還出(Out)現了(Got it)一(One)些差不(No)多大(Big)的(Of)栅格，但是(Yes)這(This)裏要(Want)注意其實這(This)些栅格是(Yes)由于(At)底部很小的(Of)幾個(Indivual)區塊所産生的(Of)，并且這(This)凡個(Indivual)區塊還可以(By)看作(Do)是(Yes)一(One)個(Indivual)橫向的(Of)區塊。我(I)們從這(This)裏可以(By)看到IBM的(Of)布局設計是(Yes)對稱的(Of)。但是(Yes)這(This)種對稱卻是(Yes)在(Exist)離在(Exist)縱橫線上(Superior)卻不(No)容易注意到的(Of)。這(This)是(Yes)很高明的(Of)手法。

 

　　我(I)們再來(Come)看看ASTRO公司的(Of)網站，這(This)個(Indivual)網站比起上(Superior)面兩個(Indivual)公司的(Of)網站就更娛樂化，更有趣了(Got it)。

 

從這(This)三個(Indivual)網站中我(I)們可以(By)看到三種不(No)同風格的(Of)栅格設計，雖然有所不(No)同，但我(I)們依然可以(By)發現三者都會盡可能的(Of)把最重要(Want)的(Of)信息放在(Exist)視覺中心點上(Superior)，不(No)論是(Yes)放在(Exist)左邊的(Of)還是(Yes)右邊的(Of)或是(Yes)中間的(Of)，他(He)們都得到了(Got it)最大(Big)的(Of)栅格區，得到了(Got it)足夠的(Of)重視！我(I)們的(Of)視覺中心也自然盯在(Exist)了(Got it)上(Superior)面！

 

　　說到這(This)裏我(I)依然覺得沒能把栅格設計的(Of)作(Do)用(Use)講明白。這(This)裏就需要(Want)來(Come)訪的(Of)朋友們提提你們的(Of)看法了(Got it)。我(I)将會在(Exist)以(By)後的(Of)時(Hour)間繼續關注栅格設計，希望能将其在(Exist)網頁設計中的(Of)作(Do)用(Use)弄得更爲(For)清楚！