淺析網(wǎng)頁視覺設(shè)計

呂文靜

(鄭州鐵路職業(yè)技術(shù)學(xué)院，河南 鄭州 450052)

在今天，網(wǎng)絡(luò)已經(jīng)成為我們生活和工作中不可缺少的組成部分。對于平面視覺設(shè)計師來說，新媒介帶來的不僅是資訊方式的改變和新職業(yè)結(jié)構(gòu)的形成，而更多的是對于新網(wǎng)絡(luò)媒體視覺設(shè)計的認(rèn)知和探索，使這個具有強(qiáng)大生命力的新媒介成為信息視覺傳達(dá)的傳播利器，也逐步促進(jìn)了相應(yīng)輔助設(shè)計學(xué)科的建設(shè)和完善。

1 平面設(shè)計與網(wǎng)絡(luò)媒體的融合

作為設(shè)計學(xué)科的一個新專業(yè)門類的網(wǎng)絡(luò)媒體設(shè)計是依靠其他多個相關(guān)領(lǐng)域的支持，在傳統(tǒng)的平面設(shè)計媒體的審美設(shè)計原則的基礎(chǔ)上，實現(xiàn)了與傳統(tǒng)媒體完全不同的傳播個性。突破了傳統(tǒng)媒體的信息容納性、溝通漸進(jìn)性、互動雙向性、成本低廉性和反饋直接性等限制，成為在內(nèi)容表現(xiàn)形態(tài)、技術(shù)制作形態(tài)和傳播高效形態(tài)上的優(yōu)秀信息傳播途徑。在網(wǎng)絡(luò)中傳播信息的主要形式是基于HTML語言結(jié)構(gòu)的網(wǎng)頁頁面，網(wǎng)頁本身的分類是抽象的，它最重要的特質(zhì)在于其交互性，所以從其交互性的本質(zhì)特點(diǎn)上我們把它分為靜態(tài)網(wǎng)頁和動態(tài)網(wǎng)頁。從其應(yīng)用類別上又可以分為商務(wù)資源類、信息資訊類、社團(tuán)機(jī)構(gòu)類、休閑娛樂類、藝術(shù)文化類和個人風(fēng)格類。根據(jù)網(wǎng)站的功能和結(jié)構(gòu)形式，還可以歸類為門戶網(wǎng)站、普及型網(wǎng)站、電子商務(wù)型網(wǎng)站、媒體信息網(wǎng)站、事務(wù)咨詢類網(wǎng)站等。網(wǎng)頁策劃和設(shè)計是通過對網(wǎng)站主題和內(nèi)容體裁進(jìn)行整理、分析及定位，結(jié)合消費(fèi)心理、廣告?zhèn)鞑ァ⑹袌鰻I銷和審美表現(xiàn)等相關(guān)因素對網(wǎng)頁實施的版面、字體、圖形及色彩等元素的設(shè)計。

網(wǎng)頁設(shè)計在研究靜態(tài)版面設(shè)計和創(chuàng)意流程方面與平面設(shè)計體系基本相符，傳統(tǒng)設(shè)計體系與網(wǎng)絡(luò)媒體學(xué)科同屬的視覺傳達(dá)學(xué)科中并保持著緊密的學(xué)術(shù)關(guān)系。網(wǎng)頁設(shè)計中除靜態(tài)版面元素以外，還要考慮動態(tài)頁面切換和動畫效果的應(yīng)用，互動的觀念在網(wǎng)頁設(shè)計中得到充分展現(xiàn)。平面設(shè)計也有互動，是觀者被畫面喚起的心理共鳴和實踐參與，而網(wǎng)頁設(shè)計的互動表現(xiàn)為瀏覽者真實點(diǎn)擊網(wǎng)頁中的鏈接對象和按鈕來完成，互動的傳達(dá)更加貼切和真實。相對于傳統(tǒng)媒體，網(wǎng)絡(luò)媒體的優(yōu)勢主要表在傳播范圍廣泛，不在受到國家和地域的限制;傳播過程經(jīng)濟(jì)，技術(shù)先進(jìn)支持的網(wǎng)頁的高效率表現(xiàn);信息更新的動態(tài)性;溝通信息的交互性。網(wǎng)頁設(shè)計所顯現(xiàn)的局限性也非常突出，比較傳統(tǒng)平面媒體而言，網(wǎng)絡(luò)語言技術(shù)和硬件設(shè)備上的限制使網(wǎng)頁的表現(xiàn)空間、創(chuàng)意空間和瀏覽群受到很大的影響，網(wǎng)絡(luò)傳輸?shù)臄?shù)據(jù)流量限制也成為設(shè)計師不得不考慮的苛刻條件。

網(wǎng)頁設(shè)計的審美需求是對平面視覺傳達(dá)設(shè)計美學(xué)的一種繼承和延伸。兩者的表現(xiàn)形式和目的都有一定的相似性，網(wǎng)頁設(shè)計是把傳統(tǒng)平面設(shè)計中美的形式規(guī)律同現(xiàn)代的網(wǎng)頁設(shè)計的具體問題相結(jié)合起來，運(yùn)用平面設(shè)計法則到網(wǎng)頁設(shè)計中，結(jié)合網(wǎng)頁設(shè)計的媒體特性，尋求其內(nèi)涵融合而風(fēng)格不同的設(shè)計。所以，網(wǎng)頁設(shè)計的視覺傳達(dá)是運(yùn)用媒體手段在實現(xiàn)平面設(shè)計。

2 網(wǎng)站界面的發(fā)展

界面是一種由色彩、文字、圖像、符號等視覺元素以及多媒體元素構(gòu)成的，用來傳達(dá)特定信息，以方便人機(jī)交流為目的的中間媒體。相對于計算機(jī)網(wǎng)絡(luò)來說，網(wǎng)站的出現(xiàn)要晚得多。1989年，歐洲粒子物理實驗室研究員Tim Berners－Lee發(fā)明了一種用于網(wǎng)上交換文本的格式，即基于標(biāo)記的語言HTML，并創(chuàng)建了網(wǎng)上軟件平臺World Wide Web(萬維網(wǎng))。HTML最吸引人的地方，在于其超文本鏈接技術(shù)，通過超鏈接，可以非常方便地跳轉(zhuǎn)到其他任何一個網(wǎng)頁上。萬維網(wǎng)實現(xiàn)了媒體思想家特德·納爾遜于1965年提出的超文本設(shè)想。萬維網(wǎng)的出現(xiàn)，帶動了網(wǎng)站的裂變式發(fā)展。

1990年11月，第一個Web服務(wù)器nxoc01.cern.ch運(yùn)行，Tim Berners－Lee在自己編寫的圖形化Web瀏覽器World Wide Web上，看到了最早的Web頁面。雖然世界上第一個網(wǎng)站(當(dāng)時的網(wǎng)址是http://nxoe01.cern.ch/hypertext/www/theproject.html)早在1992年就關(guān)閉了，然而幸運(yùn)的是這一界面卻被保留了下來。只要點(diǎn)擊下面這一鏈接:http://www.w3.org/History/19921103－h(huán)ypertext/hypertext/theproject.html就能看到歷史上最早的網(wǎng)頁，盡管用今天的眼光來看，這一網(wǎng)頁是再簡陋不過了，但正是這一簡陋的網(wǎng)頁，開啟了今天豐富多彩的網(wǎng)絡(luò)生活。最早的網(wǎng)頁界面無一例外都是由字符組成的，而今天在互聯(lián)網(wǎng)上看到的網(wǎng)頁幾乎都是五光十色、圖文并獲、有動畫有視頻的。

1992年，美國國家超級計算機(jī)活動中心(NCSA)的MaM Andressen開發(fā)出一種UNIX版的Mosaic瀏覽器，它可以顯示圖形，并能在超鏈接間漫游，所有的操作只需利用鼠標(biāo)就可以完成。Marc給WWW網(wǎng)的超文本語言(HTML)增加了一些新特點(diǎn)，特別是可以顯示圖像。Mosaic的設(shè)計使用戶可十分方便瀏覽WWW網(wǎng)的內(nèi)容。有了Mosaic，作為技術(shù)支持的Internet受到公眾及媒體的廣泛矚目，并由此真正成為一個國際性的大舞臺。而網(wǎng)頁設(shè)計有了圖形化的界面，也逐步由以技術(shù)設(shè)計為主，轉(zhuǎn)而走上了技術(shù)設(shè)計與藝術(shù)設(shè)計相組合的道路。［1］

近年來，隨著Microsoft公司的FrontPage，Macmmedia公司的 Dreamweaver、Firwork、Flash 等可視化專業(yè)網(wǎng)頁設(shè)計及開發(fā)工具的出現(xiàn)，網(wǎng)頁界面設(shè)計不僅僅是計算機(jī)人員才能駕馭的技術(shù)了。越來越多的網(wǎng)絡(luò)愛好者、設(shè)計愛好者都步入這個藝術(shù)設(shè)計的新領(lǐng)域，特別是專業(yè)藝術(shù)設(shè)計人員的介入，使網(wǎng)頁設(shè)計成為一個新興的職業(yè)。

3 網(wǎng)頁視覺形象語言的形成

當(dāng)我們在瀏覽器的地址欄輸入想要訪問的網(wǎng)頁地址，服務(wù)器會把搜索到網(wǎng)頁頁面顯示在瀏覽者的顯示器屏幕上，每個頁面都是由HTML語言格式編寫，在HTML格式文檔中，文字、圖片、聲音、動畫等頁面元素被后臺語言描繪并承載。［2］網(wǎng)頁是通過視覺元素的引人注目而實現(xiàn)信息內(nèi)容的傳達(dá)，為了使網(wǎng)頁獲得最大的視覺傳達(dá)功能，使網(wǎng)絡(luò)真正成為可讀強(qiáng)性而且新穎的媒體，網(wǎng)頁的設(shè)計必須適應(yīng)人們視覺流向的心理和生理的特點(diǎn)，由此確定各種視覺構(gòu)成元素之間的關(guān)系和秩序。因此，設(shè)計時應(yīng)該研究各種視覺造型元素之間的距離、位置、面積和視覺流程的問題。

網(wǎng)頁視覺流程的形成是由人類的視覺特性所決定的。人們在閱讀一種信息時，視覺總有一種自然的流動習(xí)慣，視覺流程往往會體現(xiàn)出比較明顯的方向感，它無形中形成一種脈絡(luò)，似乎有一條線、一股氣貫穿其中，使整個版面的運(yùn)動趨勢有一個主旋律。心理學(xué)的研究表明，在一個平面上，上半部讓人輕松和自在，下半部則讓人穩(wěn)定和壓抑。同樣，平面的左半部讓人輕松和自在，右半部讓人穩(wěn)定和壓抑。所以網(wǎng)頁平面的視覺影響力上方強(qiáng)于下方，左側(cè)強(qiáng)于右側(cè)。這樣平面的上部和中上部被稱為“最佳視域”，也就是最優(yōu)選的設(shè)計表現(xiàn)空間，重要的視覺信息都表現(xiàn)在這一區(qū)域，在網(wǎng)頁設(shè)計中一些突出的信息，如LOGO、條幅、導(dǎo)航設(shè)計、主標(biāo)題、每天更新的內(nèi)容等通常都放在這些位置。當(dāng)然視覺流程是一種感覺而非確切的數(shù)學(xué)公式，只要符合人們認(rèn)識過程的心理順序和思維發(fā)展的邏輯順序，就可以更為靈活的運(yùn)用。在網(wǎng)頁設(shè)計中，靈活而合理地運(yùn)用視覺流程和最佳視域，組織好自然流暢的視覺導(dǎo)向，直接影響到傳播者傳達(dá)信息的準(zhǔn)確與有效性。所以在網(wǎng)頁的編輯設(shè)計中，視覺導(dǎo)向是一個要點(diǎn)，網(wǎng)頁的設(shè)計是一種創(chuàng)造，首先要立足信息的傳達(dá)，但又要符合人們較為普遍的思維習(xí)慣，做到視覺流程自然、合理、暢快。成功的視覺流程安排，能使網(wǎng)頁上的各種信息要素在一定空間內(nèi)合理分布，能使頁面上各信息要素的位置、間隙、大小保持一定的節(jié)奏感和美感。［3］

在網(wǎng)頁的設(shè)計活動中，包含著主觀和客觀兩方面的因素，在確立了網(wǎng)頁主題之后，首先要明確和熟悉設(shè)計的對象和構(gòu)成的要素。網(wǎng)頁設(shè)計涉及的具體內(nèi)容很多，可以概括為視聽元素和版式設(shè)計兩個方面。

(1)視聽元素

這里所說的視聽元素，主要包括:文本、背景、按鈕、圖標(biāo)、圖像、表格、顏色、導(dǎo)航工具、背景音樂、動態(tài)影像等。無論是文字、圖形、動畫，還是音頻、視頻，網(wǎng)頁設(shè)計者所要考慮的是如何以感人的形式把它們放進(jìn)頁面這個“大畫布”里。多媒體技術(shù)的運(yùn)用大大豐富了網(wǎng)頁藝術(shù)設(shè)計的表現(xiàn)力。

以上各視聽元素大多數(shù)瀏覽器本身都可以顯示或收聽，無需任何外部程序或模塊支持。比如，大部分瀏覽器都可以顯示GIF、JPEG圖形和GIF動畫。還有些多媒體文件(如MP3音樂)需要啟動相應(yīng)的外部程序來播放。［4］另外，在瀏覽器使用插件(Plug－in)可以播放更多格式的多媒體文件。微軟推出IE瀏覽器后，提供了基于OLE的ActiveX技術(shù)，用來在網(wǎng)頁中播放多媒體，目前Active已經(jīng)成為熱門技術(shù)。另一種播放多媒體的技術(shù)是JavaApplet。它是用Java語言編寫的應(yīng)用于網(wǎng)頁之中的小應(yīng)用程序，相比于插件和Ative，JavaApplet具有更大的靈活性和良好的跨平臺能力，因此具有很好的發(fā)展前景?？傊夹g(shù)的不斷發(fā)展使多媒體元素在網(wǎng)頁藝術(shù)設(shè)計中的綜合運(yùn)用越來越廣泛，使瀏覽者可以享受到更加完美的視聽效果。這些新技術(shù)的出現(xiàn)，也對網(wǎng)頁的藝術(shù)設(shè)計提出了更高的要求。

(2)版式設(shè)計

網(wǎng)頁的版式設(shè)計同報刊雜志等平面媒體的版式設(shè)計有很多共同之處，它在網(wǎng)頁的藝術(shù)設(shè)計中占據(jù)著重要的地位。所謂網(wǎng)頁的版式設(shè)計，是在有限的屏幕空間上將視聽多媒體元素進(jìn)行有機(jī)的排列組合，將理性思維個性化的表現(xiàn)出來，是一種具有個人風(fēng)格和藝術(shù)特色的視聽傳達(dá)方式。它在傳達(dá)信息的同時，也產(chǎn)生感官上的美感和精神上的享受。

但網(wǎng)頁的排版與書籍雜志的排版又有很多差異。印刷品都有固定的規(guī)格尺寸，網(wǎng)頁則不然，它的尺寸是由讀者來控制的。這使網(wǎng)頁設(shè)計者不能精確控制頁面上每個元素的尺寸和位置。而且，網(wǎng)頁的組織結(jié)構(gòu)不像印刷品那樣為線性組合，這給網(wǎng)頁的版式設(shè)計帶來了一定的難度。

從平面角度考慮，網(wǎng)頁版面是視覺設(shè)計優(yōu)秀與否的關(guān)鍵所在，特定的格局模式和實現(xiàn)技術(shù)是形成這種視覺語言的基本條件。眾多的視覺元素依靠類似版面設(shè)計風(fēng)格的表現(xiàn)技術(shù)進(jìn)行整合排列，既要做到網(wǎng)頁結(jié)構(gòu)技術(shù)的嚴(yán)謹(jǐn)性又要實現(xiàn)風(fēng)格靈活多樣的視覺效果。這種審美特性與內(nèi)在技術(shù)完美結(jié)合的視覺語言形式匯成所有靜態(tài)與動態(tài)的視覺元素生成特有的媒體藝術(shù)形式。

4 網(wǎng)頁視覺設(shè)計的發(fā)展現(xiàn)狀

人們對美的追求是不斷深入的，網(wǎng)頁設(shè)計同樣如此。網(wǎng)頁不光是把各種東西放上去，能看就行，還要考慮如何使受眾能更好地和更有效率地接收網(wǎng)頁上的信息。這就需要從審美方面入手，制作出清晰、整體性好的頁面，使人瀏覽起來心情愉快，接收信息也會更加容易。

網(wǎng)頁設(shè)計經(jīng)歷從最早的簡單以文本和數(shù)據(jù)等字符組成顯示界面的功能第一的審美原則，發(fā)展到追求創(chuàng)意和風(fēng)格表現(xiàn)的現(xiàn)代網(wǎng)頁設(shè)計目標(biāo)。網(wǎng)頁設(shè)計師的風(fēng)格就是在運(yùn)用自己所掌握的手段，包括所擁有的審美的素質(zhì)、應(yīng)用軟件的能力以及感受生活的敏銳的覺察力，來建立起自己獨(dú)特的設(shè)計形式、獨(dú)特的作風(fēng)。

在我國，網(wǎng)頁設(shè)計整體水平的提高，和這個新興職業(yè)的形成有著必然的關(guān)系。由專業(yè)藝術(shù)設(shè)計人員轉(zhuǎn)型進(jìn)入網(wǎng)絡(luò)領(lǐng)域的視覺設(shè)計，提升了網(wǎng)頁視覺的創(chuàng)意和精美表現(xiàn)。但網(wǎng)頁設(shè)計要求設(shè)計人員應(yīng)該具備全面的科學(xué)與人文素養(yǎng)，全面系統(tǒng)的專業(yè)知識，全新的認(rèn)知與判斷方式，更需要具備設(shè)計藝術(shù)的創(chuàng)造才能。從現(xiàn)有的大量網(wǎng)站建設(shè)和網(wǎng)頁設(shè)計能看出，我國的網(wǎng)頁設(shè)計還處于發(fā)展提高階段，與國際專業(yè)網(wǎng)頁設(shè)計的標(biāo)準(zhǔn)仍然存在很大差距。

對于網(wǎng)頁設(shè)計的方法和理論進(jìn)行研究探索，總結(jié)出一套適合我國特色，繼承中華文化和視覺審美標(biāo)準(zhǔn)，并與國際接軌的網(wǎng)頁設(shè)計學(xué)科方法論，不僅對提高網(wǎng)頁設(shè)計水平，同時對于提高與網(wǎng)絡(luò)相關(guān)的設(shè)計產(chǎn)業(yè)同樣具有相當(dāng)重要的現(xiàn)實意義。

［1］張新紅，呂文靜.網(wǎng)頁設(shè)計與制作［M］.北京:化學(xué)工業(yè)出版社，2009，(8).

［2］馬月.網(wǎng)站界面設(shè)計［M］.北京:北京理工大學(xué)出版社，2007.

［3］張帆，羅琦，宮曉東.網(wǎng)頁界面設(shè)計藝術(shù)教程［M］.北京:人民郵電出版社，2002.

［4］黎芳.網(wǎng)頁設(shè)計與配色實例分析［M］.北京:北京希望電子出版社，2006，(6).