王丹

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

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

中圖分類號(hào) G2 文獻(xiàn)標(biāo)識(shí)碼 A 文章編號(hào) 1674-6708（2017）193-0059-02

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

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

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

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

2.1 色彩應(yīng)用的和諧一致性

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

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

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

網(wǎng)頁(yè)設(shè)計(jì)構(gòu)成的基本元素主要有：圖形、文字、以及以新媒體為載體的視聽(tīng)元素（影視、動(dòng)畫(huà)、音樂(lè)）。基本元素的合理創(chuàng)意化設(shè)計(jì)是網(wǎng)頁(yè)與網(wǎng)頁(yè)之間相互區(qū)別以及脫穎而出的重要因素。以藝術(shù)設(shè)計(jì)觀點(diǎn)而論，設(shè)計(jì)者在進(jìn)行網(wǎng)頁(yè)界面設(shè)計(jì)時(shí)應(yīng)注意以下三點(diǎn)。

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

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

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

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

2.2.3 視聽(tīng)元素的個(gè)性化設(shè)計(jì)

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

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

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

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

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

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

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

3 結(jié)論

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

參考文獻(xiàn)

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

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

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

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

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