- 相關(guān)推薦
網(wǎng)頁(yè)的柵格設計思考-網(wǎng)頁(yè)設計教程
網(wǎng)頁(yè)設計中的臟、亂、差，是我們在設計過(guò)程中常會(huì )碰到的問(wèn)題。通常"臟"是由對色彩使用不當所產(chǎn)生的，而色彩使用不當產(chǎn)生的不好效果也分為："花、灰"，花哨、灰頭土臉也就是這里所說(shuō)的"臟"。我已經(jīng)在早前的一些文章中談過(guò)我對設計中運用色彩的看法。有愛(ài)好的朋友可以查閱一下《色彩解釋》。而"差"
基本上是由于我們的技法上不夠嫻熟所產(chǎn)生的。比如細節上的處理不到位，某個(gè)局部的效果制作得粗糙。這可以稱(chēng)之為"差"，非凡是在處理帶有2D效果的設計作品時(shí)，這種情況常會(huì )出現。但是我今天在本文中所要談的是"亂"。什么是亂?這里的亂不是指用色亂，也不是指內容亂，而主要是指布局亂。以前我有幸接觸了平面設計，并且從中學(xué)到了很多平面設計上的一些知識與技法。其中"柵格設計"就是平面設計中用于處理布局的一種理論。到目前為止我還在研究"柵格設計"。因為著(zhù)實(shí)沒(méi)有什么比較好的語(yǔ)言可以非常簡(jiǎn)潔明了的概括這個(gè)詞。這更像是需要不斷用實(shí)踐去理解的。所以很多時(shí)候我們們都無(wú)法去講述。但是在設計中這個(gè)柵格卻是能幫助我們完成更好作品的一個(gè)非常好用的利器。對于柵格設計我也不能說(shuō)是熟悉深刻，我這里只是依據我對于柵格設計的理解，將之用于網(wǎng)頁(yè)設計中，希望能給更多的朋友們一點(diǎn)啟示，或許能打開(kāi)一些朋友的思路。
單純的文字是沒(méi)辦法讓設計師們耐心的看下去的，所以還是老辦法，用示圖來(lái)作為講解模型。這次我們使用的網(wǎng)頁(yè)是微軟、IBM、ASTRO三個(gè)公司網(wǎng)站來(lái)講解。希望通過(guò)分解這三個(gè)公司的網(wǎng)站設計，能把我所理解的柵格設計傳達出來(lái)。廢話(huà)少說(shuō)，看示圖：
我們看到微軟公司的網(wǎng)站設計中并沒(méi)有什么明顯的線(xiàn)去區隔不同的區塊，但是當我們把當蒙上一層紗，然后用實(shí)線(xiàn)把每個(gè)部分都畫(huà)出來(lái)這時(shí)我們發(fā)現這個(gè)網(wǎng)站其實(shí)是處在一個(gè)柵格陣列中。那么這個(gè)陣列中的內容已經(jīng)很明顯了，并且我們從中發(fā)現了很多區塊在頁(yè)面中的位置居然是那么的有條理，并且有一些并不在一起的區塊，居然也有一定的規律。當然有人可能會(huì )說(shuō)，都用線(xiàn)畫(huà)出來(lái)了當然顯得條理，整潔了。問(wèn)題就在于這里，我們的網(wǎng)站都可以用縱橫線(xiàn)區分開(kāi)。但是一些設計得不好的網(wǎng)站的縱橫線(xiàn)可能數量非常的多，縱橫線(xiàn)的數量過(guò)多并且都擠在一直，這就說(shuō)明網(wǎng)站的布局顯得太亂�；蛘呤沁^(guò)于條理而變得布局平均，沒(méi)有對比，缺乏美感。其實(shí)只要用這樣的方法去分析一下自己設計的作品也許就能從中看到問(wèn)題所在。
我們看到IBM的柵格與MS的有很大的不同，IBM中還出現了一些差不多大的柵格，但是這里要注重其實(shí)這些柵格是由于底部很小的幾個(gè)區塊所產(chǎn)生的，并且這凡個(gè)區塊還可以看作是一個(gè)橫向的區塊。我們從這里可以看到IBM的布局設計是對稱(chēng)的。但是這種對稱(chēng)卻是在離在縱橫線(xiàn)上卻不輕易注重到的。這是很高明的手法。
我們再來(lái)看看ASTRO公司的網(wǎng)站，這個(gè)網(wǎng)站比起上面兩個(gè)公司的網(wǎng)站就更娛樂(lè )化，更有趣了。
從這三個(gè)網(wǎng)站中我們可以看到三種不同風(fēng)格的柵格設計，雖然有所不同，但我們依然可以發(fā)現三者都會(huì )盡可能的把最重要的信息放在視覺(jué)中心點(diǎn)上，不論是放在左邊的還是右邊的或是中間的，他們都得到了最大的柵格區，得到了足夠的重視!我們的視覺(jué)中心也自然盯在了上面!
說(shuō)到這里我依然覺(jué)得沒(méi)能把柵格設計的作用講明白。這里就需要來(lái)訪(fǎng)的朋友們提提你們的看法了。我將會(huì )在以后的時(shí)間繼續關(guān)注柵格設計，希望能將其在網(wǎng)頁(yè)設計中的作用弄得更為清楚!
【網(wǎng)頁(yè)的柵格設計思考-網(wǎng)頁(yè)設計教程】相關(guān)文章：
網(wǎng)頁(yè)設計總結11-09
網(wǎng)頁(yè)設計報告07-31
怎樣網(wǎng)頁(yè)設計03-30
普通網(wǎng)頁(yè)設計與淘寶網(wǎng)頁(yè)設計有什么不同？07-09