網(wǎng)頁界面設(shè)計(jì)中視覺藝術(shù)要素的分析與研究

摘要：隨著網(wǎng)絡(luò)技術(shù)和網(wǎng)絡(luò)經(jīng)濟(jì)的迅速發(fā)展，網(wǎng)頁已成為人們生活中必不可少的一部分。網(wǎng)頁設(shè)計(jì)不僅是網(wǎng)頁制作技術(shù)，更是網(wǎng)頁的視覺表現(xiàn)藝術(shù)。本文詳細(xì)地分析和探討了構(gòu)成網(wǎng)頁界面的各個(gè)要素，使大家能夠掌握網(wǎng)頁界面設(shè)計(jì)中所需的基本版式、色彩、字體、圖形、動(dòng)畫等的應(yīng)用，能夠設(shè)計(jì)出美觀、實(shí)用的信息頁面。

關(guān)鍵詞：網(wǎng)頁界面設(shè)計(jì)；視覺要素；

中圖分類號(hào)：TP393.092 文獻(xiàn)標(biāo)識(shí)碼：A 文章編號(hào)：1007-9599 (2012) 10-0000-02

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

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

（一）以功能性為主

網(wǎng)頁界面設(shè)計(jì)和平面設(shè)計(jì)一樣，必須遵循一定的設(shè)計(jì)原則，在必須具備平面設(shè)計(jì)特征的同時(shí)，網(wǎng)頁設(shè)計(jì)還具有其特有的基本特性。網(wǎng)頁界面設(shè)計(jì)應(yīng)時(shí)刻圍繞“信息傳達(dá)”這一主題來進(jìn)行。因此，它是一種以功能性為主的設(shè)計(jì)。主要體現(xiàn)在以下兩個(gè)方面：

1.信息傳達(dá)的功能

網(wǎng)頁界面設(shè)計(jì)以信息傳達(dá)為主要功能，并且信息必須準(zhǔn)確、清晰明了，具有明確的受眾對(duì)象和宣傳目標(biāo)，注重時(shí)效性。

2.一定的審美功能

網(wǎng)頁界面的審美功能具有一定的綜合性。以內(nèi)容為主，藝術(shù)為輔，除了界面布局合理，色彩搭配美觀，有清晰的導(dǎo)航功能，內(nèi)容吸引人等，還必須考慮到用戶操作的簡(jiǎn)易性和信息接受心理等因素。

（二）形象明確，易于接受

格羅佩斯在他的《藝術(shù)家與技術(shù)家在何處相會(huì)》一文中提到：“如果物體的形象很適合于它的工作，它的本質(zhì)就能被人看得清楚明確?！泵鞔_地指出了“形象”在信息傳遞和接納過程中所起到的重要作用。

人們?cè)诮佑|外界事物的時(shí)候，總是先通過視覺來接受信息，從而觸發(fā)一系列的心理活動(dòng)。例如：看到天空飛翔的小鳥，會(huì)聯(lián)想到自由，看到長(zhǎng)城、故宮，會(huì)聯(lián)想到中國(guó)傳統(tǒng)文化。因此，在設(shè)計(jì)網(wǎng)頁界面的時(shí)候，必須以通俗易懂的形象來傳遞信息，同時(shí)，也要考慮到網(wǎng)頁受眾的年齡、職業(yè)、文化層次、興趣的差異性，盡可能地使用簡(jiǎn)單的宣傳形式來滿足所有層次的受眾。在可口可樂的網(wǎng)頁中，用戶可以從水珠、人物等形象中充分聯(lián)想到活力四射、清涼的感覺，形象通俗易懂，傳達(dá)的信息易于接受，具有良好的傳達(dá)效果。

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

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

（一）網(wǎng)頁界面中的文字設(shè)計(jì)

文字是網(wǎng)頁界面的主體，也是傳達(dá)網(wǎng)頁信息的基本載體，雖然在今天多媒體元素的種類繁多，但文字依然占據(jù)它不可取代的地位，因?yàn)槲淖志哂写鎯?chǔ)空間小、易于下載和顯示的功能。

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

（二）網(wǎng)頁界面中的圖形圖像設(shè)計(jì)

圖形在網(wǎng)頁界面中占據(jù)著十分重要的地位。在上網(wǎng)瀏覽時(shí)，圖形圖像往往比文字更容易吸引用戶的眼球，因?yàn)樗梢宰钪庇^、最形象地表達(dá)網(wǎng)頁的主題，其給人的視覺印象往往比文字要強(qiáng)烈得多。

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

（三）網(wǎng)頁界面中的色彩設(shè)計(jì)

1.色彩設(shè)計(jì)的基本作用

色彩對(duì)于事物的表現(xiàn)能力有著其它形式無法比擬的超強(qiáng)效果。作為一個(gè)網(wǎng)頁設(shè)計(jì)師，只有掌握色彩的原理，熟知各色彩間的相互關(guān)系及各種色彩的生理或心理作用，結(jié)合自己所具備的平面構(gòu)成知識(shí)，在網(wǎng)頁設(shè)計(jì)中準(zhǔn)確用色，才能實(shí)現(xiàn)傳達(dá)特定信息和渲染頁面的效果的目的。色彩在網(wǎng)頁設(shè)計(jì)中起著重要的作用。首先，彩色網(wǎng)頁較單色網(wǎng)頁更具吸引力；其次，色彩本身具有象征作用，瀏覽者易于產(chǎn)生聯(lián)想；第三，彩色網(wǎng)頁具有賞心悅目、裝飾性強(qiáng)等特點(diǎn)。

2.網(wǎng)頁界面中色彩搭配的技巧

用一種色彩。這里是指先選定一種色彩，然后調(diào)亮度、透明度或者飽和度，生成新的色彩，用于網(wǎng)頁。這樣的頁面看起來色彩統(tǒng)一，有層次感。

用兩種色彩。先選定一種色彩，然后選擇它的對(duì)比色。比如當(dāng)我們需要突出橙色的主體內(nèi)容時(shí)，使用藍(lán)色作為背景是最好的。這樣整個(gè)頁面色彩豐富但不花稍。

用一個(gè)色系。簡(jiǎn)單的說就是用一個(gè)感覺的色彩，例如淡藍(lán)，淡黃，淡綠；或者土黃，土灰，土藍(lán)。

用黑色和一種彩色。比如大紅的字體配黑色的邊框感覺很“跳”。 在網(wǎng)頁配色中，忌諱的是：不要將所有顏色都用到，盡量控制在三種色彩以內(nèi)。 背景和前文的對(duì)比盡量要大，（絕對(duì)不要用花紋繁復(fù)的圖案作背景），以便突出主要文字內(nèi)容。

（四）網(wǎng)頁界面中的版式設(shè)計(jì)

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

（五）網(wǎng)頁界面中的多媒體設(shè)計(jì)

1.音頻

音頻在網(wǎng)頁界面中主要用于背景音樂、按鈕提示音等。另外，某些以音樂為主的網(wǎng)站還提供在線音樂下載和播放的功能。音樂成為網(wǎng)頁與瀏覽者進(jìn)行交互的一種重要手段。網(wǎng)頁中的音頻格式主要有：MIDI、WAV、MP3、ra、ram、rpm等，各具特點(diǎn)，應(yīng)區(qū)別對(duì)待。

2.動(dòng)畫

網(wǎng)頁中的動(dòng)畫主要分為：FLASH動(dòng)畫、GIF動(dòng)畫、交互動(dòng)畫等。FLASH動(dòng)畫具有體積小、整體性強(qiáng)的特點(diǎn)，主要用于banner、導(dǎo)航等。GIF動(dòng)畫可以做成一些小圖標(biāo)，而交互動(dòng)畫主要是通過Javascript、VBscript等動(dòng)態(tài)腳本語言結(jié)合HTML語言來實(shí)現(xiàn)網(wǎng)頁的一些特殊效果，如：鼠標(biāo)跟隨、幻燈片切換、動(dòng)態(tài)導(dǎo)航等。

3.視頻

視頻由于其體積大的特點(diǎn)，在網(wǎng)頁中用得相對(duì)較少，但它具備其它網(wǎng)頁元素都沒有的特點(diǎn)—信息豐富，傳達(dá)便捷，對(duì)瀏覽者的文化水平、年齡層次要求也不高，具有較強(qiáng)的吸引力。常用的文件格式有：AVI、RM等。

三、總結(jié)

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

參考文獻(xiàn)：

[1]劉永翔，庸良瑞.網(wǎng)頁設(shè)計(jì)中的視覺構(gòu)成分析．北京工商大學(xué)學(xué)報(bào)（自然科學(xué)版）2004，1:58—60

[2][韓]權(quán)寧杰.設(shè)計(jì)師談商業(yè)色彩設(shè)計(jì).周青華譯.2006年12月第1次印刷.北京:電子工業(yè)出版社，2006，2

[3]索聽煜.網(wǎng)絡(luò)界面色彩設(shè)計(jì)研究[D].昆明：昆明理工大學(xué)，2005，19-20

[4]王慧.格式塔理論在網(wǎng)頁界面設(shè)計(jì)中的運(yùn)用[J].藝術(shù)教育，2007，6:l