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

1、第四章 網(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),第一節(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ì)。,網(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

2、ww.karina-,網(wǎng)頁的版式設(shè)計(jì)由于終端顯示載體的不同而具有自身的特色：,www.spehzies.de,第二節(jié) 網(wǎng)頁版式設(shè)計(jì)的點(diǎn)、線、面,網(wǎng)頁的形態(tài)要素如文字、圖像、動(dòng)畫、影像等要素相當(dāng)于語言中的單詞，網(wǎng)頁的形式法則和構(gòu)成規(guī)律則是將它們組合起來的句法和語法。,一、網(wǎng)頁版式設(shè)計(jì)中的點(diǎn) 點(diǎn)的形狀、方向、大小、位置、聚散的變化，能夠給人帶來不同的心理感受和視覺沖擊，產(chǎn)生各種不同的視覺效果。,amaztype.tha.jp,www.thisismusicbox,二、網(wǎng)頁版式設(shè)計(jì)中的線 不同的線可以引發(fā)人的各種心理效應(yīng)，具有不同的情感傾向 。,www.i-shot-,三、網(wǎng)頁版式設(shè)計(jì)中的面 面既可

3、以是有形的位置，又可以是虛無的空間。,四、點(diǎn)、線、面在網(wǎng)頁中的綜合運(yùn)用 點(diǎn)、線、面在網(wǎng)頁中的運(yùn)用不是孤立的。,www.hansihelle.de,在網(wǎng)頁中，點(diǎn)、線、面的構(gòu)成常常是以下構(gòu)成手法的應(yīng)用： 1.對(duì)稱與均衡,www.stone-,2.對(duì)比與調(diào)和,www.pixelbarbecue.ch,3.節(jié)奏與韻律,4.聚散與留白,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)的分割。,1.框架式分割 框架式分割是一種理性的分割形式，是指利用各種不同的方形框架對(duì)網(wǎng)頁進(jìn)行分割。,www.s

4、-,,www.fluid.nl,2.自由式分割 自由式分割用各種顯性或隱性的直線、曲線或交叉線自由分割頁面。 （1）滿版型,（2）直線分割型,www.hidrante.art.br,（3）曲線分割型,www.altesclub.co.kr,（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)。這種主觀精神世界

5、對(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)。,1.四方形場(chǎng),.br,2.橢圓形場(chǎng),www.3mind.it,www.yugioh.co.kr,3.網(wǎng)格花紋場(chǎng),www.vogueing.jp,4.臺(tái)形場(chǎng),5.帶狀形場(chǎng),6.之字形場(chǎng),7.塊面形場(chǎng),www.subaru.co.jp,8.色彩場(chǎng),9.綜合場(chǎng),www.rendez-fou.be,第四節(jié) 網(wǎng)頁版式設(shè)計(jì)的視覺流程,所謂的視覺流程，是指頁面內(nèi)容的一種視覺傳達(dá)過程，它是以人的生理和心理

6、習(xí)慣的認(rèn)知模式來進(jìn)行的，是將各種構(gòu)成要素在視覺運(yùn)動(dòng)的規(guī)定下進(jìn)行空間定位。,一、視覺流程原理 1.視覺流程的產(chǎn)生 視覺流程既是一種人眼的生理運(yùn)動(dòng)，也包含了心理的微妙變化，是建立在視覺經(jīng)驗(yàn)上的視線移動(dò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ā)揮的作用都有所不同。,2.視覺流程的設(shè)計(jì)要求 （1）符合人的視覺習(xí)慣,（2

7、）保持信息傳達(dá)的有效性,gozone.jp,（3）突出主要信息,www.bnx.co.kr,www.urbansmith.co.kr,（4）注意引導(dǎo)節(jié)奏感和流暢感,www.bascule.co.jp,.頁面之間的視覺流程 合理的站點(diǎn)地圖和導(dǎo)航設(shè)計(jì)是保持網(wǎng)站視覺連續(xù)性和信息傳達(dá)有效性的著力點(diǎn)。,第五節(jié) 網(wǎng)頁版式設(shè)計(jì)的空間,網(wǎng)頁的視覺空間不僅是物理空間的使用，更多的是通過各種視覺手段去改變?yōu)g覽者的視覺心理感受，以創(chuàng)造出舒適、和諧的視覺心理空間。,一、平面空間,www.citric.ws,二、層次空間,www.superlooper.de,三、虛擬空間,www.freisign.de,四、導(dǎo)航空間,

8、第六節(jié) 網(wǎng)頁版式設(shè)計(jì)的動(dòng)態(tài)化,一、多媒體的動(dòng)態(tài)利用 從單個(gè)頁面看，多媒體的利用是網(wǎng)頁動(dòng)態(tài)設(shè)計(jì)的主要途徑。,二、超鏈接的跳躍動(dòng)感 網(wǎng)頁的超鏈接，打破了以前人們接受信息的線性方式，形成網(wǎng)頁的多屏、多頁、嵌套的特征。,三、設(shè)計(jì)的動(dòng)態(tài)更新 從網(wǎng)頁的長期效應(yīng)看，網(wǎng)頁具有可更新的特點(diǎn)。,【思考與練習(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)整與修改。 【學(xué)習(xí)方法提示】 1.網(wǎng)頁設(shè)計(jì)是一個(gè)綜合體，可將其它藝術(shù)形式的藝術(shù)處理方法應(yīng)用于網(wǎng)頁設(shè)計(jì)中。因?yàn)樵O(shè)計(jì)意識(shí)是共通的，藝術(shù)原理也是共通的，重要的是靈活地運(yùn)用。 2.學(xué)習(xí)各種流派的藝術(shù)形式理論有助于我們提高網(wǎng)頁藝