網(wǎng)頁設(shè)計的版式設(shè)計課件

第四章網(wǎng)頁藝術(shù)設(shè)計的版式設(shè)計

第四章網(wǎng)頁藝術(shù)設(shè)計的版式設(shè)計【內(nèi)容提要】

網(wǎng)頁的版式設(shè)計形成了網(wǎng)頁整體視覺印象，體現(xiàn)了網(wǎng)頁的風(fēng)格。網(wǎng)頁的版式設(shè)計包括點(diǎn)線面的構(gòu)成、布局設(shè)計、視覺流程、空間設(shè)計和動態(tài)設(shè)計等幾個方面。

【關(guān)鍵詞】

構(gòu)成布局視覺流程空間動態(tài)【內(nèi)容提要】第一節(jié)什么是網(wǎng)頁版式設(shè)計

網(wǎng)頁的版式設(shè)計，是指在有限的屏幕空間內(nèi),按照設(shè)計師的想法、意圖將網(wǎng)頁的形態(tài)要素按照一定的藝術(shù)規(guī)律進(jìn)行組織和布局，使其形成整體視覺印象，最終達(dá)到有效傳達(dá)信息的視覺設(shè)計。

第一節(jié)什么是網(wǎng)頁版式設(shè)計網(wǎng)頁

網(wǎng)頁的版式設(shè)計決定了網(wǎng)頁的藝術(shù)風(fēng)格和個性特征。網(wǎng)頁的版式設(shè)計是設(shè)計師理性思維與感性表達(dá)的產(chǎn)物。網(wǎng)頁的版式設(shè)計要達(dá)到形式和內(nèi)容的統(tǒng)一。www.sodis.co.kr網(wǎng)頁的版式設(shè)計決定了網(wǎng)頁的藝術(shù)風(fēng)格和個性特征。ww

www.karina-

網(wǎng)頁的版式設(shè)計由于終端顯示載體的不同而具有自身的特色：www.spehzies.de網(wǎng)頁的版式設(shè)計由于終端顯示載體的不同而具有自身第二節(jié)網(wǎng)頁版式設(shè)計的點(diǎn)、線、面

網(wǎng)頁的形態(tài)要素如文字、圖像、動畫、影像等要素相當(dāng)于語言中的單詞，網(wǎng)頁的形式法則和構(gòu)成規(guī)律則是將它們組合起來的句法和語法。第二節(jié)網(wǎng)頁版式設(shè)計的點(diǎn)、線、面

一、網(wǎng)頁版式設(shè)計中的點(diǎn)點(diǎn)的形狀、方向、大小、位置、聚散的變化，能夠給人帶來不同的心理感受和視覺沖擊，產(chǎn)生各種不同的視覺效果。amaztype.tha.jp一、網(wǎng)頁版式設(shè)計中的點(diǎn)amaztype.tha.www.thisismusicboxwww.thisismusicbox二、網(wǎng)頁版式設(shè)計中的線不同的線可以引發(fā)人的各種心理效應(yīng)，具有不同的情感傾向。

二、網(wǎng)頁版式設(shè)計中的線

三、網(wǎng)頁版式設(shè)計中的面面既可以是有形的位置，又可以是虛無的空間。

三、網(wǎng)頁版式設(shè)計中的面www.lifesupp.

四、點(diǎn)、線、面在網(wǎng)頁中的綜合運(yùn)用點(diǎn)、線、面在網(wǎng)頁中的運(yùn)用不是孤立的。

四、點(diǎn)、線、面在網(wǎng)頁中的綜合運(yùn)用www.is

www.hansihelle.dewww.hansihelle.

在網(wǎng)頁中，點(diǎn)、線、面的構(gòu)成常常是以下構(gòu)成手法的應(yīng)用：

1.對稱與均衡

在網(wǎng)頁中，點(diǎn)、線、面的構(gòu)成常常是以下構(gòu)成手法的應(yīng)2.對比與調(diào)和

www.pixelbarbecue.ch2.對比與調(diào)和www.stylesucks.co3.節(jié)奏與韻律

3.節(jié)奏與韻律www.inkgraphix.c4.聚散與留白

4.聚散與留白www.clairepettib5.解構(gòu)與重構(gòu)www.metamute.de

5.解構(gòu)與重構(gòu)www.metamute.de第三節(jié)網(wǎng)頁版式設(shè)計的布局

一、版式結(jié)構(gòu)的分割在結(jié)構(gòu)上利用點(diǎn)、線、面等元素劃分網(wǎng)頁頁面為不同的視覺區(qū)域就是結(jié)構(gòu)的分割。第三節(jié)網(wǎng)頁版式設(shè)計的布局一、版式結(jié)構(gòu)的分割1.框架式分割框架式分割是一種理性的分割形式，是指利用各種不同的方形框架對網(wǎng)頁進(jìn)行分割。

1.框架式分割

www.fluid.nlwww.ciudadesmexicanaspatrimoni2.自由式分割自由式分割用各種顯性或隱性的直線、曲線或交叉線自由分割頁面。（1）滿版型

2.自由式分割corpsebridemovie.（2）直線分割型www.hidrante.art.br（2）直線分割型www.hidrante.art.br（3）曲線分割型www.altesclub.co.kr（3）曲線分割型www.altesclub.co.kr（4）自由型

（4）自由型

二、版式設(shè)計中的場效應(yīng)場的概念來自于造型藝術(shù)，是指畫面的心理空間定式，其實(shí)質(zhì)是指人們對空間的心理感知。物體間的相互作用力，會誘導(dǎo)人們內(nèi)心發(fā)生反應(yīng)變化，如穩(wěn)定、失衡、緊張、放松、壓抑等感覺。人們的心理在種種力的間接作用下，對空間所產(chǎn)生的知覺范圍也就是心理力場。這種主觀精神世界對客觀物理空間的感知聯(lián)想，以及客觀物理空間對人的心理世界的刺激作用所產(chǎn)生的互動效應(yīng)，就是一種藝術(shù)上的場效應(yīng)。因此，無論在視覺傳達(dá)設(shè)計中的虛擬空間，或是在產(chǎn)品乃至環(huán)境藝術(shù)設(shè)計中的現(xiàn)實(shí)空間，其實(shí)質(zhì)是一種場效應(yīng)。二、版式設(shè)計中的場效應(yīng)1.四方形場.br1.四方形場www.aldesigner.c

2.橢圓形場www.3mind.it2.橢圓形場www.3mind.itwww.yugioh.co.krwww.yugioh.co.kr3.網(wǎng)格花紋場

3.網(wǎng)格花紋場www.vogueing.jpwww.vogueing.jp4.臺形場

4.臺形場

5.帶狀形場

5.帶狀形場www.bytesphere.n

6.之字形場

6.之字形場www.zhihuidasha

7.塊面形場27.塊面形場2www.subaru.co.jpwww.subaru.co.jp8.色彩場

8.色彩場9.綜合場www.rendez-fou.be9.綜合場www.rendez-fou.be第四節(jié)網(wǎng)頁版式設(shè)計的視覺流程

所謂的視覺流程，是指頁面內(nèi)容的一種視覺傳達(dá)過程，它是以人的生理和心理習(xí)慣的認(rèn)知模式來進(jìn)行的，是將各種構(gòu)成要素在視覺運(yùn)動的規(guī)定下進(jìn)行空間定位。第四節(jié)網(wǎng)頁版式設(shè)計的視覺流程

一、視覺流程原理

1.視覺流程的產(chǎn)生視覺流程既是一種人眼的生理運(yùn)動，也包含了心理的微妙變化，是建立在視覺經(jīng)驗(yàn)上的視線移動。一、視覺流程原理2.網(wǎng)頁的最佳視域

2.網(wǎng)頁的最佳視域

二、網(wǎng)頁中的視覺流程

1.視覺流程的三階段當(dāng)我們?yōu)g覽網(wǎng)頁時，視覺流程通常是首先在一瞬間迅速瀏覽頁面，形成第一印象，接著視線就會從最吸引注意力的一點(diǎn)開始依次作有序的流動，最后完成信息的傳遞。整個過程包括印象感知（第一印象）、運(yùn)動感知（感知過程）、整體感知（最終印象）三個心理感知階段，而每一階段各視覺要素發(fā)揮的作用都有所不同。二、網(wǎng)頁中的視覺流程2.視覺流程的設(shè)計要求（1）符合人的視覺習(xí)慣

2.視覺流程的設(shè)計要求（2）保持信息傳達(dá)的有效性gozone.jp（2）保持信息傳達(dá)的有效性gozone.jp（3）突出主要信息www.bnx.co.kr（3）突出主要信息www.bnx.co.krwww.urbansmith.co.krwww.urbansmith.co.kr（4）注意引導(dǎo)節(jié)奏感和流暢感

www.bascule.co.jp（4）注意引導(dǎo)節(jié)奏感和流暢感w

３.頁面之間的視覺流程合理的站點(diǎn)地圖和導(dǎo)航設(shè)計是保持網(wǎng)站視覺連續(xù)性和信息傳達(dá)有效性的著力點(diǎn)。

３.頁面之間的視覺流程www.sidewalksof

第五節(jié)網(wǎng)頁版式設(shè)計的空間

網(wǎng)頁的視覺空間不僅是物理空間的使用，更多的是通過各種視覺手段去改變?yōu)g覽者的視覺心理感受，以創(chuàng)造出舒適、和諧的視覺心理空間。第五節(jié)網(wǎng)頁版式設(shè)計的空間網(wǎng)頁一、平面空間www.citric.ws一、平面空間www.citric.ws二、層次空間www.superlooper.de二、層次空間www.superlooper.de

三、虛擬空間

www.freisign.de三、虛擬空間www.frei四、導(dǎo)航空間

四、導(dǎo)航空間第六節(jié)網(wǎng)頁版式設(shè)計的動態(tài)化一、多媒體的動態(tài)利用從單個頁面看，多媒體的利用是網(wǎng)頁動態(tài)設(shè)計的主要途徑。

第六節(jié)網(wǎng)頁版式設(shè)計的動態(tài)化一、多媒體的動態(tài)利用www二、超鏈接的跳躍動感網(wǎng)頁的超鏈接，打破了以前人們接受信息的線性方式，形成網(wǎng)頁的多屏、多頁、嵌套的特征。

二、超鏈接的跳躍動感三、設(shè)計的動態(tài)更新從網(wǎng)頁的長期效應(yīng)看，網(wǎng)頁具有可更新的特點(diǎn)。

三、設(shè)計的動態(tài)更新【思考與練習(xí)】1.網(wǎng)頁的版式設(shè)計應(yīng)注意哪幾個方面？與平面設(shè)計相比有哪些共同點(diǎn)和不同點(diǎn)？2.你最喜歡什么樣的版式設(shè)計？為什么？3.“場”的意識你有嗎？找一個優(yōu)秀的網(wǎng)頁頁面分析其場的作用。4.找找你以前的平面構(gòu)成作業(yè)，看你是否能夠?qū)⑺D(zhuǎn)化成為一個網(wǎng)頁頁面設(shè)計？5.為你的網(wǎng)頁設(shè)計作業(yè)多畫一些版式設(shè)計草圖，并選擇其中一個用Photoshop或其它圖形圖像軟件制作成正稿。提示：使用軟件時多建立圖層，以利于各種效果調(diào)整與修改?！緦W(xué)習(xí)方法提示】1.網(wǎng)頁設(shè)計是一個綜合體，可將其它藝術(shù)形式