網(wǎng)頁(yè)中的平面構(gòu)成

2012-11-24    藍(lán)藍(lán)設(shè)計(jì)的小編

轉(zhuǎn)載藍(lán)藍(lán)設(shè)計(jì)(   sillybuy.com  )是一家專注而深入的設(shè)計(jì)機(jī)構(gòu) ,為期望卓越的國(guó)內(nèi)外企業(yè)提供有效的   BS界面設(shè)計(jì) 、  cs界面設(shè)計(jì) 、  ipad界面設(shè)計(jì)   、  包裝設(shè)計(jì) 、  圖標(biāo)定制 、  用戶體驗(yàn) 、交互設(shè)計(jì)、   網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)

來(lái)源: http://www.uisheji.com/123062.html

如果您想訂閱本博客內(nèi)容,每天自動(dòng)發(fā)到您的郵箱中,            請(qǐng)點(diǎn)這里

 

什么東西都離不開(kāi)基礎(chǔ),建房子需要地基,解方程式需要先學(xué)會(huì)乘法表,唱歌需要先會(huì)“哆、來(lái)、咪”。頁(yè)面設(shè)計(jì) 也同樣需要基礎(chǔ),這個(gè)基礎(chǔ)就是平面 構(gòu)成。 網(wǎng)頁(yè)設(shè)計(jì) 風(fēng)格種多樣,除去一些場(chǎng)景化設(shè)計(jì) 和給力的素材支持,剩下的就全靠平面構(gòu)成和排版了。剛開(kāi)始接觸網(wǎng)頁(yè)設(shè)計(jì) 的時(shí)候,常常會(huì)鉆到某個(gè)局部中去,頁(yè)面風(fēng)格還沒(méi)出現(xiàn),就開(kāi)始做字體細(xì)節(jié),結(jié)果可想而知咯。經(jīng)過(guò)一段時(shí)間的學(xué)習(xí)和實(shí)踐,發(fā)現(xiàn)原來(lái)做網(wǎng)頁(yè)跟繪畫(huà)是一樣,先把內(nèi)容和想法都丟上去,排布出整體風(fēng)格(這里就需要的是平面構(gòu)成排版能力啦),然后再慢慢細(xì)化各部分內(nèi)容。

一、基礎(chǔ)中的基礎(chǔ):點(diǎn)、線、面

點(diǎn)構(gòu)成線,線構(gòu)成面,這些是平面構(gòu)成中的基本要素,也是所有平面設(shè)計(jì) 的基本要素。那么將這些基礎(chǔ)中的基礎(chǔ)運(yùn)用在網(wǎng)頁(yè)設(shè)計(jì)中,又是怎樣的效果呢? 點(diǎn)、線、面這三個(gè)東西不單純的指一個(gè)點(diǎn)、一根線、一個(gè)平面。我們要善于利用文字和圖形的排布,為自己的網(wǎng)頁(yè)增添效果。網(wǎng)頁(yè)中的每一個(gè)文字,每一個(gè)點(diǎn),每一個(gè)圖形都是這個(gè)網(wǎng)頁(yè)的組成元件,文字可組成圖形,圖形也可組成文字,這些都不是限定死的。

網(wǎng)頁(yè)中的平面構(gòu)成

像這樣的構(gòu)成圖片,似乎早就被大家遺忘在大學(xué)和高中了吧,當(dāng)我們被各種豐富多彩的頁(yè)面瞭花了眼的時(shí)候,回頭看看這些基礎(chǔ)的平面構(gòu)成圖案,或許會(huì)有一些新的啟發(fā)和想法

網(wǎng)頁(yè)中的平面構(gòu)成

點(diǎn)構(gòu)成多用于細(xì)碎東西,整合排布和文字排版。集中而規(guī)律的排列,從整體上抓住人們的視覺(jué)

網(wǎng)頁(yè)中的平面構(gòu)成

用一條主線分割畫(huà)面,線條經(jīng)過(guò)的地方有相應(yīng)的內(nèi)容呼應(yīng)。畫(huà)面因?yàn)檫@條線而變得生動(dòng)有趣,也因?yàn)樗姆指罟δ?,整合?guī)劃了不同的內(nèi)容區(qū)域

網(wǎng)頁(yè)中的平面構(gòu)成

線構(gòu)成多用于裝飾與分割,同時(shí)也會(huì)有連貫的功能。線條對(duì)閱讀順序有著一定的引導(dǎo)作用。

若點(diǎn)與線的構(gòu)成大多為細(xì)節(jié)處理,那么面的構(gòu)成則直接影響著網(wǎng)頁(yè)整體風(fēng)格和布局,與線搭配構(gòu)成空間透視效果。

不同的面形狀,呈現(xiàn)出的視覺(jué)效果也不同

網(wǎng)頁(yè)中的平面構(gòu)成

二、各種形式在網(wǎng)頁(yè)中的體現(xiàn)

平面構(gòu)成中的形式在網(wǎng)頁(yè)中常見(jiàn)的有:漸變形式、發(fā)射形式、對(duì)比構(gòu)成。而漸變亦有形狀漸變,顏色漸變。 這些表現(xiàn)形式即豐富了畫(huà)面,又能反應(yīng)出網(wǎng)頁(yè)的整體氛圍

網(wǎng)頁(yè)設(shè)計(jì)并不是單純的作圖,還需要考慮到功能性和閱讀性,因此顏色漸變成為網(wǎng)頁(yè)中常用的表達(dá)方式,形狀漸變卻很少見(jiàn)

網(wǎng)頁(yè)中的平面構(gòu)成

用明度漸變的方式來(lái)表現(xiàn)地圖背景,很好的展示了地圖的樣式,又沒(méi)有因?yàn)樯史倍鄰?fù)雜而看不清主體內(nèi)容。

網(wǎng)頁(yè)中的平面構(gòu)成

發(fā)射形式不利于文字的閱讀和整體排版,所以一般發(fā)射形式多用于背景圖片,或者一些小部分細(xì)節(jié)處理上。

強(qiáng)烈的色彩對(duì)比也會(huì)引起人們的視覺(jué)停留,這種對(duì)比方式一般多用于對(duì)立狀態(tài)或者有著正反義詞組的頁(yè)面,也有時(shí)出現(xiàn)在Q版卡通頁(yè)面中,對(duì)比色色彩鮮艷亮麗,反應(yīng)出孩子的多彩世界。

網(wǎng)頁(yè)中的平面構(gòu)成

三、肌理效果

肌理效果分為:視覺(jué)肌理、觸覺(jué)肌理兩種。介于我們使用的是網(wǎng)絡(luò)媒體,無(wú)法做到觸覺(jué)肌理,所以我們常用視覺(jué)肌理,從視覺(jué)上刺激讀者的感覺(jué),讓他們從眼開(kāi)始對(duì)某種肌理產(chǎn)生聯(lián)想,聯(lián)想到某個(gè)場(chǎng)景效果。 肌理效果強(qiáng)烈的頁(yè)面更多用于游戲官網(wǎng),主題性跟強(qiáng),也多伴有游戲UI 應(yīng)用在頁(yè)面中

網(wǎng)頁(yè)中的平面構(gòu)成

平面構(gòu)成內(nèi)容多且為一切設(shè)計(jì)的基礎(chǔ),這里僅僅給大家分享了一些在網(wǎng)頁(yè)設(shè)計(jì)中常會(huì)用到,遇見(jiàn)的幾個(gè)基礎(chǔ)點(diǎn)。網(wǎng)絡(luò)發(fā)展至今已經(jīng)成為我們生活中不可缺少的一部分,我們從報(bào)紙、雜志到網(wǎng)站、網(wǎng)頁(yè)、電子書(shū),平面設(shè)計(jì)的東西從紙面到了屏幕,他們之間的差別在哪里,那些適合紙面的設(shè)計(jì)是否能完全用于現(xiàn)在的網(wǎng)頁(yè)設(shè)計(jì)呢?我們現(xiàn)在的設(shè)計(jì)在原來(lái)設(shè)計(jì)基礎(chǔ)上,又有了怎樣的變化和發(fā)展?這些都是我們今后網(wǎng)頁(yè)設(shè)計(jì)師們應(yīng)當(dāng)思考探索的。

日歷

鏈接

個(gè)人資料

存檔