網(wǎng)頁(yè)設(shè)計(jì)中平面視覺(jué)元素應(yīng)用問(wèn)題的探索與分析

曹琦

（中國(guó)國(guó)際廣播電臺(tái)，北京 100040）

網(wǎng)頁(yè)設(shè)計(jì)中平面視覺(jué)元素應(yīng)用問(wèn)題的探索與分析

曹琦

（中國(guó)國(guó)際廣播電臺(tái)，北京 100040）

本文研究的是網(wǎng)頁(yè)設(shè)計(jì)中平面視覺(jué)元素的應(yīng)用問(wèn)題。文章針對(duì)文字、圖像、色彩以及版式設(shè)計(jì)等平面視覺(jué)元素在網(wǎng)頁(yè)設(shè)計(jì)中的具體應(yīng)用問(wèn)題，分別從以上四個(gè)角度對(duì)與其相關(guān)的網(wǎng)頁(yè)設(shè)計(jì)中的一系列問(wèn)題進(jìn)行了探索與分析，希望能夠?qū)W(wǎng)頁(yè)設(shè)計(jì)創(chuàng)新能夠有所啟發(fā)。

網(wǎng)頁(yè)設(shè)計(jì)；平面視覺(jué)元素；應(yīng)用分析；文字；圖像；色彩；版式設(shè)計(jì)

隨著互聯(lián)網(wǎng)技術(shù)的普及和發(fā)展，網(wǎng)絡(luò)已經(jīng)成為了當(dāng)代社會(huì)信息傳播的重要方式和人們?nèi)粘＝涣鳒贤ǖ闹匾緩?，其已?jīng)逐步滲入了人們工作、生活的各個(gè)領(lǐng)域和各個(gè)層面。而網(wǎng)頁(yè)不僅僅是互聯(lián)網(wǎng)上信息傳遞的一個(gè)載體，也是構(gòu)成互聯(lián)網(wǎng)的基本元素。因此，隨著網(wǎng)絡(luò)的普及和發(fā)展，網(wǎng)頁(yè)設(shè)計(jì)作為一個(gè)全新的設(shè)計(jì)領(lǐng)域，已經(jīng)成為了平面設(shè)計(jì)新的發(fā)展方向之一，如何讓所設(shè)計(jì)的網(wǎng)頁(yè)更具新穎性和可讀性，以獲得最大的視覺(jué)傳達(dá)功能也成為了設(shè)計(jì)者關(guān)注的一個(gè)重點(diǎn)問(wèn)題。鑒于此，本文就從網(wǎng)頁(yè)設(shè)計(jì)的角度，針對(duì)設(shè)計(jì)過(guò)程中的文字、圖像、色彩以及版式設(shè)計(jì)等平面視覺(jué)元素的應(yīng)用問(wèn)題進(jìn)行了簡(jiǎn)要的探索與分析。

一、文字在網(wǎng)頁(yè)設(shè)計(jì)中的應(yīng)用分析

文字是一種用來(lái)記錄語(yǔ)言和事物，并進(jìn)行思想和情感交流的一種視覺(jué)文化符號(hào)。在網(wǎng)頁(yè)設(shè)計(jì)的過(guò)程中，由于文字在信息傳達(dá)方面具有比其他的視覺(jué)符號(hào)更容易辨識(shí)的明確性，因此，文字不但是網(wǎng)頁(yè)設(shè)計(jì)過(guò)程中常用的構(gòu)成元素之一，也是發(fā)揮作用最大的設(shè)計(jì)元素之一。在網(wǎng)頁(yè)設(shè)計(jì)的過(guò)程中，如何對(duì)文字進(jìn)行編排和設(shè)計(jì)，對(duì)網(wǎng)頁(yè)的整體風(fēng)格有著非常重要的影響。通常來(lái)說(shuō)，設(shè)計(jì)科學(xué)、編排合理的網(wǎng)頁(yè)文字，能夠更好的傳達(dá)所要傳達(dá)的信息，而且還能夠通過(guò)文字的設(shè)計(jì)與編排給頁(yè)面增加美感，從而在實(shí)現(xiàn)信息傳達(dá)的滿足人們的審美需求，從而大大提高網(wǎng)頁(yè)信息傳達(dá)的效果。

概況來(lái)說(shuō)，在網(wǎng)頁(yè)設(shè)計(jì)的過(guò)程中，文字的編排設(shè)計(jì)主要包括字體的選擇和編輯以及文字編排幾個(gè)方面。例如：在對(duì)文字進(jìn)行編輯時(shí)，可以選擇圖形化的藝術(shù)處理方法，這樣不但能夠通過(guò)文字來(lái)傳達(dá)語(yǔ)言本身所包含的信息，還能夠借此以視覺(jué)形象的方式來(lái)傳遞語(yǔ)言之外的信息。

而具體到文字在網(wǎng)頁(yè)設(shè)計(jì)中的實(shí)際應(yīng)用，則應(yīng)注意如下幾點(diǎn)原則：一是，匹配性原則。匹配性原則實(shí)際上指的就是在進(jìn)行網(wǎng)頁(yè)設(shè)計(jì)的過(guò)程中所選用的文字應(yīng)與文字的內(nèi)容以及網(wǎng)頁(yè)的主題相匹配。也就是說(shuō)，要根據(jù)網(wǎng)頁(yè)的主題內(nèi)容和所要傳達(dá)的信息內(nèi)容來(lái)科學(xué)的設(shè)計(jì)文字的字體、色彩以及形態(tài)和表現(xiàn)形式，以確保文字的設(shè)計(jì)與網(wǎng)頁(yè)設(shè)計(jì)的主題和整體風(fēng)格相匹配。二是，明確性原則。在網(wǎng)頁(yè)設(shè)計(jì)的過(guò)程中，文字最為主要的功能在于確保信息的有效傳遞。因此，為了實(shí)現(xiàn)這一點(diǎn)，在進(jìn)行網(wǎng)頁(yè)文字設(shè)計(jì)的過(guò)程中，應(yīng)注意優(yōu)選選用容易識(shí)別的文字，而且在進(jìn)行字體和字形的創(chuàng)意時(shí)，同時(shí)也應(yīng)注意其辨識(shí)起來(lái)的明確性。三是，易讀性原則。因受人們的閱讀習(xí)慣及視覺(jué)能力的影響，人們?cè)谧R(shí)別過(guò)粗、過(guò)細(xì)的文字形態(tài)時(shí)會(huì)較為費(fèi)力，因此，在網(wǎng)頁(yè)設(shè)計(jì)的過(guò)程中，應(yīng)注意避免這樣的情況，以確保文字的易讀性，從而讓瀏覽者閱讀起來(lái)輕松愉快。最后是，美觀性原則。進(jìn)行文字的創(chuàng)意設(shè)計(jì)目的之一，是為了提高網(wǎng)頁(yè)的美觀程度，帶給瀏覽者美的感受。因此，在進(jìn)行網(wǎng)頁(yè)文字的設(shè)計(jì)時(shí)，要始終注意文字編排的節(jié)奏感和韻律感，以及文字與網(wǎng)頁(yè)整體之間的對(duì)比與和諧，以確保文字設(shè)計(jì)的美觀性。

二、圖像在網(wǎng)頁(yè)設(shè)計(jì)中的應(yīng)用分析

在網(wǎng)頁(yè)設(shè)計(jì)的過(guò)程中，圖像相較于文字而言更加直觀、形象，而且圖像在造型和色彩等方面均具有較強(qiáng)的注目性，因此，很容易形成視覺(jué)信息的中心。而在網(wǎng)頁(yè)設(shè)計(jì)的過(guò)程中，如果說(shuō)文字所表達(dá)的信息是理性的，色彩所表達(dá)的信息是感性的，那么圖像所包含的則既有感性的形象又有理性的信息。由此可見(jiàn)，圖像在網(wǎng)頁(yè)設(shè)計(jì)的過(guò)程中，具有文字和色彩均無(wú)法取代的重要作用。

具體到網(wǎng)頁(yè)圖像來(lái)說(shuō)，一般網(wǎng)頁(yè)圖像所使用的格式為GIF格式或是JPEG格式。其在網(wǎng)頁(yè)設(shè)計(jì)編排中的應(yīng)用方式則通常有方形圖、退底圖、出血圖以及三種結(jié)合使用四種方式，其中：方形圖是網(wǎng)頁(yè)圖形最為常見(jiàn)、最為簡(jiǎn)潔的一種。在將方形圖應(yīng)用于網(wǎng)頁(yè)設(shè)計(jì)時(shí)，通常會(huì)給人以穩(wěn)重、理性和嚴(yán)謹(jǐn)?shù)母杏X(jué)，但如果過(guò)度使用，則會(huì)給人以平淡呆板的感覺(jué)，如下圖1所示，中國(guó)人民大學(xué)的網(wǎng)站就利用方形圖很好的突出了穩(wěn)重、理性、嚴(yán)謹(jǐn)?shù)奶攸c(diǎn)，而同時(shí)又利用大小不同、寬窄不同的方形圖避免了平淡呆板的問(wèn)題；其次是退底圖。退底圖相較而言圖形更為自由，也更具個(gè)性，因此很容易帶給人深刻的印象。將這樣的圖形應(yīng)用于網(wǎng)頁(yè)設(shè)計(jì)時(shí)，會(huì)讓網(wǎng)頁(yè)的整體風(fēng)格閑的輕松而活潑，但是如果應(yīng)用不合理的話，也很容易給人凌亂的感覺(jué)；再次是出血圖。出血圖指的是一邊或者幾個(gè)邊充滿頁(yè)面的圖像。出血圖具有強(qiáng)烈的向外擴(kuò)張的態(tài)勢(shì)，容易給人舒展的感覺(jué)，將其應(yīng)用于網(wǎng)頁(yè)設(shè)計(jì)時(shí)，非常有利于情感和動(dòng)感內(nèi)容的表達(dá)。

圖1 中國(guó)人民大學(xué)官網(wǎng)

三、色彩在網(wǎng)頁(yè)設(shè)計(jì)中的應(yīng)用分析

在網(wǎng)頁(yè)設(shè)計(jì)的過(guò)程中，彩色的頁(yè)面相較于單色的頁(yè)面來(lái)說(shuō)往往能夠更好的引起瀏覽者的注意和興趣，由此就可以窺見(jiàn)在網(wǎng)頁(yè)設(shè)計(jì)中色彩應(yīng)用的重要性。

俗話說(shuō)“遠(yuǎn)看顏色近看花”，這一點(diǎn)對(duì)于色彩在網(wǎng)頁(yè)設(shè)計(jì)中的應(yīng)用來(lái)說(shuō)同樣適用。在網(wǎng)頁(yè)上，網(wǎng)頁(yè)設(shè)計(jì)所采用的主色彩，往往具有先聲奪人的力量，其應(yīng)用的科學(xué)與否、設(shè)計(jì)的合理與否，會(huì)直接影響到瀏覽者的瀏覽興趣，并能夠通過(guò)色彩所帶來(lái)的視覺(jué)沖擊傳達(dá)出相應(yīng)的情緒力量。因此，在進(jìn)行網(wǎng)頁(yè)設(shè)計(jì)時(shí)，設(shè)計(jì)者一定要時(shí)刻注意思考設(shè)計(jì)用色帶給人們的感受。

具體來(lái)說(shuō)，在網(wǎng)頁(yè)設(shè)計(jì)過(guò)程中進(jìn)行網(wǎng)頁(yè)色彩的搭配與應(yīng)用時(shí)需要注意考慮的問(wèn)題非常多，而以下兩點(diǎn)則尤為關(guān)鍵：首先，在進(jìn)行色彩選擇和應(yīng)用時(shí)，應(yīng)注意不同的顏色所蘊(yùn)含的不同喻意，以盡可能的避免出現(xiàn)顏色誤用的問(wèn)題。其次，網(wǎng)頁(yè)色彩的搭配與應(yīng)用，應(yīng)根據(jù)網(wǎng)頁(yè)的性質(zhì)和主題進(jìn)行合理的選用。例如：暖色一般適用于購(gòu)物類網(wǎng)站的網(wǎng)頁(yè)設(shè)計(jì)、電子商務(wù)網(wǎng)站的網(wǎng)頁(yè)設(shè)計(jì)以及兒童類網(wǎng)站的網(wǎng)頁(yè)設(shè)計(jì)等等，暖色的合理應(yīng)用有助于突出這些網(wǎng)站商品的琳瑯滿目以及兒童網(wǎng)站的活潑、溫馨特性；而冷色則一般適用于高科技網(wǎng)站的網(wǎng)頁(yè)設(shè)計(jì)或者是學(xué)術(shù)類網(wǎng)站的網(wǎng)頁(yè)設(shè)計(jì)，能夠借此很好的突出網(wǎng)頁(yè)嚴(yán)肅、穩(wěn)重的風(fēng)格和特點(diǎn)。

四、版式設(shè)計(jì)在網(wǎng)頁(yè)設(shè)計(jì)中的應(yīng)用分析

在進(jìn)行網(wǎng)頁(yè)設(shè)計(jì)的過(guò)程中，版式設(shè)計(jì)實(shí)際上就是根據(jù)網(wǎng)頁(yè)的內(nèi)容而和主題，將網(wǎng)頁(yè)頁(yè)面上的諸多構(gòu)成要素，進(jìn)行關(guān)聯(lián)和配置，從而將網(wǎng)頁(yè)整體的設(shè)計(jì)意圖和設(shè)計(jì)風(fēng)格表現(xiàn)出來(lái)的一種方式。科學(xué)的版式設(shè)計(jì)不但能夠讓網(wǎng)頁(yè)上的文字、圖像、色彩等元素實(shí)現(xiàn)有機(jī)的結(jié)合，以提升頁(yè)面的美觀度、凸顯網(wǎng)頁(yè)的風(fēng)格特色，還能夠帶給網(wǎng)頁(yè)瀏覽者一個(gè)更為流暢的視覺(jué)體驗(yàn)。

在網(wǎng)頁(yè)設(shè)計(jì)中，版式設(shè)計(jì)的常用類型主要有骨骼型版式設(shè)計(jì)、滿版型版式設(shè)計(jì)、分割型版式設(shè)計(jì)、中軸型版式設(shè)計(jì)、曲線型版式設(shè)計(jì)、傾斜型版式設(shè)計(jì)、對(duì)稱性版式設(shè)計(jì)、焦點(diǎn)型版式設(shè)計(jì)、三角型版式設(shè)計(jì)以及自由型版式設(shè)計(jì)等十種版式設(shè)計(jì)類型，這些版式設(shè)計(jì)類型各有特色。其中骨骼型的版式設(shè)計(jì)有助于網(wǎng)頁(yè)呈現(xiàn)和諧和理性的特點(diǎn)；滿版型版式設(shè)計(jì)則有助于凸顯網(wǎng)頁(yè)舒展大方的特征；分割型版式設(shè)計(jì)的網(wǎng)頁(yè)則較為自然；中軸型版式設(shè)計(jì)的網(wǎng)頁(yè)特點(diǎn)則較為穩(wěn)定和含蓄；曲線型版式設(shè)計(jì)的網(wǎng)頁(yè)常常帶有一定的韻律感與節(jié)奏感；傾斜型的網(wǎng)頁(yè)版式設(shè)計(jì)則帶有強(qiáng)烈的不穩(wěn)定感或是動(dòng)感；焦點(diǎn)型版式設(shè)計(jì)的網(wǎng)頁(yè)則有助于凸顯強(qiáng)烈的視覺(jué)效果；三角型版式設(shè)計(jì)的網(wǎng)站則根據(jù)所采用的具體三角型有一定的不同：正三角有助于突出穩(wěn)定性、倒三角有助于突出動(dòng)感、而側(cè)三角則是穩(wěn)定與動(dòng)感兼具；最后采用自由型版式設(shè)計(jì)的網(wǎng)頁(yè)，則往往突出的是輕松活潑、輕快愉悅的特點(diǎn)。設(shè)計(jì)者在進(jìn)行網(wǎng)頁(yè)的版式設(shè)計(jì)時(shí)可以根據(jù)這些網(wǎng)頁(yè)版式設(shè)計(jì)類型的特點(diǎn)，針對(duì)設(shè)計(jì)的內(nèi)容和主題進(jìn)行合理的選擇。

[1]郭菲.網(wǎng)頁(yè)設(shè)計(jì)中的人性化設(shè)計(jì)[A].2006年中國(guó)機(jī)械工程學(xué)會(huì)年會(huì)暨中國(guó)工程院機(jī)械與運(yùn)載工程學(xué)部首屆年會(huì)論文集[C].2006.

[2]孫利,吳儉濤.利用色彩營(yíng)造網(wǎng)頁(yè)形象時(shí)需關(guān)注的幾點(diǎn)問(wèn)題[A].色彩科學(xué)應(yīng)用與發(fā)展——中國(guó)科協(xié)2005年學(xué)術(shù)年會(huì)論文集[C].2005.

[3]楊振華.網(wǎng)頁(yè)視覺(jué)設(shè)計(jì)的審美法則及其應(yīng)用[J].太原城市職業(yè)技術(shù)學(xué)院學(xué)報(bào).2007(01).

[4]孫夢(mèng)燦.從《css禪意花園》談對(duì)于藝術(shù)設(shè)計(jì)學(xué)科中的網(wǎng)頁(yè)設(shè)計(jì)的一些思考[J].包裝世界.2011(03).

J05

A

1005-5312（2014）02-0052-01