網(wǎng)頁(yè)設(shè)計(jì)中視效藝術(shù)要素

導(dǎo)語(yǔ)：網(wǎng)頁(yè)設(shè)計(jì)中視效藝術(shù)要素一文來(lái)源于網(wǎng)友上傳，不代表本站觀點(diǎn)，若需要原創(chuàng)文章可咨詢客服老師，歡迎參考。

一、網(wǎng)頁(yè)界面設(shè)計(jì)的特征

網(wǎng)頁(yè)界面設(shè)計(jì)是一將藝術(shù)與技術(shù)相結(jié)合的一門(mén)學(xué)科，早期人們會(huì)有一種誤解，認(rèn)為網(wǎng)頁(yè)設(shè)計(jì)主要體現(xiàn)在“技術(shù)”的應(yīng)用上，而忽視了“設(shè)計(jì)”的層面，導(dǎo)致許多網(wǎng)頁(yè)布局不合理、頁(yè)面平淡無(wú)奇、內(nèi)容雜亂無(wú)章等。因此，在充分傳達(dá)內(nèi)容和信息的基礎(chǔ)之上，網(wǎng)頁(yè)界面還必須具備一定的藝術(shù)特征，這種藝術(shù)是基于功能性之上，并且為其服務(wù)的。

（一）以功能性為主網(wǎng)頁(yè)界面設(shè)計(jì)和平面設(shè)計(jì)一樣，必須遵循一定的設(shè)計(jì)原則，在必須具備平面設(shè)計(jì)特征的同時(shí)，網(wǎng)頁(yè)設(shè)計(jì)還具有其特有的基本特性。網(wǎng)頁(yè)界面設(shè)計(jì)應(yīng)時(shí)刻圍繞“信息傳達(dá)”這一主題來(lái)進(jìn)行。因此，它是一種以功能性為主的設(shè)計(jì)。主要體現(xiàn)在以下兩個(gè)方面：1.信息傳達(dá)的功能網(wǎng)頁(yè)界面設(shè)計(jì)以信息傳達(dá)為主要功能，并且信息必須準(zhǔn)確、清晰明了，具有明確的受眾對(duì)象和宣傳目標(biāo)，注重時(shí)效性。2.一定的審美功能網(wǎng)頁(yè)界面的審美功能具有一定的綜合性。以內(nèi)容為主，藝術(shù)為輔，除了界面布局合理，色彩搭配美觀，有清晰的導(dǎo)航功能，內(nèi)容吸引人等，還必須考慮到用戶操作的簡(jiǎn)易性和信息接受心理等因素。

（二）形象明確，易于接受格羅佩斯在他的《藝術(shù)家與技術(shù)家在何處相會(huì)》一文中提到：“如果物體的形象很適合于它的工作，它的本質(zhì)就能被人看得清楚明確。”明確地指出了“形象”在信息傳遞和接納過(guò)程中所起到的重要作用。人們?cè)诮佑|外界事物的時(shí)候，總是先通過(guò)視覺(jué)來(lái)接受信息，從而觸發(fā)一系列的心理活動(dòng)。例如：看到天空飛翔的小鳥(niǎo)，會(huì)聯(lián)想到自由，看到長(zhǎng)城、故宮，會(huì)聯(lián)想到中國(guó)傳統(tǒng)文化。因此，在設(shè)計(jì)網(wǎng)頁(yè)界面的時(shí)候，必須以通俗易懂的形象來(lái)傳遞信息，同時(shí)，也要考慮到網(wǎng)頁(yè)受眾的年齡、職業(yè)、文化層次、興趣的差異性，盡可能地使用簡(jiǎn)單的宣傳形式來(lái)滿足所有層次的受眾。在可口可樂(lè)的網(wǎng)頁(yè)中，用戶可以從水珠、人物等形象中充分聯(lián)想到活力四射、清涼的感覺(jué)，形象通俗易懂，傳達(dá)的信息易于接受，具有良好的傳達(dá)效果。

二、網(wǎng)頁(yè)界面設(shè)計(jì)的視覺(jué)構(gòu)成要素

網(wǎng)頁(yè)無(wú)論其類型、大小、功能，風(fēng)格，其具備的基本要素都是一致的，與平面設(shè)計(jì)相比，除了圖像和文字之外，網(wǎng)頁(yè)界面包含更多的要素，如聲音、視頻、動(dòng)畫(huà)等多媒體要素，以及由Javascript、VBscript等動(dòng)態(tài)語(yǔ)言實(shí)現(xiàn)的網(wǎng)頁(yè)特效和交互功能。

（一）網(wǎng)頁(yè)界面中的文字設(shè)計(jì)文字是網(wǎng)頁(yè)界面的主體，也是傳達(dá)網(wǎng)頁(yè)信息的基本載體，雖然在今天多媒體元素的種類繁多，但文字依然占據(jù)它不可取代的地位，因?yàn)槲淖志哂写鎯?chǔ)空間小、易于下載和顯示的功能。網(wǎng)頁(yè)界面中的文字分為兩種：ASC文本和像素文本。網(wǎng)頁(yè)中大部分文字都是直接在HTML代碼中編寫(xiě)，或者在dreamweaver設(shè)計(jì)窗口中自行輸入，這部分文字主要以ASC碼存儲(chǔ)，占取空間小，易于修改和編輯，在排列文字樣式的時(shí)候，一定要結(jié)合CSS樣式表來(lái)排版，CSS樣式表的強(qiáng)大功能可以同時(shí)對(duì)文字的字體、字形、大小、顏色、間距、邊距和特殊效果等進(jìn)行精心的設(shè)置，以達(dá)到較好的瀏覽效果。但是如果在網(wǎng)頁(yè)中使用特殊字體，不同的用戶可能由于未安裝此字體而無(wú)法正常顯示，所以，有的時(shí)候我們可以把文字在photoshop或者fireworks等圖像圖像處理軟件中保存為jpg或gif格式的圖片切片，再應(yīng)用到網(wǎng)頁(yè)界面中，這樣就可以達(dá)到任意想要的藝術(shù)效果了。像素文本主要應(yīng)用于網(wǎng)頁(yè)界面中的標(biāo)題、LOGO、Banner或者廣告的部分。

（二）網(wǎng)頁(yè)界面中的圖形圖像設(shè)計(jì)圖形在網(wǎng)頁(yè)界面中占據(jù)著十分重要的地位。在上網(wǎng)瀏覽時(shí)，圖形圖像往往比文字更容易吸引用戶的眼球，因?yàn)樗梢宰钪庇^、最形象地表達(dá)網(wǎng)頁(yè)的主題，其給人的視覺(jué)印象往往比文字要強(qiáng)烈得多。圖形必須要符合網(wǎng)頁(yè)的主題，每張圖片都必須要有其存在的價(jià)值，善用圖形，可以生動(dòng)形象直觀地表達(dá)網(wǎng)頁(yè)的主題，增強(qiáng)網(wǎng)頁(yè)的宣傳力、號(hào)召力和感染力，吸引瀏覽者的注意和興趣。網(wǎng)頁(yè)中的圖形格式主要有：JPG、GIF和PNG三種。JPG具有壓縮比高、壓縮質(zhì)量好、色彩連續(xù)性強(qiáng)的特點(diǎn)，因此，使用最為廣泛。GIF雖然色彩數(shù)目不如JPG，但是可以制作透明背景，以及動(dòng)態(tài)圖像，也被大量應(yīng)用于網(wǎng)頁(yè)界面中。PNG是Fireworks的默認(rèn)圖像文件格式，集前者的優(yōu)點(diǎn)于一身，可以對(duì)圖像進(jìn)行全面的優(yōu)化并且導(dǎo)出任何想要的格式。所以，根據(jù)圖形圖像的使用功能，合理地采用這三種格式，是網(wǎng)頁(yè)設(shè)計(jì)人員必須掌握的技能。

（三）網(wǎng)頁(yè)界面中的色彩設(shè)計(jì)1.色彩設(shè)計(jì)的基本作用色彩對(duì)于事物的表現(xiàn)能力有著其它形式無(wú)法比擬的超強(qiáng)效果。作為一個(gè)網(wǎng)頁(yè)設(shè)計(jì)師，只有掌握色彩的原理，熟知各色彩間的相互關(guān)系及各種色彩的生理或心理作用，結(jié)合自己所具備的平面構(gòu)成知識(shí)，在網(wǎng)頁(yè)設(shè)計(jì)中準(zhǔn)確用色，才能實(shí)現(xiàn)傳達(dá)特定信息和渲染頁(yè)面的效果的目的。色彩在網(wǎng)頁(yè)設(shè)計(jì)中起著重要的作用。首先，彩色網(wǎng)頁(yè)較單色網(wǎng)頁(yè)更具吸引力；其次，色彩本身具有象征作用，瀏覽者易于產(chǎn)生聯(lián)想；第三，彩色網(wǎng)頁(yè)具有賞心悅目、裝飾性強(qiáng)等特點(diǎn)。2.網(wǎng)頁(yè)界面中色彩搭配的技巧用一種色彩。這里是指先選定一種色彩，然后調(diào)亮度、透明度或者飽和度，生成新的色彩，用于網(wǎng)頁(yè)。這樣的頁(yè)面看起來(lái)色彩統(tǒng)一，有層次感。用兩種色彩。先選定一種色彩，然后選擇它的對(duì)比色。比如當(dāng)我們需要突出橙色的主體內(nèi)容時(shí)，使用藍(lán)色作為背景是最好的。這樣整個(gè)頁(yè)面色彩豐富但不花稍。用一個(gè)色系。簡(jiǎn)單的說(shuō)就是用一個(gè)感覺(jué)的色彩，例如淡藍(lán)，淡黃，淡綠；或者土黃，土灰，土藍(lán)。用黑色和一種彩色。比如大紅的字體配黑色的邊框感覺(jué)很“跳”。在網(wǎng)頁(yè)配色中，忌諱的是：不要將所有顏色都用到，盡量控制在三種色彩以內(nèi)。背景和前文的對(duì)比盡量要大，（絕對(duì)不要用花紋繁復(fù)的圖案作背景），以便突出主要文字內(nèi)容。

（四）網(wǎng)頁(yè)界面中的版式設(shè)計(jì)在進(jìn)行版式設(shè)計(jì)時(shí)，仍然需要應(yīng)用到前面提到過(guò)的Photoshop或者Fireworks等圖形處理工具，直觀地看到網(wǎng)頁(yè)的版面效果，在Photoshop或者Fireworks中畫(huà)好網(wǎng)頁(yè)布局后，先切片，再導(dǎo)出切片，然后在dreamweaver中使用DIV+CSS集成網(wǎng)頁(yè)，這是目前主流的網(wǎng)頁(yè)布局方式。根據(jù)視覺(jué)流程和網(wǎng)頁(yè)版式的實(shí)例，可以總結(jié)出以下版式構(gòu)成的類型：水平分割、垂直分割、水平—垂直交叉分割、中軸型、傾斜型、曲線型、重心型、反復(fù)型、點(diǎn)散型等。通過(guò)這些劃分方式，我們可以把一個(gè)平淡的界面劃分成若干個(gè)視覺(jué)區(qū)域，增強(qiáng)界面的層次感和空間感。

（五）網(wǎng)頁(yè)界面中的多媒體設(shè)計(jì)1.音頻音頻在網(wǎng)頁(yè)界面中主要用于背景音樂(lè)、按鈕提示音等。另外，某些以音樂(lè)為主的網(wǎng)站還提供在線音樂(lè)下載和播放的功能。音樂(lè)成為網(wǎng)頁(yè)與瀏覽者進(jìn)行交互的一種重要手段。網(wǎng)頁(yè)中的音頻格式主要有：MIDI、WAV、MP3、ra、ram、rpm等，各具特點(diǎn)，應(yīng)區(qū)別對(duì)待。2.動(dòng)畫(huà)網(wǎng)頁(yè)中的動(dòng)畫(huà)主要分為：FLASH動(dòng)畫(huà)、GIF動(dòng)畫(huà)、交互動(dòng)畫(huà)等。FLASH動(dòng)畫(huà)具有體積小、整體性強(qiáng)的特點(diǎn)，主要用于banner、導(dǎo)航等。GIF動(dòng)畫(huà)可以做成一些小圖標(biāo)，而交互動(dòng)畫(huà)主要是通過(guò)Javascript、VBscript等動(dòng)態(tài)腳本語(yǔ)言結(jié)合HTML語(yǔ)言來(lái)實(shí)現(xiàn)網(wǎng)頁(yè)的一些特殊效果，如：鼠標(biāo)跟隨、幻燈片切換、動(dòng)態(tài)導(dǎo)航等。3.視頻視頻由于其體積大的特點(diǎn)，在網(wǎng)頁(yè)中用得相對(duì)較少，但它具備其它網(wǎng)頁(yè)元素都沒(méi)有的特點(diǎn)—信息豐富，傳達(dá)便捷，對(duì)瀏覽者的文化水平、年齡層次要求也不高，具有較強(qiáng)的吸引力。常用的文件格式有：AVI、RM等。

三、總結(jié)

以功能性為第一指導(dǎo)原則，以技術(shù)因素為主要考慮對(duì)象，以完成或?qū)崿F(xiàn)必要的功能為目標(biāo)，在進(jìn)行網(wǎng)頁(yè)界面設(shè)計(jì)時(shí)，遵循這樣一個(gè)設(shè)計(jì)原則，那么，要設(shè)計(jì)出成功的界面并非難事。對(duì)網(wǎng)頁(yè)界面設(shè)計(jì)的基本藝術(shù)要素進(jìn)行系統(tǒng)的研究，是促進(jìn)網(wǎng)絡(luò)發(fā)展的重要環(huán)節(jié)，對(duì)提高網(wǎng)頁(yè)設(shè)計(jì)者的制作水平，培養(yǎng)對(duì)網(wǎng)頁(yè)界面設(shè)計(jì)的審美能力而言，都具有相當(dāng)現(xiàn)實(shí)的意義。