徐燕飛 張馳騁

【摘要】網(wǎng)頁界面設(shè)計(jì)是將技術(shù)性與藝術(shù)性融為一體的創(chuàng)造性活動(dòng)。本文在分析當(dāng)前網(wǎng)頁設(shè)計(jì)中存在的問題的基礎(chǔ)上，認(rèn)為美學(xué)與網(wǎng)頁有著很深的聯(lián)系。在網(wǎng)頁中我們可以享受到美，欣賞到美，網(wǎng)頁設(shè)計(jì)中應(yīng)結(jié)合色彩設(shè)計(jì)、圖形圖像設(shè)計(jì)、視覺傳達(dá)的設(shè)計(jì)、版式的構(gòu)成、文字的編排設(shè)計(jì)、動(dòng)畫設(shè)計(jì)效果六要素充分利用美學(xué)理論。

【關(guān)鍵詞】網(wǎng)頁設(shè)計(jì)界面設(shè)計(jì)藝術(shù)美學(xué)

一、網(wǎng)頁設(shè)計(jì)的現(xiàn)狀及問題分析

（一）什么是網(wǎng)頁設(shè)計(jì)

網(wǎng)頁是構(gòu)成網(wǎng)站的基本元素，是承載各種網(wǎng)站應(yīng)用的平臺(tái)。通俗地說，網(wǎng)站就是由網(wǎng)頁組成的。設(shè)計(jì)是把一種計(jì)劃、規(guī)劃、設(shè)想通過視覺的形式傳達(dá)出來的活動(dòng)過程。人類通過勞動(dòng)改造世界，創(chuàng)造文明，創(chuàng)造物質(zhì)財(cái)富和精神財(cái)富，而最基礎(chǔ)、最主要的創(chuàng)造活動(dòng)是造物。設(shè)計(jì)是造物活動(dòng)進(jìn)行預(yù)先的計(jì)劃，可以把任何造物活動(dòng)的計(jì)劃技術(shù)和計(jì)劃過程理解為設(shè)計(jì)。因而，網(wǎng)頁設(shè)計(jì)便是創(chuàng)造出一個(gè)新的網(wǎng)頁的過程。

（二）網(wǎng)頁設(shè)計(jì)現(xiàn)狀及問題

1.網(wǎng)頁設(shè)計(jì)的環(huán)境。不可否認(rèn)，國內(nèi)網(wǎng)頁設(shè)計(jì)環(huán)境目前還停留在初級(jí)的認(rèn)知階段，也就是說，絕大多數(shù)人不知道網(wǎng)絡(luò)的真正的可用之處，你去做一個(gè)業(yè)務(wù)的時(shí)候，不得不去做大量的說服教育工作。以乙方的身份去說服甲方，以專業(yè)角度去教育非專業(yè)認(rèn)識(shí)，結(jié)果是可想而知的。也正是這種全體社會(huì)普遍的低認(rèn)知水平，導(dǎo)致了大量網(wǎng)絡(luò)垃圾的產(chǎn)生。

2.網(wǎng)頁設(shè)計(jì)缺乏美感。網(wǎng)頁技術(shù)更新很快，一個(gè)網(wǎng)站的界面設(shè)計(jì)壽命僅僅2-3年而已。網(wǎng)絡(luò)正在以強(qiáng)大的沖擊力影響著人們的生活。

二、設(shè)計(jì)中的美學(xué)理論

（一）美學(xué)理論的概念

就以“美的本質(zhì)”來說，不同時(shí)代、不同流派的美學(xué)家對(duì)于美學(xué)中的這個(gè)基本問題的看法，是各不相同的，甚至是千差萬別的。大致可分為以下幾類：內(nèi)容與形式的關(guān)系，理性與感性的關(guān)系。有的強(qiáng)調(diào)形式，忽視內(nèi)容；有的只重內(nèi)容，輕視形式；也有的企圖使形式和內(nèi)容、理性和感性按照他們的需要而相互結(jié)合。

（二）美學(xué)理論與網(wǎng)頁的聯(lián)系

美學(xué)與網(wǎng)頁有著很深的聯(lián)系。在網(wǎng)頁中我們可以享受到美，在欣賞美的同時(shí)會(huì)不自覺認(rèn)為，這就是美的網(wǎng)頁。美在以不同形式的網(wǎng)頁表現(xiàn)著，不同類別的網(wǎng)頁呈現(xiàn)出不一樣的美。

網(wǎng)頁界面可以依據(jù)其傳達(dá)信息內(nèi)容的特點(diǎn)來進(jìn)行類型的劃分，主要可分為6種形式：

1.信息查詢類。以實(shí)用功能為主，注重視覺元素的均衡排布，較少裝飾性的元素。如Yahoo!

2.大眾媒體類。集廣告宣傳，行業(yè)資訊，廣告聯(lián)盟，廣告資訊為主的網(wǎng)站。如新浪網(wǎng)新聞中心。

3.宣傳窗口類。從企業(yè)特有形象入手，充分表現(xiàn)企業(yè)文化特征，如Adidas。

4.電子商務(wù)類。使瀏覽者在訪問時(shí)進(jìn)行愉快的交流是設(shè)計(jì)的重點(diǎn)，要求既要具備人們樂于接受的交互性，又要有吸引瀏覽者注意的頁面形式，如當(dāng)當(dāng)書店。

5.交流平臺(tái)類。以方便使用為主要特點(diǎn)，指示性強(qiáng)，易于理解，如BBS。

6.網(wǎng)絡(luò)社區(qū)類。由于網(wǎng)絡(luò)社區(qū)通常不帶有商業(yè)性質(zhì)，因此它的界面設(shè)計(jì)可以根據(jù)社區(qū)內(nèi)容充分發(fā)揮創(chuàng)造性，營造一個(gè)自由、舒適、愉快的氛圍。

更好的掌握網(wǎng)頁界面設(shè)計(jì)中不同類型網(wǎng)頁的不同市場(chǎng)設(shè)計(jì)需求。讓更多的人從新手到入門，甚至有更好的突破。當(dāng)然，純粹的技術(shù)更新是于事無補(bǔ)的，如今的市場(chǎng)已經(jīng)不單單注重于技術(shù)，美在技術(shù)中的體現(xiàn)更為重要。

三、美學(xué)理論在網(wǎng)頁設(shè)計(jì)中的運(yùn)用

對(duì)于設(shè)計(jì)者們來說，網(wǎng)站的整體風(fēng)格及其創(chuàng)意設(shè)計(jì)是最難以學(xué)習(xí)的，難就難在沒有一個(gè)固定的模式可以參照和模仿，給你一個(gè)主題，任何兩人都不可能設(shè)計(jì)出完全一樣的網(wǎng)站。以下是網(wǎng)頁界面設(shè)計(jì)中的六要素便于我們更好的理解：

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

無論是平面設(shè)計(jì)，還是網(wǎng)頁設(shè)計(jì)，色彩永遠(yuǎn)是最重要的一環(huán)。當(dāng)我們距離顯示屏較遠(yuǎn)的時(shí)候，我們看到的不是優(yōu)美的板式或者是美麗的圖片，而是網(wǎng)頁的色彩。

關(guān)于色彩的原理有許多，在此我們不可能一一闡述，大家可以看看相關(guān)設(shè)計(jì)書籍，有利于系統(tǒng)地理解。在此我們僅僅想告訴大家一些網(wǎng)頁配色時(shí)的小技巧。

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

2.用兩種色彩。先選定一種色彩，然后選擇它的對(duì)比色。

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

4.在網(wǎng)頁配色中，還要切記一些誤區(qū)。不要將所有顏色都用到，盡量控制在三種色彩以內(nèi)。背景和前文的對(duì)比盡量要大，(絕對(duì)不要用花紋繁復(fù)的圖案作背景)，以便突出主要文字內(nèi)容。

（二）圖形圖像設(shè)計(jì)

圖形圖像能將信息傳達(dá)得更具體、真實(shí)、直接、易于理解，從而高效率高質(zhì)量的表達(dá)設(shè)計(jì)理論，使網(wǎng)頁充滿強(qiáng)烈的感情色彩。在網(wǎng)頁中合理的應(yīng)用圖形圖像，能夠形成視覺信息的中心，有利于重要信息得傳達(dá)。

1.標(biāo)志（LOGO）。標(biāo)志具有象征功能、識(shí)別功能，是網(wǎng)站形象、特征、信譽(yù)和文化的濃縮，一個(gè)設(shè)計(jì)杰出的、符合網(wǎng)站理念的標(biāo)志，會(huì)增加網(wǎng)站的信賴感和權(quán)威感，在社會(huì)大眾的心目中，它就是一個(gè)網(wǎng)站或某品牌的代表。圖形的標(biāo)志能夠避免文字做標(biāo)志所給人的單調(diào)感，圖形標(biāo)志是一種簡(jiǎn)潔但不簡(jiǎn)單的圖形符號(hào)，具有以小見大、以少勝多、以一當(dāng)十的特點(diǎn)。在現(xiàn)代社會(huì)生活中，經(jīng)過精心設(shè)計(jì)而具有高度實(shí)用性和藝術(shù)性的圖形標(biāo)志，以其特有的功能和新穎別致的藝術(shù)效果，感染和影響著人們，指導(dǎo)人們的認(rèn)知和選擇。

2.背景插圖。背景插圖可以把瀏覽器變成一個(gè)真實(shí)的環(huán)境，用圖形為背景來襯托主題，可以增加層次感，可與網(wǎng)頁主題圖像形成對(duì)比或共鳴，從而突出主題形象，彰顯網(wǎng)頁的風(fēng)格。

3.主圖。網(wǎng)頁主圖是指網(wǎng)頁中表達(dá)主題、突出主題的較大幅面的圖形圖像。一幅好的主圖，可以使瀏覽者見其圖即知其內(nèi)容，主圖能夠形成整個(gè)頁面的視覺中心，它具有直觀性強(qiáng)的特點(diǎn)，不需要像文字那樣去逐字逐句地閱讀，可以不受文化水平的限制，并能在瞬間給人以深刻印象。

4.超級(jí)鏈接。將圖形設(shè)計(jì)成超級(jí)鏈接形式，能夠使網(wǎng)頁鏈接變得樣式豐富，可以使網(wǎng)頁更為美觀。若能利用標(biāo)志性符號(hào)，便可以減弱語言的障礙。圖形按鈕具有直觀、形象的特點(diǎn)，可以為單調(diào)的文字信息增添活力，可以更加明確地表現(xiàn)它所要進(jìn)行的操作。

（三）視覺傳達(dá)的設(shè)計(jì)

網(wǎng)頁作為一種新的視覺表現(xiàn)形式，它兼容了傳統(tǒng)平面設(shè)計(jì)的特征，又具備所沒有的優(yōu)勢(shì)，是將技術(shù)性與藝術(shù)性融為一體的創(chuàng)造性活動(dòng)。網(wǎng)頁界面設(shè)計(jì)所涉及的范圍非常的廣泛，包括消費(fèi)者心理學(xué)、視覺設(shè)計(jì)美學(xué)、人機(jī)工程、語言學(xué)、計(jì)算機(jī)技術(shù)等諸多方面。本文從視覺傳達(dá)的角度進(jìn)行了一些闡述與分析，結(jié)合人們?cè)跒g覽網(wǎng)頁媒體信息時(shí)的視覺習(xí)慣，探討了網(wǎng)頁界面設(shè)計(jì)的原則、內(nèi)容，提到通過視覺信息有效的編排，增強(qiáng)網(wǎng)頁信息傳達(dá)的有效性。

1.網(wǎng)頁中視覺傳達(dá)的元素。做一個(gè)既要美觀有便利的個(gè)性化網(wǎng)站界面，不但要考慮網(wǎng)頁的banner、還是導(dǎo)航條的美觀和實(shí)用性，更要去考慮網(wǎng)頁設(shè)計(jì)的多種要素，例如文字、圖片、聲音、視頻、動(dòng)畫等其他的視覺元素。網(wǎng)頁中使用的動(dòng)畫，必須符合網(wǎng)頁的主題，動(dòng)畫的數(shù)量、變化不能過多，否則會(huì)削弱動(dòng)態(tài)效果，分散觀者的注意力。[3]

2.網(wǎng)頁界面設(shè)計(jì)中的應(yīng)用方法。設(shè)計(jì)網(wǎng)頁界面所包含的因素是極為廣泛的，但在運(yùn)用中卻只能有側(cè)重、有強(qiáng)調(diào)的把握。設(shè)計(jì)因素雖多，但她仍是一個(gè)不可分割的整體。它的結(jié)果是物化的形，但這個(gè)形卻是代表了時(shí)代、民族等方面的意識(shí)，并最終反映出人的“美”的心理活動(dòng)。

（四）版式的構(gòu)成

頁面版式也稱頁面的構(gòu)圖，版式是網(wǎng)頁界面設(shè)計(jì)的重要組成部分，它將文字、圖形等視覺元素進(jìn)行組合配置，使頁面整體視覺效果美觀和諧，便于閱讀，實(shí)現(xiàn)信息傳達(dá)的最佳效果。

1.滿版型頁面。滿版型頁面以圖像充滿整版。主要以圖像為訴求點(diǎn)，也可將部分文字壓置于圖像之上。視覺傳達(dá)效果直觀而強(qiáng)烈。滿版型給人以舒展、大方的感覺。隨著寬帶的普及，這種版式在網(wǎng)頁設(shè)計(jì)中的運(yùn)用越來越多。

2.骨骼型頁面。網(wǎng)頁版式的骨骼型是一種規(guī)范的、理性的分割方法，類似于報(bào)刊的版式。常見的骨骼有豎向通欄、雙欄、三欄、四欄和橫向的通欄、雙欄、三欄和四欄等。一般以豎向分欄為多。這種版式給人以和諧、理性的美。幾種分欄方式結(jié)合使用，既理性、條理，又活潑而富有彈性。

3.分割型頁面。分割型把整個(gè)頁面分成上下或左右兩部分，分別安排圖片和文案。兩個(gè)部分形成對(duì)比：有圖片的部分感性而具活力，文案部分則理性而平靜?？梢哉{(diào)整圖片和文案所占的面積，來調(diào)節(jié)對(duì)比的強(qiáng)弱。例如：如果圖片所占比例過大，文案使用的字體過于纖細(xì)，字距、行距、段落的安排又很疏落，則造成視覺心理的不平衡，顯得生硬。倘若通過文字或圖片將分割線虛化處理，就會(huì)產(chǎn)生自然和諧的效果。

4.中軸型頁面。中軸型沿瀏覽器窗口的中軸將圖片或文字作水平或垂直方向的排列。水平排列的頁面給人穩(wěn)定、平靜、含蓄的感覺。垂直排列的頁面給人以舒暢的感覺。曲線型的圖片、文字在頁面上作曲線的分割或編排構(gòu)成，產(chǎn)生韻律與節(jié)奏。傾斜型頁面主題形象或多幅圖片、文字作傾斜編排，形成不穩(wěn)定感或強(qiáng)烈的動(dòng)感，引人注目。

5.對(duì)稱型頁面。對(duì)稱的頁面給人穩(wěn)定、嚴(yán)謹(jǐn)、莊重、理性的感受。對(duì)稱分為絕對(duì)對(duì)稱和相對(duì)對(duì)稱。一般采用相對(duì)對(duì)稱的手法，以避免呆板。左右對(duì)稱的頁面版式比較常見。四角型也是對(duì)稱型的一種，是在頁面四角安排相應(yīng)的視覺元素。四個(gè)角是頁面的邊界點(diǎn)，重要性不可低估。在四個(gè)角安排的任何內(nèi)容都能產(chǎn)生安定感。控制好頁面的四個(gè)角，也就控制了頁面的空間。越是凌亂的頁面，越要注意對(duì)四個(gè)角的控制。

6.自由型頁面。自由型的頁面具有活潑、輕快的風(fēng)格。網(wǎng)頁各視覺元素呈三角形排列。正三角形（金字塔型）最具穩(wěn)定性，倒三角形則產(chǎn)生動(dòng)感。側(cè)三角形構(gòu)成一種均衡版式，既安定又有動(dòng)感。

7.焦點(diǎn)型網(wǎng)頁。焦點(diǎn)型的網(wǎng)頁版式通過對(duì)視線的誘導(dǎo)，使頁面具有強(qiáng)烈的視覺效果。焦點(diǎn)型分三種情況:以對(duì)比強(qiáng)烈的圖片或文字置于頁面的視覺中心。視覺元素引導(dǎo)瀏覽者視線向頁面中心聚攏，就形成了一個(gè)向心的版式。向心版式是集中的、穩(wěn)定的，是一種傳統(tǒng)的手法。視覺元素引導(dǎo)瀏覽者視線向外輻射，則形成一個(gè)離心的網(wǎng)頁版式。離心版式是外向的、活潑的，更具現(xiàn)代感，運(yùn)用時(shí)應(yīng)注意避免凌亂。

（五）文字的編排設(shè)計(jì)

在網(wǎng)頁設(shè)計(jì)中，字體的處理與色彩、版式、圖形等其他設(shè)計(jì)元素的處理一樣非常關(guān)鍵。從藝術(shù)的角度可以將字體本身看成是一種藝術(shù)形式，它在個(gè)性和情感方面對(duì)人們有著很大影響。

1.字體的使用。字體的最大特點(diǎn)就是每種字體給人帶來不同的情感和風(fēng)格屬性。字體具有兩方面的作用：一是實(shí)現(xiàn)字意與語義的功能，二是美學(xué)效應(yīng)。從加強(qiáng)平臺(tái)無關(guān)性的角度來考慮，正文內(nèi)容最好采用默認(rèn)字體。因?yàn)闉g覽器是用本地機(jī)器上的字庫顯示頁面內(nèi)容。在網(wǎng)頁設(shè)計(jì)中準(zhǔn)確選擇字體，是每個(gè)網(wǎng)頁設(shè)計(jì)師首先要考慮的問題。

2.兩端對(duì)齊。文字編排可以橫排也可豎排，只要左右或上下的長度對(duì)齊，這樣的字群組合就顯得整齊、端正、嚴(yán)謹(jǐn)、大方、美觀。但要注意避免平淡，可選取不同形式的字體穿插使用，這種方式容易與圖片混排。

3.一端對(duì)齊。一端對(duì)齊能產(chǎn)生視覺節(jié)奏與韻律的形式美感。通過左對(duì)齊或右對(duì)齊的方式使行首或行尾自然形成一條清晰的垂直線。另一端任其長短不同，能產(chǎn)生虛實(shí)變化，又富有節(jié)奏感。左對(duì)齊符合人們的閱讀時(shí)的習(xí)慣，有親切感。右對(duì)齊可改變?nèi)藗兊拈喿x習(xí)慣，會(huì)顯得有新意，有一定的格調(diào)。

4.居中排列。以中心軸為準(zhǔn)，文字居中排列，左右兩端字距相等。這種編排形式可令視線集中，中心突出顯得優(yōu)雅、莊重、有個(gè)性。不足之處是閱讀起來不太方便，此形式適宜文字不多的版面編排。將文字居中排列，用于網(wǎng)絡(luò)廣告中，有利于主題信息的傳達(dá)。

5.文字繞圖編排。文字圍繞圖形邊緣排列，這樣穿插形式的應(yīng)用非常廣泛，能給人以親切、自然、生動(dòng)和融洽的感覺。海爾公司簡(jiǎn)介的網(wǎng)頁中，將文字繞圖排列，極具親和力。

6.自由編排。在綜合甚至打破上述幾種方式的基礎(chǔ)上，使版式更加活潑、更加新穎，具有較強(qiáng)烈的動(dòng)感。但要注意保持版面的完整性，還要注重有一定的編排規(guī)律。傾斜的文字適合版面活潑動(dòng)感的特點(diǎn)，突出視覺焦點(diǎn)。

7.標(biāo)題與正文的編排。標(biāo)題的字體、位置、大小、排列方向能夠直接影響編排版式的藝術(shù)風(fēng)格。標(biāo)題完全可以打破一般視覺的常規(guī)導(dǎo)向，可橫排、豎排、居中或邊置等排列。標(biāo)題雖是整段或整篇文章的標(biāo)題，但不一定千篇一律地置于段首之上?？勺骶又小M向、豎向或邊置等編排處理，甚至可以直接插入字群中，以新穎的界面來打破舊有的規(guī)律。

一般情況下，正文不做分欄處理，因?yàn)榉謾趯⑹篂g覽者將面臨反復(fù)拖動(dòng)滾動(dòng)條的麻煩。如果想打破一欄的單調(diào)，可采用圖文混排的形式。

（六）動(dòng)畫設(shè)計(jì)效果

如今互聯(lián)網(wǎng)發(fā)展越來越明顯，單一的靜態(tài)頁面已經(jīng)不能滿足瀏覽者的需求，而網(wǎng)頁不是視頻，這時(shí)在網(wǎng)頁中加入了動(dòng)畫效果，是不二之選。而網(wǎng)頁界面設(shè)計(jì)中動(dòng)畫設(shè)計(jì)效果主要分為以下兩種：

1.整體運(yùn)用。這一類運(yùn)用通常運(yùn)用在門戶網(wǎng)站首頁，國外的很多網(wǎng)站都使用了這一方法，吸引瀏覽者，更加新穎，直擊瀏覽者的心扉。同樣它也有不足之處，比如緩沖較慢。

2.局部運(yùn)用。此類運(yùn)用比較普遍，通常以輪顯嵌入的視頻表現(xiàn)。讓原本靜止的網(wǎng)頁“動(dòng)”起來，變得不那么單一。

進(jìn)行網(wǎng)頁設(shè)計(jì)要有效利用美學(xué)原理，設(shè)計(jì)出漂亮的網(wǎng)頁吸引顧客，同時(shí)也應(yīng)該注意網(wǎng)頁的實(shí)用價(jià)值，并定期維護(hù)網(wǎng)頁，使其發(fā)揮更大作用。

參考文獻(xiàn)

[1]殷辛，段蕓.《網(wǎng)頁設(shè)計(jì)》了解網(wǎng)頁設(shè)計(jì)基本理論.華中科技大學(xué)出版社，2011年1月1日

[2]數(shù)據(jù)來源參見百度文庫中教育專區(qū)高等教育《網(wǎng)頁設(shè)計(jì)基本理論》第三章，2012年1月20日

[3]王愉，隋涌.論網(wǎng)頁視覺要素設(shè)計(jì)[J].北京印刷學(xué)院學(xué)報(bào)，2005（04）

作者簡(jiǎn)介：徐燕飛（1990-），女，寧波大紅鷹學(xué)院信息工程學(xué)院學(xué)生；張馳騁（1990-），男，寧波大紅鷹學(xué)院機(jī)電學(xué)院學(xué)生。