Web界面設計中的美學理論

徐燕飛 張馳騁

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

【關鍵詞】網(wǎng)頁設計界面設計藝術美學

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

（一）什么是網(wǎng)頁設計

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

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

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

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

二、設計中的美學理論

（一）美學理論的概念

就以“美的本質”來說，不同時代、不同流派的美學家對于美學中的這個基本問題的看法，是各不相同的，甚至是千差萬別的。大致可分為以下幾類：內容與形式的關系，理性與感性的關系。有的強調形式，忽視內容；有的只重內容，輕視形式；也有的企圖使形式和內容、理性和感性按照他們的需要而相互結合。

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

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

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

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

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

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

4.電子商務類。使瀏覽者在訪問時進行愉快的交流是設計的重點，要求既要具備人們樂于接受的交互性，又要有吸引瀏覽者注意的頁面形式，如當當書店。

5.交流平臺類。以方便使用為主要特點，指示性強，易于理解，如BBS。

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

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

三、美學理論在網(wǎng)頁設計中的運用

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

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

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

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

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

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

3.用一個色系。簡單地說就是用一個感覺的色彩，例如淡藍，淡黃，淡綠；或者土黃，土灰，土藍。

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

（二）圖形圖像設計

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

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

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

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

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

（三）視覺傳達的設計

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

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

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

（四）版式的構成

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

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

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

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

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

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

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

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

（五）文字的編排設計

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

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

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

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

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

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

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

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

一般情況下，正文不做分欄處理，因為分欄將使瀏覽者將面臨反復拖動滾動條的麻煩。如果想打破一欄的單調，可采用圖文混排的形式。

（六）動畫設計效果

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

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

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

進行網(wǎng)頁設計要有效利用美學原理，設計出漂亮的網(wǎng)頁吸引顧客，同時也應該注意網(wǎng)頁的實用價值，并定期維護網(wǎng)頁，使其發(fā)揮更大作用。

參考文獻

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

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

[3]王愉，隋涌.論網(wǎng)頁視覺要素設計[J].北京印刷學院學報，2005（04）

作者簡介：徐燕飛（1990-），女，寧波大紅鷹學院信息工程學院學生；張馳騁（1990-），男，寧波大紅鷹學院機電學院學生。