論網(wǎng)頁美術(shù)設(shè)計(jì)的視覺要素

高平

〔摘要〕網(wǎng)頁美術(shù)設(shè)計(jì)是應(yīng)市場而生的，屬于藝術(shù)設(shè)計(jì)與數(shù)字媒體技術(shù)相結(jié)合的學(xué)科。從受眾使用網(wǎng)頁的審美需求角度出發(fā)，分析網(wǎng)頁美術(shù)設(shè)計(jì)的視覺構(gòu)成主要要素，總結(jié)網(wǎng)頁美術(shù)設(shè)計(jì)視覺要素設(shè)計(jì)的三大規(guī)律。

〔關(guān)鍵詞〕網(wǎng)頁美術(shù)設(shè)計(jì)視覺要素?cái)?shù)字媒體藝術(shù)內(nèi)容與形式

從20世紀(jì)60年代末因特網(wǎng)誕生到今天，互聯(lián)網(wǎng)的發(fā)展可以說是日新月異，成為人類生活與工作中不可缺少的一部分。網(wǎng)頁也由最初的電腦信息傳播，演化到今天的電腦和以智能手機(jī)為代表的移動(dòng)設(shè)備兩大平臺(tái)為主的互聯(lián)網(wǎng)技術(shù)。網(wǎng)頁美術(shù)設(shè)計(jì)可以說不再是新興的學(xué)科了，隨著近幾年網(wǎng)絡(luò)的高速發(fā)展，它已經(jīng)漸漸被人們所重視。以計(jì)算機(jī)網(wǎng)絡(luò)技術(shù)作為載體，可以穿過時(shí)間、空間、地區(qū)等各種限制，將各種各樣的信息互聯(lián)在一起，通過網(wǎng)絡(luò)的方式進(jìn)行共享。它可以說是集合了美術(shù)設(shè)計(jì)和網(wǎng)絡(luò)技術(shù)的數(shù)字媒體藝術(shù)學(xué)科之一。

一、網(wǎng)頁的視覺審美需求

互聯(lián)網(wǎng)普及之前，它的視覺要素主要是一些文字及極為簡單的圖形，以便讓網(wǎng)民在有限的網(wǎng)速下盡量快速地瀏覽網(wǎng)頁內(nèi)容。技術(shù)的發(fā)展，網(wǎng)絡(luò)的普及，使人們對(duì)網(wǎng)頁美術(shù)設(shè)計(jì)的要求越來越高，不僅僅是提供實(shí)用信息給人閱讀，而需要考慮如何使受眾更好地、更加友好地接收相關(guān)信息。要做到出色的網(wǎng)頁美術(shù)設(shè)計(jì)，就必須研究網(wǎng)頁美術(shù)中的視覺要素，使設(shè)計(jì)清晰美觀、整體感強(qiáng)，讓人們在心情愉悅的狀態(tài)下瀏覽網(wǎng)站信息。網(wǎng)頁美術(shù)設(shè)計(jì)的審美需求是對(duì)傳統(tǒng)的視覺傳達(dá)設(shè)計(jì)的延伸和發(fā)展，例如海報(bào)設(shè)計(jì)、雜志版式設(shè)計(jì)、報(bào)紙版式設(shè)計(jì)等。兩者的表現(xiàn)形式以及審美需求都具有高度的相似性，但由于技術(shù)的不同也存在諸多的不同點(diǎn)。將傳統(tǒng)的形式美應(yīng)用到網(wǎng)頁美術(shù)設(shè)計(jì)上，增加網(wǎng)頁界面的美感，滿足大眾的審美需求。從美學(xué)的角度講，有變化與統(tǒng)一、對(duì)比與調(diào)和、對(duì)齊與均衡、感性與理性等，網(wǎng)頁設(shè)計(jì)中的文本、圖像以及色彩都屬于有效的視覺要素?；ヂ?lián)網(wǎng)時(shí)代初期，由于網(wǎng)絡(luò)技術(shù)不發(fā)達(dá)、網(wǎng)絡(luò)運(yùn)行速度較慢，網(wǎng)站基本都只有簡潔的文本信息。圖一左所示為2006年期間的微軟中國首頁，只有簡單的幾張位圖作為裝飾，它顯然滿足不了現(xiàn)今網(wǎng)絡(luò)通信技術(shù)下的受眾審美需求；今天我們再打開微軟中國的網(wǎng)站首頁（見圖一右），可以驚喜地發(fā)現(xiàn)是如此的協(xié)調(diào)、簡潔，大面積平面化的圖形，整體的色塊圖片組合在一起，效果符合目前大部分受眾的審美需求，由此可見網(wǎng)頁設(shè)計(jì)的審美要求也是隨著時(shí)代及技術(shù)的發(fā)展而不斷更新的。

二、網(wǎng)頁的視覺構(gòu)成要素

對(duì)于網(wǎng)頁美術(shù)設(shè)計(jì)來講，能否通過各種構(gòu)成要素的合理編排來實(shí)現(xiàn)有效的傳播，是衡量設(shè)計(jì)成功與否的重要準(zhǔn)則之一。網(wǎng)頁的主要構(gòu)成要素有文本要素、圖形要素以及色彩要素等。

1、文本要素的編排。文本是傳達(dá)信息的主體元素，也是網(wǎng)頁中必不可少的視覺要素。它起描述作用，通常會(huì)占據(jù)較大的面積，文本編排合理與否直接影響到整個(gè)頁面的傳播質(zhì)量。文本的主要功能是傳達(dá)信息，為了讓其主要功能發(fā)揮到最大，就必須整體布局文本設(shè)計(jì)，方能給觀眾清晰的視覺印象。盡可能避免零散、復(fù)雜的文本布局，必須減去過多的裝飾字，以達(dá)到易讀、易懂、易認(rèn)的效果。網(wǎng)頁設(shè)計(jì)中不要過多去為文本作復(fù)雜的造型，以免忽視文本本身所傳達(dá)的內(nèi)容以及表達(dá)的主題思想。文本要素的編排，首要是服從內(nèi)容傳播的要求，版式的風(fēng)格與內(nèi)容必須統(tǒng)一，不能背道而馳。例如政府部門的官方網(wǎng)站，其文字應(yīng)該具有莊重和規(guī)范的特性，給人以整齊、干凈、簡潔和大方的印象；藝術(shù)性的網(wǎng)站則可以注重個(gè)性效果，給人創(chuàng)意無限的思維空間；旅游景點(diǎn)的網(wǎng)頁文本編排則可以有輕快、活潑、跳躍的節(jié)奏感，給人生機(jī)勃勃的感受；而商業(yè)公司的網(wǎng)站，則要結(jié)合所經(jīng)營的產(chǎn)品或提供的服務(wù)來進(jìn)行字體編排設(shè)計(jì)。如圖二所示，分別為政府部門網(wǎng)站、藝術(shù)類網(wǎng)站、旅游景點(diǎn)網(wǎng)站的文本編排設(shè)計(jì)。

計(jì)算機(jī)系統(tǒng)為用戶提供了常用的字體，同時(shí)也為適應(yīng)個(gè)性化文本編輯的需求允許用戶自行安裝字體，產(chǎn)生了豐富多彩的藝術(shù)字體供設(shè)計(jì)師使用。字庫的豐富，為設(shè)計(jì)師提供了方便，同時(shí)也是對(duì)文本編排設(shè)計(jì)能力的考驗(yàn)。因?yàn)橥粋€(gè)頁面當(dāng)中，并不適合使用太多不同的字體。一般三到四種字體已經(jīng)足夠讓頁面豐富起來，再多會(huì)顯得過于花哨?？傊谋咀鳛榫W(wǎng)頁的重要視覺要素之一，除了傳達(dá)具體信息以外，版式設(shè)計(jì)上需要重視情感的傳達(dá)，才能給受眾愉悅的閱讀感受。

2、圖形要素的設(shè)計(jì)。圖形是繼文本之后最早應(yīng)用到網(wǎng)頁美術(shù)設(shè)計(jì)的數(shù)字媒體元素，它大大地豐富了信息量。圖形的參與，可以圖文并茂的形式向受眾展現(xiàn)所傳播的信息，也對(duì)美化網(wǎng)頁界面起到了極大的作用。對(duì)于通過視覺傳播的信息來說，圖文結(jié)合的形式遠(yuǎn)遠(yuǎn)超過了純粹的文本，使信息的趣味性更高。既然圖形要素這么重要，在設(shè)計(jì)過程中應(yīng)該注意什么便是網(wǎng)頁設(shè)計(jì)師不斷思考的一個(gè)問題。首先要分析網(wǎng)絡(luò)圖片的特點(diǎn)：圖片質(zhì)量不宜太高，否則會(huì)因加載太慢，受眾沒有耐心等待而失去信息傳播的功能，以目前的網(wǎng)絡(luò)流行技術(shù)來說，分辨率一般72dpi便足夠了。圖形在網(wǎng)頁中的位置、長寬比、構(gòu)圖等都直接影響信息的傳播效果，在圖形設(shè)計(jì)和優(yōu)化的同時(shí)，應(yīng)該充分考慮與文本要素的搭配，才能起到和諧、美觀的效果。

3、色彩要素的搭配。網(wǎng)頁界面不僅要求具有優(yōu)美動(dòng)人的文本要素，同時(shí)也要求版面新穎、簡潔明了。作為網(wǎng)頁視覺要素之一的色彩最能體現(xiàn)藝術(shù)性，黑白分明的色彩搭配給人以強(qiáng)烈的感覺；柔和的色彩搭配給人清新怡人的感覺；灰色調(diào)則給人沉穩(wěn)莊嚴(yán)的感覺，等等。色彩要素的搭配方面應(yīng)該注意什么，是考驗(yàn)網(wǎng)頁美術(shù)設(shè)計(jì)師的標(biāo)準(zhǔn)之一。

網(wǎng)頁中的色彩要素設(shè)計(jì)應(yīng)該根據(jù)網(wǎng)頁主題性質(zhì)的不同，把握好主色調(diào)、背景明度方面的選擇。主色調(diào)可以幫助網(wǎng)站突出主題，通常會(huì)以淺色系作為背景，如粉藍(lán)、草綠、淺灰等。以淺色為底有什么好處呢？根據(jù)受眾的閱讀習(xí)慣，文本通常會(huì)使用深色系來編排，所以有了淺色為底，配上深色文本，閱讀便更加簡便，整體也會(huì)顯得自然流暢。有了主色調(diào)，其它次要的元素則可以使用灰色系為主的圖形，避免喧賓奪主。通常明亮的色彩應(yīng)起到畫龍點(diǎn)睛的作用，跳躍的明亮色彩會(huì)產(chǎn)生強(qiáng)烈的視覺沖擊力，但應(yīng)用過多便會(huì)適得其反，會(huì)使受眾頭暈眼花。此外，在背景色調(diào)的搭配上并不適合用強(qiáng)烈的對(duì)比，特別是對(duì)比色及互補(bǔ)色的使用。背景占據(jù)頁面的面積較大，適宜用低對(duì)比度、不會(huì)影響前景圖形及文本要素的色彩為主。否則便使文本淹沒于背景里面，難以識(shí)別。因此，背景的色彩設(shè)計(jì)多以單純?yōu)橹?，如果一定要有變化也須在統(tǒng)一的基礎(chǔ)下進(jìn)行合理的變動(dòng)。背景除了可以統(tǒng)一整體的色彩和格調(diào)，對(duì)吸引網(wǎng)民的注意力和體現(xiàn)網(wǎng)站主題也是很有意義的。

三、網(wǎng)頁視覺要素設(shè)計(jì)的一般規(guī)律

網(wǎng)頁作為數(shù)字媒體的載體之一，與傳統(tǒng)的媒體（報(bào)紙、雜志等）有著諸多的共同點(diǎn)，所以在設(shè)計(jì)上也有它的一般性規(guī)律。數(shù)字媒體作為新的學(xué)科，由于表現(xiàn)形式及運(yùn)行狀態(tài)、社會(huì)受眾都有所不同，所以網(wǎng)頁的視覺元素設(shè)計(jì)規(guī)律是技術(shù)性的，也是藝術(shù)性的，是內(nèi)容與形式的完美統(tǒng)一。

1、規(guī)律一：主題突出。網(wǎng)頁美術(shù)設(shè)計(jì)是帶有所表達(dá)的意圖及其要求的，必須有明確的主題，否則受眾瀏覽后無從明白所傳遞信息。根據(jù)視覺心理學(xué)的規(guī)律和形式，初始狀態(tài)下就必須將主題有效地傳達(dá)給受眾，以達(dá)到訴求、傳播的目的。網(wǎng)頁主題能否被受眾理解和接受，能否滿足受眾的實(shí)用需求，這都要求網(wǎng)頁視覺元素在純粹、簡潔、精確的同時(shí)強(qiáng)調(diào)藝術(shù)性，突出鮮明的主題。

網(wǎng)頁設(shè)計(jì)的最終目標(biāo)是將主題信息以藝術(shù)性的方式推送到受眾面前，也就是說設(shè)計(jì)之前必須先分析這是什么樣的網(wǎng)站，是個(gè)性化的個(gè)人網(wǎng)站，還是商業(yè)網(wǎng)站，其性質(zhì)不同所傳達(dá)的主題自然也就不同。設(shè)計(jì)師應(yīng)理清基本的次序：首先要明白設(shè)計(jì)是為主題服務(wù)的，而設(shè)計(jì)的表達(dá)需要通過技術(shù)來實(shí)現(xiàn)，即是說“美”與“技術(shù)”要有機(jī)整合在一起。例如圖三所示為微軟的“必應(yīng)”搜索網(wǎng)站，它首先是實(shí)現(xiàn)了功能性的作用：搜索作為它的功能，又是它的主題。

如果一個(gè)設(shè)計(jì)師只注重主題思想，而忽視網(wǎng)頁設(shè)計(jì)的形式美組合，整體效果會(huì)變得特別平庸。要想網(wǎng)頁設(shè)計(jì)能夠有很好的吸引力，鮮明地突出主題，要注重各種視覺要素之間的層級(jí)關(guān)系、主次關(guān)系、邏輯性等的合理應(yīng)用。

2、規(guī)律二：形式與內(nèi)容的統(tǒng)一。黑格爾《美學(xué)》第三卷中說到：“工藝的美不在于要求實(shí)用品的外部造型、色彩、紋樣去模擬事物，再現(xiàn)現(xiàn)實(shí)，而在于使其外部形式傳達(dá)和表現(xiàn)出一定的情緒、氣氛、格調(diào)、風(fēng)尚、趣味，使物質(zhì)經(jīng)由象征變成相似于精神生活的有關(guān)環(huán)境。”

優(yōu)秀的藝術(shù)作品必定將形式與內(nèi)容進(jìn)行統(tǒng)一的設(shè)計(jì)，內(nèi)容是構(gòu)成網(wǎng)頁要素的總和，包括它的主題、形象等；形式指的是它的結(jié)構(gòu)、風(fēng)格等。一方面，網(wǎng)頁設(shè)計(jì)所追求的形式美必須符合主題的整體需要，這是前提。如果設(shè)計(jì)師過于強(qiáng)調(diào)形式而將內(nèi)容忽視，這樣的網(wǎng)頁將會(huì)因?yàn)榭斩炊鵁o法吸引受眾。設(shè)計(jì)師必須將形式與內(nèi)容統(tǒng)一起來，融入思想。設(shè)計(jì)并非是“多”就等于“好”，只有形式與內(nèi)容有效統(tǒng)一，才是真正體現(xiàn)實(shí)用性且富有美感的網(wǎng)頁界面設(shè)計(jì)。根據(jù)目前網(wǎng)頁數(shù)據(jù)傳輸速度，網(wǎng)頁設(shè)計(jì)中仍然不適合為了豐富的視覺元素而過分使用視頻、高清圖像等，不適合為形式美的需求而傳輸大量的數(shù)據(jù)。受眾必須經(jīng)過長時(shí)間等待才能夠?yàn)g覽的網(wǎng)頁，不符合網(wǎng)絡(luò)傳輸快捷方便的特性，會(huì)嚴(yán)重影響受眾接受信息的主動(dòng)性和積極性。所以通過大量的多媒體元素來豐富網(wǎng)頁設(shè)計(jì)以達(dá)到形式與內(nèi)容的統(tǒng)一是不可取的。網(wǎng)絡(luò)由成千上萬的網(wǎng)站共同構(gòu)成，而網(wǎng)站則由成千上萬的頁面來構(gòu)成。網(wǎng)頁具有多屏和分頁的特性，設(shè)計(jì)師可以對(duì)其形式進(jìn)行多變性的效果處理以達(dá)到形式美感。設(shè)計(jì)師要注意每一個(gè)獨(dú)立的頁面設(shè)計(jì)，同時(shí)也要考慮與內(nèi)容的統(tǒng)一和協(xié)調(diào)。

3、規(guī)律三：強(qiáng)調(diào)整體效果。整體效果可以從很多方面去考慮，如程序設(shè)計(jì)師可以從每一個(gè)頁面的代碼及整個(gè)網(wǎng)站的整體性上去考慮，而美術(shù)設(shè)計(jì)師所考慮的整體性則是在視覺的角度來考慮。通過統(tǒng)一的整體效果，才能讓受眾更好地接受它，以達(dá)到滿足受眾實(shí)用的目標(biāo)，達(dá)到整體的美感，讓設(shè)計(jì)師和受眾通過網(wǎng)頁進(jìn)行無形的交流與溝通。面對(duì)各種各樣的網(wǎng)頁要素，如何去強(qiáng)調(diào)它的整體性呢？設(shè)計(jì)師要理解網(wǎng)站組成的共性部分和個(gè)性部分，即通過共性來統(tǒng)一，通過個(gè)性來變化。例如在版式上可以將整個(gè)網(wǎng)站的框架進(jìn)行統(tǒng)一，將導(dǎo)航菜單、banner等位置、像素等進(jìn)行統(tǒng)一；而主體內(nèi)容則根據(jù)信息而變，獲得色彩在變化中的和諧統(tǒng)一。強(qiáng)調(diào)整體效果的同時(shí)，設(shè)計(jì)師也要避免進(jìn)入另一個(gè)極端：呆板。整體是建立在變化的基礎(chǔ)上，變化是在統(tǒng)一的前提下。

結(jié)語

網(wǎng)頁作為藝術(shù)與計(jì)算機(jī)技術(shù)相結(jié)合的一種數(shù)字傳播媒體，雖然發(fā)展歷程并不悠久，但它卻綜合了消費(fèi)心理學(xué)、視覺傳達(dá)學(xué)、人機(jī)交互學(xué)等多個(gè)領(lǐng)域的知識(shí)，特別是與傳統(tǒng)的視覺傳達(dá)設(shè)計(jì)有著眾多相通的特征，且更快捷、方便，突破時(shí)間和空間限制。隨著網(wǎng)站數(shù)量增多，向移動(dòng)設(shè)備快速普及的同時(shí)，受眾對(duì)網(wǎng)頁設(shè)計(jì)的審美也有了更高的要求。作為網(wǎng)頁設(shè)計(jì)的主要視覺要素：文本、圖形、色彩等，它們之間是否協(xié)調(diào)、是否合理，決定著網(wǎng)頁美術(shù)設(shè)計(jì)的成敗。網(wǎng)頁美術(shù)設(shè)計(jì)是一項(xiàng)繁雜的工作，如果沒有掌握好一般的視覺要素設(shè)計(jì)規(guī)律，不僅設(shè)計(jì)效率低下，而且質(zhì)量也難以保證。要有效實(shí)現(xiàn)網(wǎng)頁的信息傳播功能，就必須掌握其視覺要素設(shè)計(jì)的一般規(guī)律：主題突出、形式與內(nèi)容統(tǒng)一、強(qiáng)調(diào)整體效果，并在其基礎(chǔ)上進(jìn)行創(chuàng)新、發(fā)展，才能創(chuàng)造更高的價(jià)值。（責(zé)任編輯尹雨）

參考文獻(xiàn)：

[1]顧群業(yè)，張軍波.網(wǎng)頁藝術(shù)設(shè)計(jì)的原則[J].設(shè)計(jì)藝術(shù).2000（8）.

[2]徐珂，苗彤，趙暉.網(wǎng)頁視覺與設(shè)計(jì)[M].人民郵電出版社.2001.

[3]許廣彤.網(wǎng)頁美術(shù)設(shè)計(jì)[M].中國人民大學(xué)出版社.2011.6.