1、第四章 網(wǎng)頁藝術(shù)設(shè)計的版式設(shè)計,【內(nèi)容提要】 網(wǎng)頁的版式設(shè)計形成了網(wǎng)頁整體視覺印象，體現(xiàn)了網(wǎng)頁的風(fēng)格。網(wǎng)頁的版式設(shè)計包括點線面的構(gòu)成、布局設(shè)計、視覺流程、空間設(shè)計和動態(tài)設(shè)計等幾個方面。 【關(guān)鍵詞】 構(gòu)成 布局 視覺流程 空間 動態(tài),第一節(jié) 什么是網(wǎng)頁版式設(shè)計,網(wǎng)頁的版式設(shè)計，是指在有限的屏幕空間內(nèi),按照設(shè)計師的想法、意圖將網(wǎng)頁的形態(tài)要素按照一定的藝術(shù)規(guī)律進行組織和布局，使其形成整體視覺印象，最終達到有效傳達信息的視覺設(shè)計。,網(wǎng)頁的版式設(shè)計決定了網(wǎng)頁的藝術(shù)風(fēng)格和個性特征。 網(wǎng)頁的版式設(shè)計是設(shè)計師理性思維與感性表達的產(chǎn)物。 網(wǎng)頁的版式設(shè)計要達到形式和內(nèi)容的統(tǒng)一。,www.sodis.co.kr,w

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

3、以是有形的位置，又可以是虛無的空間。,四、點、線、面在網(wǎng)頁中的綜合運用 點、線、面在網(wǎng)頁中的運用不是孤立的。,www.hansihelle.de,在網(wǎng)頁中，點、線、面的構(gòu)成常常是以下構(gòu)成手法的應(yīng)用： 1.對稱與均衡,www.stone-,2.對比與調(diào)和,www.pixelbarbecue.ch,3.節(jié)奏與韻律,4.聚散與留白,5.解構(gòu)與重構(gòu),www.metamute.de,第三節(jié) 網(wǎng)頁版式設(shè)計的布局,一、版式結(jié)構(gòu)的分割 在結(jié)構(gòu)上利用點、線、面等元素劃分網(wǎng)頁頁面為不同的視覺區(qū)域就是結(jié)構(gòu)的分割。,1.框架式分割 框架式分割是一種理性的分割形式，是指利用各種不同的方形框架對網(wǎng)頁進行分割。,www.s

4、-,,www.fluid.nl,2.自由式分割 自由式分割用各種顯性或隱性的直線、曲線或交叉線自由分割頁面。 （1）滿版型,（2）直線分割型,www.hidrante.art.br,（3）曲線分割型,www.altesclub.co.kr,（4）自由型,二、版式設(shè)計中的場效應(yīng) 場的概念來自于造型藝術(shù)，是指畫面的心理空間定式，其實質(zhì)是指人們對空間的心理感知。物體間的相互作用力，會誘導(dǎo)人們內(nèi)心發(fā)生反應(yīng)變化，如穩(wěn)定、失衡、緊張、放松、壓抑等感覺。人們的心理在種種力的間接作用下，對空間所產(chǎn)生的知覺范圍也就是心理力場。這種主觀精神世界

5、對客觀物理空間的感知聯(lián)想，以及客觀物理空間對人的心理世界的刺激作用所產(chǎn)生的互動效應(yīng)，就是一種藝術(shù)上的場效應(yīng)。因此，無論在視覺傳達設(shè)計中的虛擬空間，或是在產(chǎn)品乃至環(huán)境藝術(shù)設(shè)計中的現(xiàn)實空間，其實質(zhì)是一種場效應(yīng)。,1.四方形場,.br,2.橢圓形場,www.3mind.it,www.yugioh.co.kr,3.網(wǎng)格花紋場,www.vogueing.jp,4.臺形場,5.帶狀形場,6.之字形場,7.塊面形場,www.subaru.co.jp,8.色彩場,9.綜合場,www.rendez-fou.be,第四節(jié) 網(wǎng)頁版式設(shè)計的視覺流程,所謂的視覺流程，是指頁面內(nèi)容的一種視覺傳達過程，它是以人的生理和心理

6、習(xí)慣的認知模式來進行的，是將各種構(gòu)成要素在視覺運動的規(guī)定下進行空間定位。,一、視覺流程原理 1.視覺流程的產(chǎn)生 視覺流程既是一種人眼的生理運動，也包含了心理的微妙變化，是建立在視覺經(jīng)驗上的視線移動。,2.網(wǎng)頁的最佳視域,二、網(wǎng)頁中的視覺流程 1.視覺流程的三階段 當(dāng)我們?yōu)g覽網(wǎng)頁時，視覺流程通常是首先在一瞬間迅速瀏覽頁面，形成第一印象，接著視線就會從最吸引注意力的一點開始依次作有序的流動，最后完成信息的傳遞。整個過程包括印象感知（第一印象）、運動感知（感知過程）、整體感知（最終印象）三個心理感知階段，而每一階段各視覺要素發(fā)揮的作用都有所不同。,2.視覺流程的設(shè)計要求 （1）符合人的視覺習(xí)慣,（2

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

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