建站常識(shí)
刪格設(shè)計(jì)解決網(wǎng)站布局亂的問(wèn)題
2008-01-18 15:03:00
網(wǎng)頁(yè)設(shè)計(jì)中的臟、亂、差,是我們?cè)谠O(shè)計(jì)過(guò)程中常會(huì)遇到的問(wèn)題。通常"臟"是由對(duì)色彩使用不當(dāng)所產(chǎn)生的,而色彩使用不當(dāng)產(chǎn)生的不好效果也分為:"花、灰",花哨、灰頭土臉也就是這里所說(shuō)的"臟"。而"差" 基本上是由于我們的技法上不夠嫻熟所產(chǎn)生的。比如細(xì)節(jié)上的處理不到位,某個(gè)局部的效果制作得粗糙。這可以稱之為"差",特別是在處理帶有2D效果的設(shè)計(jì)作品時(shí),這種情況常會(huì)出現(xiàn)。但是我今天在本文中所要談的是"亂"。
什么是亂?這里的亂不是指用色亂,也不是指內(nèi)容亂,而主要是指網(wǎng)頁(yè)布局亂。以前我有幸接觸了平面設(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)啟示,或許能打開一些朋友的思路。
單純的文字是沒(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)??词緢D:
我們看到微軟公司的網(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ū)分開。但是一些設(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)站的分解圖:
我們看到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è)化,更有趣了。
從這三個(gè)網(wǎng)站中我們可以看到三種不同風(fēng)格的柵格設(shè)計(jì),雖然有所不同,但我們依然可以發(fā)現(xiàn)三者都會(huì)盡可能的把最重要的信息放在視覺(jué)中心點(diǎn)上,不論是放在左邊的還是右邊的或是中間的,他們都得到了最大的柵格區(qū),得到了足夠的重視!我們的視覺(jué)中心也自然盯在了上面!
近期更新
- [2023-06-25 23:22:29] 優(yōu)秀網(wǎng)站設(shè)計(jì)的五大特點(diǎn)
- [2023-04-27 14:05:55] Html 5 響應(yīng)式網(wǎng)站設(shè)計(jì)制作
- [2023-04-10 11:07:30] 網(wǎng)站建設(shè)制作流程知多少
- [2022-10-14 10:11:30] 做網(wǎng)站設(shè)計(jì)應(yīng)該更看重框架搭建還是視覺(jué)觀感?
- [2022-08-09 15:57:48] 以“產(chǎn)品”思維搭建網(wǎng)站!
- [2022-08-08 09:12:57] 一家公司的網(wǎng)站應(yīng)該有哪些板塊內(nèi)容?
- [2022-08-05 09:28:06] 企業(yè)網(wǎng)站建設(shè)為什么要設(shè)置新聞板塊?
- [2022-07-04 15:58:06] 網(wǎng)站首頁(yè)設(shè)計(jì)的好看,這個(gè)網(wǎng)站就成功了一大半!
- [2022-05-20 09:34:19] 網(wǎng)站后臺(tái)管理系統(tǒng)是什么?有什么作用?
- [2022-05-17 11:29:32] 作為消費(fèi)者,應(yīng)該如何選擇一家水平高的網(wǎng)站建設(shè)公司
- [2022-05-17 11:27:01] 高端網(wǎng)站定制與模板化網(wǎng)站應(yīng)該怎么選擇?
- [2022-04-22 16:00:41] 現(xiàn)在高端的網(wǎng)站設(shè)計(jì)都有哪些新的趨勢(shì)?
延伸閱讀
- [2008-02-22 10:32:00] 如何進(jìn)行網(wǎng)站布局
- [2007-05-09 09:00:00] 注意你的網(wǎng)站布局對(duì)訪者的友好程度
解決方案
輪胎行業(yè)網(wǎng)站設(shè)計(jì)解決方案 機(jī)械行業(yè)網(wǎng)站設(shè)計(jì)解決方案 房地產(chǎn)行業(yè)網(wǎng)站設(shè)計(jì)解決方案 科技企業(yè)網(wǎng)站設(shè)計(jì)解決方案 電子家電網(wǎng)站設(shè)計(jì)解決方案 食品行業(yè)網(wǎng)站設(shè)計(jì)解決方案 集團(tuán)公司網(wǎng)站設(shè)計(jì)解決方案 企事業(yè)單位網(wǎng)站設(shè)計(jì)解決方案 外貿(mào)行業(yè)網(wǎng)站設(shè)計(jì)解決方案 健身運(yùn)動(dòng)網(wǎng)站設(shè)計(jì)解決方案 美容與化妝品網(wǎng)站設(shè)計(jì)解決方案 建筑設(shè)計(jì)行業(yè)網(wǎng)站設(shè)計(jì)解決方案 物流行業(yè)網(wǎng)站設(shè)計(jì)解決方案
TAGS關(guān)鍵字
集團(tuán)官網(wǎng) 力圖 高端網(wǎng)站設(shè)計(jì) 交互設(shè)計(jì) 官網(wǎng)網(wǎng)站建設(shè) 輪胎網(wǎng)站設(shè)計(jì) 青島網(wǎng)站制作 青島高端網(wǎng)站建設(shè)公司哪家好 微官網(wǎng)帶來(lái)的好處 中小型企業(yè)網(wǎng)站建設(shè) 青島網(wǎng)站設(shè)計(jì)哪家好 H5定制設(shè)計(jì) 網(wǎng)站動(dòng)畫 英文網(wǎng)站建設(shè) 青島好的網(wǎng)站優(yōu)化公司 青島不錯(cuò)的英文網(wǎng)站建設(shè)公司 微信小程序 青島抖音小程序開發(fā) 舒適的界面 網(wǎng)站優(yōu)化 微網(wǎng)站 營(yíng)銷型網(wǎng)站 膠南網(wǎng)站建設(shè)公司 手機(jī)端的網(wǎng)站 網(wǎng)站設(shè)計(jì)資訊 微官網(wǎng) 網(wǎng)站設(shè)計(jì)趨勢(shì) 青島高端網(wǎng)站設(shè)計(jì)公司哪家好 SEO優(yōu)化 用戶界面