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

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

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

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

【關(guān)鍵詞】

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

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

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

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

www.karina-

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

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

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

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

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

三、網(wǎng)頁版式設(shè)計(jì)中的面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.對(duì)稱與均衡

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

www.pixelbarbecue.ch2.對(duì)比與調(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è)計(jì)的布局

一、版式結(jié)構(gòu)的分割在結(jié)構(gòu)上利用點(diǎn)、線、面等元素劃分網(wǎng)頁頁面為不同的視覺區(qū)域就是結(jié)構(gòu)的分割。第三節(jié)網(wǎng)頁版式設(shè)計(jì)的布局一、版式結(jié)構(gòu)的分割1.框架式分割框架式分割是一種理性的分割形式，是指利用各種不同的方形框架對(duì)網(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è)計(jì)中的場(chǎng)效應(yīng)場(chǎng)的概念來自于造型藝術(shù)，是指畫面的心理空間定式，其實(shí)質(zhì)是指人們對(duì)空間的心理感知。物體間的相互作用力，會(huì)誘導(dǎo)人們內(nèi)心發(fā)生反應(yīng)變化，如穩(wěn)定、失衡、緊張、放松、壓抑等感覺。人們的心理在種種力的間接作用下，對(duì)空間所產(chǎn)生的知覺范圍也就是心理力場(chǎng)。這種主觀精神世界對(duì)客觀物理空間的感知聯(lián)想，以及客觀物理空間對(duì)人的心理世界的刺激作用所產(chǎn)生的互動(dòng)效應(yīng)，就是一種藝術(shù)上的場(chǎng)效應(yīng)。因此，無論在視覺傳達(dá)設(shè)計(jì)中的虛擬空間，或是在產(chǎn)品乃至環(huán)境藝術(shù)設(shè)計(jì)中的現(xiàn)實(shí)空間，其實(shí)質(zhì)是一種場(chǎng)效應(yīng)。二、版式設(shè)計(jì)中的場(chǎng)效應(yīng)1.四方形場(chǎng).br1.四方形場(chǎng)www.aldesigner.c

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

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

4.臺(tái)形場(chǎng)

5.帶狀形場(chǎng)

5.帶狀形場(chǎng)www.bytesphere.n

6.之字形場(chǎng)

6.之字形場(chǎng)www.zhihuidasha

7.塊面形場(chǎng)27.塊面形場(chǎng)2www.subaru.co.jpwww.subaru.co.jp8.色彩場(chǎng)

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

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

一、視覺流程原理

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

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

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

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

2.視覺流程的設(shè)計(jì)要求（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è)計(jì)是保持網(wǎng)站視覺連續(xù)性和信息傳達(dá)有效性的著力點(diǎn)。

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

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

網(wǎng)頁的視覺空間不僅是物理空間的使用，更多的是通過各種視覺手段去改變?yōu)g覽者的視覺心理感受，以創(chuàng)造出舒適、和諧的視覺心理空間。第五節(jié)網(wǎng)頁版式設(shè)計(jì)的空間網(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è)計(jì)的動(dòng)態(tài)化一、多媒體的動(dòng)態(tài)利用從單個(gè)頁面看，多媒體的利用是網(wǎng)頁動(dòng)態(tài)設(shè)計(jì)的主要途徑。

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

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

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