如何進(jìn)行網(wǎng)頁(yè)的柵格設(shè)計(jì)分析-創(chuàng)新互聯(lián)

本篇文章給大家分享的是有關(guān)如何進(jìn)行網(wǎng)頁(yè)的柵格設(shè)計(jì)分析,小編覺(jué)得挺實(shí)用的,因此分享給大家學(xué)習(xí),希望大家閱讀完這篇文章后可以有所收獲,話不多說(shuō),跟著小編一起來(lái)看看吧。

創(chuàng)新互聯(lián)是一家專注于成都網(wǎng)站設(shè)計(jì)、成都網(wǎng)站制作與策劃設(shè)計(jì),城北網(wǎng)站建設(shè)哪家好?創(chuàng)新互聯(lián)做網(wǎng)站,專注于網(wǎng)站建設(shè)10年,網(wǎng)設(shè)計(jì)領(lǐng)域的專業(yè)建站公司;建站業(yè)務(wù)涵蓋:城北等地區(qū)。城北做網(wǎng)站價(jià)格咨詢:18980820575

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


以上就是如何進(jìn)行網(wǎng)頁(yè)的柵格設(shè)計(jì)分析,小編相信有部分知識(shí)點(diǎn)可能是我們?nèi)粘9ぷ鲿?huì)見(jiàn)到或用到的。希望你能通過(guò)這篇文章學(xué)到更多知識(shí)。更多詳情敬請(qǐng)關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。

當(dāng)前題目:如何進(jìn)行網(wǎng)頁(yè)的柵格設(shè)計(jì)分析-創(chuàng)新互聯(lián)
分享鏈接:http://muchs.cn/article48/dhgcep.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供外貿(mào)建站、網(wǎng)站設(shè)計(jì)、云服務(wù)器、建站公司、靜態(tài)網(wǎng)站、響應(yīng)式網(wǎng)站

廣告

聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請(qǐng)盡快告知,我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如需處理請(qǐng)聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時(shí)需注明來(lái)源: 創(chuàng)新互聯(lián)

微信小程序開(kāi)發(fā)