刪格設(shè)計解決網(wǎng)站布局亂的問題_網(wǎng)頁設(shè)計教程
推薦:你適合做網(wǎng)站設(shè)計師嗎?近年來,隨著網(wǎng)絡(luò)的急速竄紅,網(wǎng)頁設(shè)計一夕之間成了炙手可熱的職業(yè)。不少從事多年平面、多媒體、產(chǎn)品設(shè)計甚至純美術(shù)的工作者,愿意放棄累積多年的經(jīng)歷,投入
網(wǎng)頁設(shè)計中的臟、亂、差,是我們在設(shè)計過程中常會碰到的問題。通常"臟"是由對色彩使用不當所產(chǎn)生的,而色彩使用不當產(chǎn)生的不好效果也分為:"花、灰",花哨、灰頭土臉也就是這里所說的"臟"。而"差" 基本上是由于我們的技法上不夠嫻熟所產(chǎn)生的。比如細節(jié)上的處理不到位,某個局部的效果制作得粗糙。這可以稱之為"差",非凡是在處理帶有2D效果的設(shè)計作品時,這種情況常會出現(xiàn)。但是我今天在本文中所要談的是"亂"。
什么是亂?這里的亂不是指用色亂,也不是指內(nèi)容亂,而主要是指網(wǎng)頁布局亂。以前我有幸接觸了平面設(shè)計,并且從中學(xué)到了很多平面設(shè)計上的一些知識與技法。其中“柵格設(shè)計”就是平面設(shè)計中用于處理布局的一種理論。到目前為止我還在研究"柵格設(shè)計"。因為著實沒有什么比較好的語言可以非常簡潔明了的概括這個詞。這更像是需要不斷用實踐去理解的。所以很多時候我們們都無法去講述。但是在設(shè)計中這個柵格卻是能幫助我們完成更好作品的一個非常好用的利器。對于柵格設(shè)計我也不能說是熟悉深刻,我這里只是依據(jù)我對于柵格設(shè)計的理解,將之用于網(wǎng)頁設(shè)計中,希望能給更多的朋友們一點啟示,或許能打開一些朋友的思路。
單純的文字是沒辦法讓設(shè)計師們耐心的看下去的,所以還是老辦法,用示圖來作為講解模型。這次我們使用的網(wǎng)頁是微軟、IBM、ASTRO三個公司網(wǎng)站來講解。希望通過分解這三個公司的網(wǎng)站設(shè)計,能把我所理解的柵格設(shè)計傳達出來�?词緢D:
我們看到微軟公司的網(wǎng)站設(shè)計中并沒有什么明顯的線去區(qū)隔不同的區(qū)塊,但是當我們把當蒙上一層紗,然后用實線把每個部分都畫出來這時我們發(fā)現(xiàn)這個網(wǎng)站其實是處在一個柵格陣列中。那么這個陣列中的內(nèi)容已經(jīng)很明顯了,并且我們從中發(fā)現(xiàn)了很多區(qū)塊在頁面中的位置居然是那么的有條理,并且有一些并不在一起的區(qū)塊,居然也有一定的規(guī)律。當然有人可能會說,都用線畫出來了當然顯得條理,整潔了。問題就在于這里,我們的網(wǎng)站都可以用縱橫線區(qū)分開。但是一些設(shè)計得不好的網(wǎng)站的縱橫線可能數(shù)量非常的多,縱橫線的數(shù)量過多并且都擠在一直,這就說明網(wǎng)站的布局顯得太亂�;蛘呤沁^于條理而變得布局平均,沒有對比,缺乏美感。其實只要用這樣的方法去分析一下自己設(shè)計的作品也許就能從中看到問題所在。
下面我們再來看一下IBM的網(wǎng)站的分解圖:
我們看到IBM的柵格與MS的有很大的不同,IBM中還出現(xiàn)了一些差不多大的柵格,但是這里要注重其實這些柵格是由于底部很小的幾個區(qū)塊所產(chǎn)生的,并且這凡個區(qū)塊還可以看作是一個橫向的區(qū)塊。我們從這里可以看到IBM的布局設(shè)計是對稱的。但是這種對稱卻是在離在縱橫線上卻不輕易注重到的。這是很高明的手法。
我們再來看看ASTRO公司的網(wǎng)站,這個網(wǎng)站比起上面兩個公司的網(wǎng)站就更娛樂化,更有趣了。
從這三個網(wǎng)站中我們可以看到三種不同風(fēng)格的柵格設(shè)計,雖然有所不同,但我們依然可以發(fā)現(xiàn)三者都會盡可能的把最重要的信息放在視覺中心點上,不論是放在左邊的還是右邊的或是中間的,他們都得到了最大的柵格區(qū),得到了足夠的重視!我們的視覺中心也自然盯在了上面!
分享:淘寶的交易評價“有問題”每個月都要在淘寶上花掉至少幾百塊錢。每一次交易都能感受到淘寶的“交易評價”設(shè)計的比較傻。這次在買一個錄音筆的時候碰到了一個比較“軸”的賣家,終于在“
- 中國互聯(lián)網(wǎng)黑色產(chǎn)業(yè)人數(shù)近10萬 5分鐘1起網(wǎng)絡(luò)入侵
- 馬云最后的發(fā)布會:打假,打出阿里的新未來
- 實踐分享:ACCESS數(shù)據(jù)庫導(dǎo)入mysql數(shù)據(jù)庫
- ACCESS數(shù)據(jù)庫轉(zhuǎn)ORACLE數(shù)據(jù)庫分享
- CDN.net免費CDN申請使用教程:100GB流量香港日本新加坡節(jié)點
- WordPress 教程:為插件自定義數(shù)據(jù)表
- 如何使用查找我的iPhone教程
- 微信公眾平臺教程(二) 消息管理與群發(fā)
- 中國IPv4地址今年將告罄 IPv6期待打破政策局
- 移動廣告野蠻成長:75%投放在iOS平臺
- 災(zāi)難面前,互聯(lián)網(wǎng)公司可以如何做的更好?
- 富士康500萬部iPhone遭蘋果退貨 損失10億元
- 相關(guān)鏈接:
- 教程說明:
網(wǎng)頁設(shè)計教程-刪格設(shè)計解決網(wǎng)站布局亂的問題
。


