王丹

摘 要 隨著“互聯(lián)網(wǎng)+”時代的到來，人們與網(wǎng)絡(luò)的接觸更為密切；與此同時，人們對網(wǎng)頁設(shè)計的形式美感也有了更高更新的要求。本文從藝術(shù)的角度探討了網(wǎng)頁設(shè)計時所需注意的視覺設(shè)計基本準則，在基于“技”的基礎(chǔ)上，為網(wǎng)頁設(shè)計的“藝”提供了新的指導方法。

關(guān)鍵詞 網(wǎng)頁設(shè)計；視覺形式美感；平面設(shè)計；美學原理

中圖分類號 G2 文獻標識碼 A 文章編號 1674-6708（2017）193-0059-02

1 網(wǎng)頁設(shè)計概況

網(wǎng)頁作為網(wǎng)絡(luò)發(fā)展和生存的必然產(chǎn)物。距離第一個具有現(xiàn)代意義的網(wǎng)頁在互聯(lián)網(wǎng)出現(xiàn)距今已有二十幾年的時間。網(wǎng)頁設(shè)計的發(fā)展大致經(jīng)歷了3個階段：第一個階段，純文本靜態(tài)網(wǎng)頁。作為人機交流的媒介，最早的網(wǎng)頁由字符組成，只能保存單純的文本，只追求傳遞信息的實用功能作用，對網(wǎng)頁的藝術(shù)設(shè)計要求低。使用人群主要是一些科學工作者。第二個階段，圖文并茂的網(wǎng)頁。1990年發(fā)布的第一個圖形化瀏覽器“Word Wide Web”，使圖像、聲音、動畫、視頻、甚至3D技術(shù)開始在英特網(wǎng)上流行起來，網(wǎng)站的內(nèi)容開始變得豐富起來，逐步由以技術(shù)為主，轉(zhuǎn)而走上技術(shù)與藝術(shù)相結(jié)合的道路。第三個階段，動態(tài)交互式網(wǎng)頁。當代動態(tài)交互式網(wǎng)頁的實現(xiàn)是基于AJAX技術(shù)實現(xiàn)的，主要是改善了實時交互的體驗。動態(tài)交互式網(wǎng)頁無論是在功能使用還是外觀審美上對開發(fā)設(shè)計人員都有著更高更新的要求，也引導著網(wǎng)頁設(shè)計的未來發(fā)展趨勢。

2 新媒體語境下網(wǎng)頁設(shè)計的視覺藝術(shù)性提升方法

網(wǎng)頁設(shè)計是傳統(tǒng)平面設(shè)計在以網(wǎng)絡(luò)為載體的新媒體語境下的延續(xù)，為傳統(tǒng)平面設(shè)計提供了更廣闊的發(fā)展空間，同時，也讓其自身的視覺表現(xiàn)有跡可循。因此，在探討網(wǎng)頁設(shè)計的視覺藝術(shù)性時，可參考平面設(shè)計的美學法則，從根源上解決網(wǎng)頁設(shè)計作品藝術(shù)表現(xiàn)力弱的問題。

2.1 色彩應用的和諧一致性

在網(wǎng)頁眾多元素中，色彩元素往往是首先吸引瀏覽者目光的，它的效果直接影響閱讀者的觀賞興趣，色彩運用的合適與否直接關(guān)系到網(wǎng)頁視覺效果的好壞。不同的色調(diào)會在人的心理上產(chǎn)生不一樣的視覺感受，設(shè)計者可以將這種感受結(jié)合VI設(shè)計理念，為網(wǎng)頁制定主體色調(diào)，運用到不同的網(wǎng)頁設(shè)計中去，和其他的基本要素一起構(gòu)成統(tǒng)一的風格特征，以此凸顯企業(yè)或品牌特色。比如，冷色調(diào)通常會給人理性、嚴謹、冷靜的印象，所以藍色在一些電子、電腦、汽車等高科技類的網(wǎng)站設(shè)計中被廣泛應用；而綠色因其具有自然、和諧的色彩特征被認為是健康的標志性色彩在各醫(yī)療健康網(wǎng)站中得以廣泛應用。

在網(wǎng)頁設(shè)計中，色彩的作用還表現(xiàn)在可以通過微差法，豐富界面的色彩元素，在突出主體信息的同時，點綴和豐富網(wǎng)頁的界面色彩視覺感。又或利用色塊法，將不同欄目的內(nèi)容進行區(qū)分，讓瀏覽者更快速找到所需瀏覽內(nèi)容。當然，網(wǎng)頁設(shè)計的色彩應用應區(qū)別與傳統(tǒng)平面色彩應用，顏色種類不宜超過3種以上，避免畫面過于凌亂，人的視覺焦點會無所適從。

2.2 基本構(gòu)成元素的別具匠心性

網(wǎng)頁設(shè)計構(gòu)成的基本元素主要有：圖形、文字、以及以新媒體為載體的視聽元素（影視、動畫、音樂）?；驹氐暮侠韯?chuàng)意化設(shè)計是網(wǎng)頁與網(wǎng)頁之間相互區(qū)別以及脫穎而出的重要因素。以藝術(shù)設(shè)計觀點而論，設(shè)計者在進行網(wǎng)頁界面設(shè)計時應注意以下三點。

2.2.1 圖形的創(chuàng)意表達

在以圖形來講解信息的時代，圖形給信息傳遞帶來了重要的影響。網(wǎng)頁設(shè)計中圖形的應用形式主要有BANNER廣告、產(chǎn)品圖片以及導航視覺符號。不同的圖形在其應用領(lǐng)域都有各自的特色，以編排在網(wǎng)頁最佳視域中的橫幅BANNER廣告為例，此類圖片，主要用以宣傳最新產(chǎn)品或服務，其色彩和內(nèi)容的獨特性，是吸引瀏覽者注意的第一要素，因此要格外考慮其本色設(shè)計結(jié)構(gòu)與原創(chuàng)性，呆滯的橫幅版面或從素材網(wǎng)站復制的素材，都可能讓整個網(wǎng)頁界面黯然失色。而產(chǎn)品信息類的圖像，則要考慮整體色調(diào)的歸整和和諧性，若產(chǎn)品較多又不想缺乏獨特感，可適當應用瀑布流結(jié)構(gòu)，讓整個畫畫，具有動感。導航類視覺符號的設(shè)計，應簡潔具有抽象概括性，能明確表達文字訴求的同時，具有企業(yè)文化特色和本土氣息。

2.2.2 文字的藝術(shù)設(shè)計

由于網(wǎng)絡(luò)載體的特殊性，網(wǎng)頁設(shè)計的文字一般以宋體和黑體為主，字體的設(shè)計，常常被設(shè)計師忽略。本文所倡導的字體藝術(shù)化，主要是指以圖片為載體的說明性文字的藝術(shù)設(shè)計，這類文字一般以標題文案出現(xiàn)與banner廣告共存，結(jié)構(gòu)合理、形象貼切的字體設(shè)計更加具有娛樂性和視覺沖擊力。此外，在許多國外的網(wǎng)頁設(shè)計作品中，藝術(shù)字體也被廣泛應用于首頁導航設(shè)計中，以突出界面的獨特性。

2.2.3 視聽元素的個性化設(shè)計

視聽元素是網(wǎng)頁設(shè)計區(qū)別與傳統(tǒng)平面設(shè)計的重要特征。現(xiàn)代互聯(lián)網(wǎng)技術(shù)的高度發(fā)展和寬帶接入的提高，逐漸形成了現(xiàn)在以flash視頻為主的流媒體視聽元素。首先Flash視頻的載入以動態(tài)圖片的形式體現(xiàn)可以減少用戶的等待的焦慮感，亦可以結(jié)合網(wǎng)站品牌的logo予以設(shè)計或以趣味動畫的形式體現(xiàn)增加品牌的認知感。其次flash的用戶交互區(qū)要和視頻或者網(wǎng)頁的整體色調(diào)相匹配。Flash的彈幕元素也是設(shè)計師關(guān)注的重點。彈幕不能影響視頻觀看是設(shè)計彈幕出現(xiàn)方式的首要考慮，彈幕一般有防擋字幕和合并重復彈幕的選項。彈幕的顏色也可以設(shè)計成多彩彈幕和動態(tài)圖彈幕，帶給彈幕參與者更多樂趣。

2.3 版面構(gòu)成的合理創(chuàng)意性

網(wǎng)頁的版式設(shè)計主要包括用戶界面和設(shè)計風格，體現(xiàn)了網(wǎng)頁設(shè)計者對網(wǎng)頁內(nèi)容的安排，對網(wǎng)頁內(nèi)容的理解。首先，一般網(wǎng)頁為了吸引讀者的注意，會將重要內(nèi)容放在顯著的位置，如版面的中部或上方，而底部和兩側(cè)放置次要的內(nèi)容。此外，為了整體版式的美觀與邏輯嚴謹性，會以欄目形式將相同內(nèi)容放置于同一區(qū)域，重點內(nèi)容會以色彩區(qū)分。其次，內(nèi)容布局的均衡與統(tǒng)一、節(jié)奏與規(guī)律、調(diào)和與對比性也是設(shè)計者進行網(wǎng)頁設(shè)計時所因考慮的。最后，雖然版面構(gòu)成的法則具有統(tǒng)一概括性，但在實際網(wǎng)頁設(shè)計時應根據(jù)網(wǎng)頁呈現(xiàn)內(nèi)容多少及類別進行靈活應用。比如：

1）門戶網(wǎng)站大多選用國字型版面，國字型網(wǎng)站可以把網(wǎng)站劃分多個區(qū)域，對內(nèi)容復雜，新聞種類繁多的門戶網(wǎng)站來說是很好的選擇，而且國字型版面排列整齊可以彰顯網(wǎng)站的大氣形象。

2）導航網(wǎng)站和門戶網(wǎng)站同樣內(nèi)容復雜，但導航網(wǎng)站相比門戶網(wǎng)站用戶粘性較低，GA（用戶平均停留時間）明顯低于門戶網(wǎng)站。鑒于此導航選用布局更為簡單的口字型版面效果更為理想。

3）興趣愛好類網(wǎng)站的版式選擇比較靈活，現(xiàn)在流行的瀑布流式布局是不錯的選擇，瀑布流沒有呆板的格局劃分，不會限制網(wǎng)頁展示長度和各模塊的展示內(nèi)容，用戶長時間瀏覽也不會感到疲倦，大大增強網(wǎng)站的用戶粘性。

4）電商網(wǎng)站是現(xiàn)代網(wǎng)頁版面進化的綜合體現(xiàn)，現(xiàn)代網(wǎng)頁為滿足實際需要不再拘泥于原始式版面設(shè)計框架，有自己的改進特色。為滿足商品種類繁多以及優(yōu)化用戶操作體驗，有些電商網(wǎng)站會把原來是banner導航欄放到側(cè)邊，給予自種類足夠的展示空間也免去用戶手動Hover觸發(fā)子類別的煩惱。

3 結(jié)論

約瑟夫·魯曾說過：“一切精美的東西都有其深沉的內(nèi)涵?！本W(wǎng)頁作為網(wǎng)絡(luò)信息表現(xiàn)和思想傳播交流的主要形式，不應只是“技”的探討，“藝”的形式美感也是每一位從事網(wǎng)頁設(shè)計工作者需要認真思考的課題。本文提出的加強網(wǎng)頁設(shè)計視覺藝術(shù)性方法，是考慮網(wǎng)絡(luò)載體與傳統(tǒng)紙媒載體不同之處的基礎(chǔ)上，從網(wǎng)頁界面設(shè)計形式美感的根源出發(fā)，借鑒傳統(tǒng)藝術(shù)設(shè)計的美學應用技巧，解決網(wǎng)頁設(shè)計者迷茫而又容易忽略的界面形式美感問題。

參考文獻

[1]宋春暉，網(wǎng)頁設(shè)計中的美學應用分析[J].海南師范學院學報（自然科學版），2005，18（1）：46-49.

[2]黃海燕.網(wǎng)頁設(shè)計與平面設(shè)計[J].包裝工程，2004，25（1）：126-127.

[3]楊旭蘭，色彩在網(wǎng)頁設(shè)計中的應用研究[D].南京：南京林業(yè)大學，2009-06-01.

[4]李多，網(wǎng)頁的視覺傳達與設(shè)計表現(xiàn)研究[D].河南：河南大學，2009-03-01.

[5]魯?shù)婪颉ぐ⒍骱Ｄ罚≧udolfArnheim）藝術(shù)與視知覺[M].四川人民出版社，1998.