網(wǎng)頁設(shè)計的表現(xiàn)特征

網(wǎng)絡(luò)作為一種新的媒體，隨著其應(yīng)用的日益普遍和廣泛，豐富了視覺傳達設(shè)計的基本視覺要素的表現(xiàn)方式，網(wǎng)頁設(shè)計就成為隨著計算機技術(shù)、網(wǎng)絡(luò)技術(shù)、圖像處理、動畫制作的產(chǎn)生和發(fā)展而形成的［1］，技術(shù)與藝術(shù)高度統(tǒng)一的一門新學(xué)科。網(wǎng)頁設(shè)計既具有技術(shù)、功能的基本特征，又具備視覺傳達設(shè)計的藝術(shù)特征。依照設(shè)計目的和要求，對網(wǎng)頁進行功能上的實現(xiàn)和視覺形式的設(shè)計運用，使得技術(shù)、功能和藝術(shù)在網(wǎng)頁設(shè)計中緊密結(jié)合、相輔相成。

1、視覺形式是網(wǎng)頁設(shè)計的外在表現(xiàn)

視覺形式是反應(yīng)具體事物美的特征內(nèi)容的外在形式，包括“外形式”和“內(nèi)形式”兩個方面。文字、圖形、視頻是網(wǎng)頁設(shè)計的視覺傳達要素，點、線、面是網(wǎng)頁設(shè)計中的特殊視覺形式［2］，這些是網(wǎng)頁設(shè)計的“外形式”。而網(wǎng)頁設(shè)計的“內(nèi)形式”是視覺要素按一定的規(guī)律組合起來，以完美表現(xiàn)內(nèi)容的結(jié)構(gòu)形式［3］。網(wǎng)頁是通過視覺元素引入、被受眾關(guān)注，從而實現(xiàn)信息的傳達，這就要求網(wǎng)頁的設(shè)計必須適應(yīng)受眾的視覺在心理和生理上的需求特點，遵循視覺的構(gòu)成形式規(guī)則，確定各種視覺元素之間的關(guān)系和秩序。將信息準(zhǔn)確的傳達給受眾，以滿足受眾的使用和需求，并通過獨特的藝術(shù)風(fēng)格突出網(wǎng)頁內(nèi)容和設(shè)計目的。

根據(jù)網(wǎng)頁的特點、設(shè)計內(nèi)容、設(shè)計目的，將網(wǎng)頁設(shè)計中的文字、背景、按鈕、圖標(biāo)、圖像、顏色、導(dǎo)航等外在視覺元素，以點、線、面，灰、白、黑，色彩對比等方面的形式構(gòu)成，進行網(wǎng)頁設(shè)計。點的形態(tài)在空間中產(chǎn)生活潑、輕松的視覺效果，點的構(gòu)成具有體現(xiàn)局部細節(jié)、集中視線、突出主題的視覺作用；線的形態(tài)在空間中產(chǎn)生方向性、條理性的視覺美感，線的構(gòu)成具有體現(xiàn)平面分隔、類型劃分的視覺作用；面的形態(tài)在空間中產(chǎn)生完整、穩(wěn)重的視覺效果，形成多層次感、縱深感、統(tǒng)一畫面的視覺作用。例如阿迪達斯的官方網(wǎng)頁（圖1），網(wǎng)頁整體是由多幅圖片構(gòu)成一個完整的四方形面，當(dāng)受眾進入網(wǎng)頁，使受眾產(chǎn)生穩(wěn)重、值得信賴的第一感覺。相對整體的頁面而言，圖片就一點的形式存在，在規(guī)整的視覺感上添加了活潑感、多元素性、多方面性，與阿迪達斯運動、活力的特點相吻合。以圖片為參照物，圖片間的空隙成為網(wǎng)頁中線元素，將圖片貫穿、連接，構(gòu)成完整的面。當(dāng)鼠標(biāo)放到圖片上，就會出現(xiàn)相應(yīng)的文字，但又不破壞整體的構(gòu)成形式。文字、圖片以點線面的形式存在整個網(wǎng)頁中，通過相互對比、相互作用，形成了統(tǒng)一、活潑的視覺心理感受。

圖1 阿迪達斯網(wǎng)頁

網(wǎng)頁設(shè)計無論運用何種視覺形式，都要將文字、圖形、色彩這些元素構(gòu)成一個完整、統(tǒng)一的設(shè)計風(fēng)格，也就是網(wǎng)頁的整體性，網(wǎng)頁設(shè)計在總體上整體統(tǒng)一，在細節(jié)上變化多樣，達到形式與內(nèi)容、局部與整體的統(tǒng)一，形成視覺藝術(shù)效果的吸引力和視覺空間秩序。網(wǎng)頁設(shè)計運用不同的視覺要素，不同的構(gòu)成形式規(guī)律，形成了不同的藝術(shù)風(fēng)格，根據(jù)不同的網(wǎng)頁內(nèi)容、不同的設(shè)計目的，運用恰當(dāng)?shù)囊曈X形式法則，通過對比、連續(xù)、重復(fù)、比例等方式，表現(xiàn)出嚴謹有序的網(wǎng)頁設(shè)計概念。符合人們的視覺邏輯、視覺美感，提高信息的視覺識別性，有意識的引導(dǎo)受眾順著網(wǎng)頁設(shè)計、網(wǎng)頁視覺流程迅速感知所傳達的信息，達到網(wǎng)頁的設(shè)計目的。

2、功能特征是網(wǎng)頁設(shè)計的內(nèi)在基礎(chǔ)

伴隨著網(wǎng)絡(luò)的快速發(fā)展，網(wǎng)頁已經(jīng)成為網(wǎng)絡(luò)信息表現(xiàn)和思想傳播交流的主要形式［4］。網(wǎng)頁作為信息傳達的新載體和重要的傳播途徑，信息傳播功能就成為網(wǎng)頁設(shè)計的基礎(chǔ)。網(wǎng)頁設(shè)計的視覺形式服務(wù)于網(wǎng)頁的主題，這是網(wǎng)頁設(shè)計最重要的一條規(guī)律，設(shè)計的形式既要實現(xiàn)功能，又要表現(xiàn)視覺美感，美感和功能相結(jié)合，就是為了更好的表達主題［5］。這就要求網(wǎng)頁設(shè)計在追求視覺形式美的同時，文字、色彩、板式、圖形等視覺元素必須適合主題，與網(wǎng)頁的內(nèi)容、性質(zhì)相一致，體現(xiàn)網(wǎng)頁的功能特征。

網(wǎng)頁根據(jù)功能、內(nèi)容的不同，大致可分為及時性新聞網(wǎng)頁、政府官方網(wǎng)頁、品牌商業(yè)性網(wǎng)頁和論壇交流性網(wǎng)頁。搜狐、雅虎等及時性新聞網(wǎng)頁（圖2），主要的特征就是信息量大，針對的受眾范圍廣泛，為了滿足不同層次和不同領(lǐng)域的受眾的信息滿足和功能需求，網(wǎng)頁的視覺表現(xiàn)形式就需要適合受眾的審美需求，并及時的可以找到相關(guān)信息，這就需要根據(jù)網(wǎng)頁不同板塊的功能進行設(shè)計。文字就成為這類網(wǎng)頁的主要視覺元素，文字的字體單一、易識別。由于信息量巨大，線條和色彩就成為劃分區(qū)域的界限和標(biāo)志。圖片在這類網(wǎng)站中起到對主要信息、新聞的強化點綴作用。政府網(wǎng)站則顯得十分正式和嚴肅，對于文字、色彩的運用有著十分嚴格的要求。中華人民共和國政府的網(wǎng)頁以中國國旗的顏色——紅色為主體顏色，色彩搭配顯得莊重、嚴肅，視覺表現(xiàn)形式規(guī)整統(tǒng)一、簡單直接（圖3）。和搜狐等及時性新聞網(wǎng)頁相比，對于視覺形式要求更加嚴格和簡單。耐克、三星、摩托羅拉等商業(yè)品牌網(wǎng)站，相對于以上兩種網(wǎng)頁，屬于品牌商業(yè)性質(zhì)的網(wǎng)站，對于視覺表現(xiàn)形式的運用就顯得更加自由。主要的功能是宣傳自身品牌，展現(xiàn)產(chǎn)品理念。這類網(wǎng)站的設(shè)計主要結(jié)合品牌特點，沒有固定的文字、色彩要求，可以運用對比、互動、視頻等不同的表現(xiàn)方式。例如三星的網(wǎng)站（圖4、5），根據(jù)產(chǎn)品的不同，圖片、色彩也就不同，但是整體的版式、形式具有統(tǒng)一的框架結(jié)構(gòu)。

從以上幾種不同性質(zhì)的網(wǎng)頁分析中，可以看出，網(wǎng)頁設(shè)計中的視覺元素的運用，都是以網(wǎng)頁的功能為基礎(chǔ)，網(wǎng)頁的不同功能又是通過不同形式的文字、色彩、圖形、版式進行視覺表現(xiàn)，只注重唯美的視覺表現(xiàn)形式，強調(diào)獨特性、個性的設(shè)計風(fēng)格，而忽略了功能特征的網(wǎng)頁設(shè)計會失去網(wǎng)頁的存在價值，造成信息的混亂，誤導(dǎo)受眾產(chǎn)生歧義。只重視主題思想的條理性，而忽視覺元素的形式表現(xiàn)，網(wǎng)頁設(shè)計將會失去生命力，顯得空洞無力，削弱了網(wǎng)頁的最佳訴求效果。網(wǎng)頁設(shè)計只有結(jié)合網(wǎng)頁的主題內(nèi)容，以適當(dāng)?shù)囊曈X表現(xiàn)形式，將功能與視覺形式有機地結(jié)合，實現(xiàn)網(wǎng)頁的設(shè)計目的和要求。

圖2 搜狐、雅虎網(wǎng)頁截圖

圖3 中華人民共和國政府網(wǎng)頁

圖4、5 三星官方網(wǎng)頁

3、技術(shù)性是網(wǎng)頁設(shè)計的結(jié)構(gòu)框架

網(wǎng)頁從最初的簡單字符的靜態(tài)網(wǎng)頁，到現(xiàn)在運用最為廣泛的圖形并茂的網(wǎng)頁，再到最新出現(xiàn)的動態(tài)交互式網(wǎng)頁，都是隨著技術(shù)的不斷更新而發(fā)展的［6］。技術(shù)性也就成為了網(wǎng)頁設(shè)計的結(jié)構(gòu)框架基礎(chǔ)，成為網(wǎng)頁的存在價值的結(jié)構(gòu)基礎(chǔ)。技術(shù)與功能有著密不可分的關(guān)系，人們對于技術(shù)的探索是在功能的不斷更新之下完成的，當(dāng)功能的缺陷、不足被發(fā)現(xiàn)后，才會有技術(shù)的推陳出新來解決和完善功能，使得技術(shù)不斷成熟，有了更多的表現(xiàn)形式，從而通過功能效用的改善，使受眾在心理和生理上獲得享受［7］?？梢哉f，一個新的技術(shù)原理的應(yīng)用可以為人們開拓出一個全新的活動領(lǐng)域，技術(shù)的可能性成為人們審美創(chuàng)造的現(xiàn)實物質(zhì)基礎(chǔ)［8］。網(wǎng)頁的技術(shù)性為受眾、客戶提供了一個全新的藝術(shù)形態(tài)。

網(wǎng)頁設(shè)計的技術(shù)性指的是，網(wǎng)頁設(shè)計是運用相關(guān)的編程技術(shù)、媒體技術(shù)、電子技術(shù)等實現(xiàn)網(wǎng)絡(luò)視覺表現(xiàn)效果的方式、方法。最初的網(wǎng)頁設(shè)計是以簡單的文字比安排為主，信息量少，并卻缺乏視覺美感。隨著圖片技術(shù)的加入，曾加了網(wǎng)頁設(shè)計的視覺表現(xiàn)形式，活躍了網(wǎng)站的整體氛圍，受眾在瀏覽網(wǎng)頁時，滿足了審美心理上的享受，使得信息流通和關(guān)注程度得到提高。動畫、視頻技術(shù)在不斷的運用到網(wǎng)頁設(shè)計之中，這些技術(shù)極大地滿足和豐富了受眾對網(wǎng)絡(luò)信息的接受和傳播。動畫具有很強的視覺沖擊力，與靜態(tài)的文字、圖片相呼應(yīng)，可以達到動靜相宜的視覺效果。視頻具有信息豐富、傳達便捷、表現(xiàn)靈活等，其它視覺元素所不具備的特征和優(yōu)勢，適用于不同文化層次的受眾，同時形象生動，具有較強的吸引力。

網(wǎng)頁設(shè)計的技術(shù)性是隱形的特征，只有通過頁面的視覺形式表現(xiàn)出來。相比之下，廣播、電視、報紙等媒體都是以線性的方式提供信息，也就是按照信息的要求和事先確定的格式來傳播。在網(wǎng)絡(luò)的環(huán)境中，受眾不再是對于信息的被動接受者，而是以主動參與者的身份，加入到信息的接受、處理和發(fā)布之中。龐大的信息量充斥著整個網(wǎng)絡(luò)，那么網(wǎng)頁中信息的鏈接導(dǎo)航設(shè)計就成了網(wǎng)頁設(shè)計中最為重要的一個方面。以技術(shù)作為框架，形成完整、合理的信息鏈接框架，再通過視覺元素將其視覺化，引導(dǎo)受眾可以選擇性的認識、運用和接受信息。這種持續(xù)的交互性，是以交互的技術(shù)為支持的，如阿迪達斯的網(wǎng)頁，網(wǎng)頁設(shè)計雖然是圖片元素展現(xiàn)網(wǎng)頁的主題內(nèi)容，但是當(dāng)鼠標(biāo)移至某一個單獨的圖片時。就會顯現(xiàn)相關(guān)的文字主題，凸顯品牌產(chǎn)品的特征，或企業(yè)的某一個理念，使得受眾產(chǎn)生趣味性的同時，并與不同的受眾產(chǎn)生信息選擇互動，根據(jù)受眾自身的喜好，選擇的接受了企業(yè)信息，了解了企業(yè)的產(chǎn)品。網(wǎng)頁設(shè)計的視覺表現(xiàn)形式以技術(shù)為框架結(jié)構(gòu)，技術(shù)性又通過視覺元素將其展現(xiàn)。

結(jié)語

隨著計算機技術(shù)的不斷更新和發(fā)展，網(wǎng)頁設(shè)計只有掌握了各種網(wǎng)絡(luò)技術(shù)規(guī)律、通過多樣的視覺形式，注重技術(shù)、功能和藝術(shù)的時間的關(guān)系，相輔相成，才能滿足未來受眾對網(wǎng)頁信息的更高要求。網(wǎng)頁設(shè)計是主觀和客觀共同作用的結(jié)果，網(wǎng)頁設(shè)計的功能特征主要表現(xiàn)為客觀因素，視覺表現(xiàn)形式主要表現(xiàn)為主觀因素，視覺表現(xiàn)形式是網(wǎng)頁設(shè)計技術(shù)性的外在表現(xiàn)，功能決定了技術(shù)的表現(xiàn)方式，視覺表現(xiàn)形式又通過技術(shù)和功能得以支持，實現(xiàn)技術(shù)和與藝術(shù)的緊密結(jié)合，使網(wǎng)頁設(shè)計從平面設(shè)計擴展到到交互式設(shè)計，極大地豐富了網(wǎng)頁設(shè)計的表現(xiàn)形式。網(wǎng)頁設(shè)計的技術(shù)性和藝術(shù)性高度統(tǒng)一，把受眾帶入一個全新的信息傳播視聽空間。

［1］徐輝，李建軍.網(wǎng)頁設(shè)計的“美”與“技術(shù)”.安徽電子信息職業(yè)技術(shù)學(xué)院學(xué)報［J］，2006Vol5（27）：119～120

［2］楊西惠，劉西莉.網(wǎng)頁設(shè)計的視覺要素與編排創(chuàng)意.裝飾［J］，2005（144）：56～57

［3］耿陽，孫志紅.淺談網(wǎng)頁設(shè)計的形式和藝術(shù)風(fēng)格.藝術(shù)與設(shè)計［J］：65～66

［4］宋春暉.網(wǎng)頁設(shè)計中的美學(xué)應(yīng)用分析.海南師范學(xué)院學(xué)報(自然科學(xué)版)［J］，2005Vol18（1）：46～49

［5］許金友.藝術(shù)與技術(shù)的完美結(jié)合——淺議網(wǎng)頁設(shè)計的特色.藝術(shù)與設(shè)計（理論）［J］，2009（4）：67～69

［6］張亮.論網(wǎng)頁設(shè)計中的美學(xué).大眾科技［J］，2009（115）：38～39

［7］鄒立坤.技術(shù)美——現(xiàn)代設(shè)計的新訴求.藝術(shù)與設(shè)計［J］：17～19

［8］徐恒醇.設(shè)計美學(xué)［M］.北京：清華大學(xué)出版社.2006: