建站常識(shí)
網(wǎng)頁(yè)的柵格設(shè)計(jì)思考
2007-11-12 13:40:00
網(wǎng)頁(yè)設(shè)計(jì)中的臟、亂、差,是我們?cè)谠O(shè)計(jì)過程中常會(huì)遇到的問題。通常"臟"是由對(duì)色彩使用不當(dāng)所產(chǎn)生的,而色彩使用不當(dāng)產(chǎn)生的不好效果也分為:"花、灰",花哨、灰頭土臉也就是這里所說的"臟"。我已經(jīng)在早前的一些文章中談過我對(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í)沒有什么比較好的語(yǔ)言可以非常簡(jiǎn)潔明了的概括這個(gè)詞。這更像是需要不斷用實(shí)踐去理解的。所以很多時(shí)候我們們都無法去講述。但是在設(shè)計(jì)中這個(gè)柵格卻是能幫助我們完成更好作品的一個(gè)非常好用的利器。對(duì)于柵格設(shè)計(jì)我也不能說是認(rèn)識(shí)深刻,我這里只是依據(jù)我對(duì)于柵格設(shè)計(jì)的理解,將之用于網(wǎng)頁(yè)設(shè)計(jì)中,希望能給更多的朋友們一點(diǎn)啟示,或許能打開一些朋友的思路。
單純的文字是沒辦法讓設(shè)計(jì)師們耐心的看下去的,所以還是老辦法,用示圖來作為講解模型。這次我們使用的網(wǎng)頁(yè)是微軟、IBM、ASTRO三個(gè)公司網(wǎng)站來講解。希望通過分解這三個(gè)公司的網(wǎng)站設(shè)計(jì),能把我所理解的柵格設(shè)計(jì)傳達(dá)出來。廢話少說,看示圖:
我們看到微軟公司的網(wǎng)站設(shè)計(jì)中并沒有什么明顯的線去區(qū)隔不同的區(qū)塊,但是當(dāng)我們把當(dāng)蒙上一層紗,然后用實(shí)線把每個(gè)部分都畫出來這時(shí)我們發(fā)現(xiàn)這個(gè)網(wǎng)站其實(shí)是處在一個(gè)柵格陣列中。那么這個(gè)陣列中的內(nèi)容已經(jīng)很明顯了,并且我們從中發(fā)現(xiàn)了很多區(qū)塊在頁(yè)面中的位置居然是那么的有條理,并且有一些并不在一起的區(qū)塊,居然也有一定的規(guī)律。當(dāng)然有人可能會(huì)說,都用線畫出來了當(dāng)然顯得條理,整齊了。問題就在于這里,我們的網(wǎng)站都可以用縱橫線區(qū)分開。但是一些設(shè)計(jì)得不好的網(wǎng)站的縱橫線可能數(shù)量非常的多,縱橫線的數(shù)量過多并且都擠在一直,這就說明網(wǎng)站的布局顯得太亂?;蛘呤沁^于條理而變得布局平均,沒有對(duì)比,缺乏美感。其實(shí)只要用這樣的方法去分析一下自己設(shè)計(jì)的作品也許就能從中看到問題所在。
下面我們?cè)賮砜匆幌翴BM的網(wǎng)站的分解圖:
我們看到IBM的柵格與MS的有很大的不同,IBM中還出現(xiàn)了一些差不多大的柵格,但是這里要注意其實(shí)這些柵格是由于底部很小的幾個(gè)區(qū)塊所產(chǎn)生的,并且這凡個(gè)區(qū)塊還可以看作是一個(gè)橫向的區(qū)塊。我們從這里可以看到IBM的布局設(shè)計(jì)是對(duì)稱的。但是這種對(duì)稱卻是在離在縱橫線上卻不容易注意到的。這是很高明的手法。
我們?cè)賮砜纯碅STRO公司的網(wǎng)站,這個(gè)網(wǎng)站比起上面兩個(gè)公司的網(wǎng)站就更娛樂化,更有趣了。
從這三個(gè)網(wǎng)站中我們可以看到三種不同風(fēng)格的柵格設(shè)計(jì),雖然有所不同,但我們依然可以發(fā)現(xiàn)三者都會(huì)盡可能的把最重要的信息放在視覺中心點(diǎn)上,不論是放在左邊的還是右邊的或是中間的,他們都得到了最大的柵格區(qū),得到了足夠的重視!我們的視覺中心也自然盯在了上面!
說到這里我依然覺得沒能把柵格設(shè)計(jì)的作用講明白。這里就需要來訪的朋友們提提你們的看法了。我將會(huì)在以后的時(shí)間繼續(xù)關(guān)注柵格設(shè)計(jì),希望能將其在網(wǎng)頁(yè)設(shè)計(jì)中的作用弄得更為清楚!
近期更新
- [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)該更看重框架搭建還是視覺觀感?
- [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ì)?
延伸閱讀
- [2006-04-07 16:45:00] 文字,你到底能多大?--分析網(wǎng)頁(yè)文字的字號(hào)
- [2007-08-06 12:23:00] 網(wǎng)頁(yè)設(shè)計(jì)中的版式原理--空白
- [2007-01-09 09:37:00] 《網(wǎng)頁(yè)配色密碼》
- [2007-08-06 12:21:00] 網(wǎng)頁(yè)設(shè)計(jì)中的版式原理--均衡
- [2007-01-15 16:18:00] 網(wǎng)頁(yè)界面設(shè)計(jì)教程七:動(dòng)畫設(shè)計(jì)
- [2006-10-08 07:59:00] 網(wǎng)頁(yè)設(shè)計(jì)配色應(yīng)用——色調(diào)
- [2006-06-24 12:10:00] 如何設(shè)計(jì)網(wǎng)頁(yè)
- [2009-06-07 23:02:00] 網(wǎng)頁(yè)設(shè)計(jì)趨勢(shì)發(fā)展歷程之2009下
- [2007-08-06 12:17:00] 網(wǎng)頁(yè)設(shè)計(jì)中的版式原理--對(duì)稱
- [2010-03-03 14:19:00] 網(wǎng)頁(yè)表單中的行為也分主次
- [2006-01-08 21:00:00] 從美的原則談網(wǎng)頁(yè)上的藝術(shù)表現(xiàn)
- [2006-02-27 16:10:00] 網(wǎng)頁(yè)導(dǎo)航設(shè)計(jì)九大注意事項(xiàng)
解決方案
輪胎行業(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)鍵字
海信網(wǎng)絡(luò)科技 青島網(wǎng)頁(yè)設(shè)計(jì) 營(yíng)銷型網(wǎng)站建設(shè) 青島網(wǎng)站SEO 力圖數(shù)字科技 網(wǎng)站設(shè)計(jì) 插畫 用戶界面 網(wǎng)站交互設(shè)計(jì) 良好的導(dǎo)航 青島好的網(wǎng)站優(yōu)化公司 膠南網(wǎng)站建設(shè)公司 青島輪胎網(wǎng)站設(shè)計(jì) 微網(wǎng)站 H5定制設(shè)計(jì) 網(wǎng)站開發(fā) html和css 青島網(wǎng)站建設(shè) 企業(yè)網(wǎng)站設(shè)計(jì) 程序開發(fā) 平面設(shè)計(jì) 網(wǎng)頁(yè)設(shè)計(jì) 網(wǎng)站策劃 網(wǎng)站建設(shè)的步驟有哪些 網(wǎng)站制作 圖形網(wǎng)格 頁(yè)面設(shè)計(jì) 交互設(shè)計(jì) 青島抖音小程序開發(fā) 英文網(wǎng)站建設(shè)