淺談網(wǎng)頁(yè)設(shè)計(jì)用圖

黃英瓊

摘要：圖形圖像是網(wǎng)頁(yè)中的一個(gè)非常重要的構(gòu)成要素，它除了承載著其自身的功能外，還扮演著網(wǎng)頁(yè)與瀏覽者之間傳遞信息的角色。本文在網(wǎng)頁(yè)設(shè)計(jì)中圖形圖像的表現(xiàn)形式、其在網(wǎng)頁(yè)設(shè)計(jì)中的作用、在網(wǎng)頁(yè)設(shè)計(jì)中的使用原則及其處理方法進(jìn)行了分析，以期能為圖片在網(wǎng)頁(yè)設(shè)計(jì)中得到更好的利用提供借鑒，設(shè)計(jì)出更精美的界面，引起瀏覽者更大的興趣。

關(guān)鍵詞：網(wǎng)頁(yè)設(shè)計(jì)；圖形圖像；處理方法

現(xiàn)今社會(huì)是一個(gè)嶄新的信息時(shí)代，而Internet作為信息社會(huì)的典型代表，它代表著一種全新的信息交流方式。Internet是由成千上萬(wàn)的網(wǎng)站組成，而每個(gè)網(wǎng)站都由諸多的網(wǎng)頁(yè)構(gòu)成，因此網(wǎng)頁(yè)是構(gòu)成Internet的基本元素。而一個(gè)網(wǎng)頁(yè)的構(gòu)成要素包括文字、圖形圖像、色彩、版式等。一個(gè)好的網(wǎng)頁(yè)以為版式為中心，圖形圖像處于不可或缺的地位，如下圖所示：

由于圖片給人的視覺(jué)沖擊要比文字大85%，因此在視覺(jué)順序上，圖片往往能首先吸引人們的注意力，而圖片的引入也能大大美化網(wǎng)頁(yè)。可以說(shuō)，要使網(wǎng)頁(yè)在純文本基礎(chǔ)上變得更有趣味，最為簡(jiǎn)捷省力的辦法就是使用圖片，幾乎所有的網(wǎng)頁(yè)都用到了圖片。善用圖片，可以生動(dòng)、形象、直觀地表達(dá)網(wǎng)頁(yè)的主題，增強(qiáng)網(wǎng)頁(yè)的宣傳力，號(hào)召力和感染力，吸引瀏覽者的注意，引起瀏覽者的興趣。網(wǎng)頁(yè)能圖文并茂地向用戶提供信息，成倍地加大了它所提供的信息量。對(duì)一條信息來(lái)說(shuō)，圖片對(duì)瀏覽者吸引也遠(yuǎn)遠(yuǎn)超過(guò)單純的文字。在網(wǎng)頁(yè)設(shè)計(jì)中如何使用圖形圖像，本文將從以下幾點(diǎn)來(lái)進(jìn)行討論：

一、網(wǎng)頁(yè)中圖形圖像的表現(xiàn)形式

1.網(wǎng)站標(biāo)志（LOGO）

網(wǎng)站標(biāo)志（LOGO）是網(wǎng)站的一部分，它具有象征和識(shí)別功能，是網(wǎng)站形象和文化的濃縮，代表著網(wǎng)站的特性。一個(gè)設(shè)計(jì)杰出的、符合網(wǎng)站理念的標(biāo)志，會(huì)增加網(wǎng)站的信賴感和權(quán)威感，在社會(huì)大眾的心目中，它就是一個(gè)網(wǎng)站的代表。網(wǎng)站開標(biāo)志（LOGO）是與其它網(wǎng)站鏈接及讓其它網(wǎng)站鏈接的標(biāo)志和門戶，而標(biāo)志（LOGO）圖形化的形式比文形式的LOGO鏈接更能吸引人們的注意。圖形標(biāo)志是一種簡(jiǎn)潔但不簡(jiǎn)單的圖形符號(hào)，具有以小見(jiàn)大、以少勝多、以一當(dāng)十的特點(diǎn)。在現(xiàn)代社會(huì)生活中，經(jīng)過(guò)精心設(shè)計(jì)而具有高度實(shí)用性和藝術(shù)性的圖形標(biāo)志，以其特有的功能和新穎別致的藝術(shù)效果，感染和影響著人們，指導(dǎo)人們的認(rèn)知和選擇。

2.背景插圖

網(wǎng)頁(yè)的背景插圖可以把瀏覽器變成一個(gè)真實(shí)的環(huán)境，使用圖形作為網(wǎng)站的背景是最能展現(xiàn)網(wǎng)站主題特色的地方，可以增加層次感，能夠強(qiáng)化整個(gè)網(wǎng)頁(yè)的結(jié)構(gòu)效果，可與網(wǎng)頁(yè)主題圖像形成對(duì)比或共鳴，從而突出主題形象，彰顯網(wǎng)頁(yè)的風(fēng)格。當(dāng)然網(wǎng)站背景作為網(wǎng)頁(yè)設(shè)計(jì)的主要組成元素，在設(shè)計(jì)時(shí)要注重形成網(wǎng)站特有的氣勢(shì)，使其能有機(jī)的整合到網(wǎng)站的整體設(shè)計(jì)中，而不可孤立展現(xiàn)。

3.主圖

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

4.超級(jí)鏈接

在網(wǎng)頁(yè)設(shè)計(jì)中，將超級(jí)鏈接設(shè)計(jì)成圖形圖像的形式，不但能使網(wǎng)頁(yè)鏈接樣式變得豐富多彩，還可以使網(wǎng)頁(yè)更為美觀，彰顯頁(yè)面風(fēng)格。在網(wǎng)頁(yè)中采用標(biāo)志性符號(hào)，可以減弱語(yǔ)言的障礙。圖形化的鏈接按鈕更直觀形象，可以為單調(diào)的文字信息增添活力，可以更加明確地表現(xiàn)它所要進(jìn)行的操作。

二、網(wǎng)頁(yè)設(shè)計(jì)中圖形圖像的作用

1.強(qiáng)化表現(xiàn)

在進(jìn)行網(wǎng)頁(yè)設(shè)計(jì)時(shí)，正確地選擇圖形圖像不但可以更好的突出網(wǎng)站的主題，而且還可以對(duì)網(wǎng)站內(nèi)容起到解釋說(shuō)明的作用。同時(shí)，圖形圖像跟文字藝術(shù)是有區(qū)別的，它可以借助視覺(jué)上的形與色把內(nèi)心的情感真實(shí)的表現(xiàn)出來(lái)，并通過(guò)形象的視覺(jué)效果促使瀏覽者產(chǎn)生更多的聯(lián)想，從而進(jìn)一步深化和襯托出網(wǎng)站主題。因此在很多的設(shè)計(jì)中，經(jīng)常會(huì)把圖片當(dāng)做一種強(qiáng)而有力的表現(xiàn)元素。

2.美化頁(yè)面

在網(wǎng)頁(yè)設(shè)計(jì)中，如果僅有文字的排版，會(huì)讓瀏覽者感覺(jué)到單調(diào)乏味。為了提高瀏覽者的閱讀欲望，吸引他們的好奇心，在進(jìn)行網(wǎng)頁(yè)設(shè)計(jì)的時(shí)候，必須要保證整個(gè)網(wǎng)頁(yè)版面設(shè)計(jì)中圖片的所占比率大約為百分之三十左右。把文字和圖片有效結(jié)合起來(lái)，可以促使網(wǎng)頁(yè)看起來(lái)更具美感。

3.傳達(dá)信息

圖形圖像本身就是一種信息，它參與到深層的語(yǔ)義之中，人們對(duì)任務(wù)回憶的時(shí)候，對(duì)圖片、文字等信息的記憶和理解是不相同的，相對(duì)來(lái)說(shuō)，人們更喜歡記憶圖片信息，這是因?yàn)閳D形圖像所表現(xiàn)的信息量非常大，它可以非常直觀地表達(dá)所要表達(dá)的內(nèi)容。所以在網(wǎng)頁(yè)設(shè)計(jì)中使用圖形圖像可以更高效地將信息傳達(dá)給瀏覽者，從而達(dá)到設(shè)計(jì)目的。

4.提高趣味性

提高趣味性主要是在表現(xiàn)的形式上來(lái)增強(qiáng)閱讀的趣味性。尤其是當(dāng)網(wǎng)頁(yè)存在大量文字信息的情況下插入圖片，可以起到刺激人體大腦的作用，進(jìn)一步吸引瀏覽者的關(guān)注力，促使他們可以因其強(qiáng)烈的好奇心而繼續(xù)閱讀下去，最終達(dá)到傳播信息的本質(zhì)目的。

三、網(wǎng)頁(yè)設(shè)計(jì)中圖形圖像使用的原則

即便是一個(gè)內(nèi)容主導(dǎo)的網(wǎng)站，也需要圖形圖像來(lái)潤(rùn)色，因此設(shè)計(jì)網(wǎng)站時(shí)，都需要尋找一些優(yōu)秀圖片，良好圖片的運(yùn)用能成就一個(gè)優(yōu)秀的網(wǎng)站。人都是視覺(jué)動(dòng)物，在瀏覽網(wǎng)頁(yè)時(shí)，對(duì)于圖像都有一種渴望，因此添加圖片非常重要。而且，一定是要合適的、相關(guān)的圖片。在網(wǎng)頁(yè)設(shè)計(jì)中使用圖形圖像時(shí)需要注意的基本原則有以下幾點(diǎn)：

1. 風(fēng)格吻合

網(wǎng)頁(yè)設(shè)計(jì)中采用的圖形圖像在風(fēng)格上要與網(wǎng)頁(yè)的主題內(nèi)容保持氛圍、情感上的一致。筆者多年教學(xué)中看到，初學(xué)網(wǎng)頁(yè)設(shè)計(jì)的同學(xué)往往會(huì)犯這種錯(cuò)誤，看到漂亮圖片就往自己的網(wǎng)頁(yè)里使用。如果所用圖的內(nèi)容與網(wǎng)頁(yè)的主題不相符，就會(huì)干擾瀏覽者的注意力。

2. 精練簡(jiǎn)潔

在一個(gè)網(wǎng)頁(yè)中如果所采用圖形圖像的數(shù)量過(guò)多，那么圖片所占的空間就會(huì)過(guò)大，這樣會(huì)影響網(wǎng)頁(yè)的下載速度從而影響網(wǎng)站的點(diǎn)擊率。因此網(wǎng)頁(yè)中采用的圖形圖像一定要做到少而精。

3. 顏色協(xié)調(diào)

顏色協(xié)調(diào)指所采用的圖形圖像與文字及整個(gè)頁(yè)面的主色調(diào)協(xié)調(diào)一致。眾多圖片的色彩應(yīng)融于主色調(diào)這個(gè)整體中去，使整個(gè)網(wǎng)頁(yè)的色調(diào)趨向統(tǒng)一，不給人雜亂堆砌之感。

4.對(duì)比強(qiáng)烈

網(wǎng)頁(yè)設(shè)計(jì)中使用圖片時(shí)要牢牢記住可用性至上的原則！網(wǎng)頁(yè)中使用的圖片必須與整體相協(xié)調(diào)，并且與文字產(chǎn)生對(duì)比。干讀文字會(huì)讓瀏覽者覺(jué)得很乏味。要想產(chǎn)生鮮明的上下對(duì)比效果，就要學(xué)會(huì)觀察；圖片比較亮，那么文字可以使用較深的顏色，反之亦然。

5.采用質(zhì)量好的圖片

一張畫面精致清晰的圖片讓瀏覽者感覺(jué)很舒服，更能表現(xiàn)網(wǎng)頁(yè)的細(xì)節(jié)，千萬(wàn)不要用過(guò)于模糊的圖片。如果找不到好的質(zhì)量的圖片，可有自己拍攝，實(shí)在還有困難，那么換個(gè)思路，建議采用字體設(shè)計(jì)、布局新穎、極簡(jiǎn)主義等風(fēng)格，然后不帶圖像，寧缺毋濫。

6.大圖受歡迎

圖像越大，視覺(jué)沖擊力也越大。在網(wǎng)頁(yè)設(shè)計(jì)中應(yīng)用大圖或超大圖片，是網(wǎng)頁(yè)未來(lái)的設(shè)計(jì)和發(fā)展的主要方向，使用大圖可以給網(wǎng)站帶來(lái)強(qiáng)烈的視覺(jué)沖擊效果。當(dāng)然為了不使圖片影響網(wǎng)頁(yè)的下載速度，必然要對(duì)大圖進(jìn)行切片處理才行。

四、網(wǎng)頁(yè)設(shè)計(jì)中圖形圖像的處理方法

在網(wǎng)頁(yè)設(shè)計(jì)中圖形圖像的使用除了符合網(wǎng)站的主題，要有創(chuàng)新的構(gòu)思和強(qiáng)烈的個(gè)性外。圖片的位置、面積、數(shù)量、形式、方向等直接關(guān)系到網(wǎng)頁(yè)的視覺(jué)傳達(dá)，在使用時(shí)應(yīng)考慮圖片在整體編輯計(jì)劃中的作用，以達(dá)到和諧整齊。那么在網(wǎng)頁(yè)設(shè)計(jì)中怎樣處理圖片才能達(dá)到較好效果，本文將從以下幾點(diǎn)進(jìn)行說(shuō)明：

1.圖像的面積

大圖像能更好地表現(xiàn)細(xì)節(jié)，容易形成視覺(jué)焦點(diǎn)，感染力強(qiáng)，傳達(dá)的感情更為強(qiáng)烈，更容易吸引瀏覽者的注意。小圖像顯得簡(jiǎn)潔精致，有點(diǎn)綴和呼應(yīng)作用。大小對(duì)比強(qiáng)烈，給人跳躍感；大小對(duì)比減弱，則頁(yè)面穩(wěn)定、安靜。圖像在網(wǎng)頁(yè)中占據(jù)的面積大小能直接顯示其重要程度。

在網(wǎng)頁(yè)設(shè)計(jì)時(shí)，應(yīng)首先確定主要形象與次要形象，把重要的能吸引注意力的圖片放大，從屬的圖縮片小，形成主次分明的層次格局。

2.圖像的位置

在網(wǎng)頁(yè)中上下左右及對(duì)角線的四個(gè)角都是視覺(jué)的焦點(diǎn)，處理好圖像與這些位置的關(guān)系能使網(wǎng)頁(yè)表現(xiàn)出豐富的效果。

3.圖像的外形

在網(wǎng)頁(yè)設(shè)計(jì)中，通常可以將圖片處理成不同形狀，而不同形狀的圖片給人的感覺(jué)也是不同的，如方形的穩(wěn)定、嚴(yán)肅，三角形的銳利，圓形或曲線外形的柔軟、親切，退底圖及一些不規(guī)則或帶邊框圖像的活潑，都能產(chǎn)生強(qiáng)烈的裝飾感。比如：

（1）方形圖

用直線邊框來(lái)規(guī)范，這是一種最常見(jiàn)形狀。方形圖使圖像內(nèi)容更突出且將主題形象與環(huán)境共融，可以完整地傳達(dá)主題思想，有利于氣氛的渲染，富有情節(jié)感、直接感和親和力，但有時(shí)也顯得平淡、呆板。

（2）菱形圖

用直線邊框規(guī)范，使圖像整體表現(xiàn)為菱形，它讓人感覺(jué)打破常規(guī)，具有很強(qiáng)烈的個(gè)性和立體感。

（3）圓形圖

圓形圖是指利用曲線邊框?qū)D像進(jìn)行規(guī)范和限制。圓形圖給人以充實(shí)、柔和、圓滿的感覺(jué)，給瀏覽者以流暢、隨意、自由的感受。

（4）三角形

圖像用直線邊框規(guī)范，使圖像在網(wǎng)頁(yè)呈現(xiàn)三角形顯示。它給瀏覽者動(dòng)感，使網(wǎng)頁(yè)生動(dòng)、靈活。

（5）退底圖

在網(wǎng)頁(yè)設(shè)計(jì)中，有時(shí)會(huì)根據(jù)設(shè)計(jì)內(nèi)容所需將圖片精選部分沿邊緣裁剪，而保留輪廓分明的圖形，這樣顯得更靈活自如。配置退底圖的頁(yè)面，可以表現(xiàn)得輕松活潑、動(dòng)態(tài)十足且富于個(gè)性，而且圖文結(jié)合自然，給人以親和感；為了避免可能造成凌亂和不整體的感覺(jué)，也可以用加線、線框、色塊或方形圖的方法，使版面取得平衡和穩(wěn)定。

（6）出血圖

出血圖在網(wǎng)頁(yè)中表現(xiàn)為：圖形圖像充滿了整個(gè)版面、無(wú)邊框、有向外擴(kuò)張、自由舒展的感覺(jué)。因其不受邊框限制，便于情感與動(dòng)感的發(fā)揮，所以一般在需要傳達(dá)抒情或運(yùn)動(dòng)信息的頁(yè)面上采用出血圖。出血圖能拉近瀏覽者距離，有親近感，使情感與動(dòng)感更能得到發(fā)揮。

4.圖像的虛實(shí)

在網(wǎng)頁(yè)設(shè)計(jì)時(shí)利用圖像的虛實(shí)對(duì)比能夠使網(wǎng)頁(yè)產(chǎn)生空間感，實(shí)的物體感覺(jué)近，虛的物體感覺(jué)遠(yuǎn)。想讓圖像虛化很簡(jiǎn)單，一個(gè)就是對(duì)圖像進(jìn)行模糊處理，另一個(gè)則是對(duì)圖像色彩進(jìn)行處理，如降低純度、采用單色效果等手法。

5.圖像的合成

在網(wǎng)頁(yè)設(shè)計(jì)中使用合成圖是很常用的手段。圖像合成通常是指將幾幅圖片利用圖像處理技術(shù)合成為一個(gè)圖像，合成圖傳達(dá)的信息更為豐富，更能集中地體現(xiàn)設(shè)計(jì)者的創(chuàng)意。如將不同風(fēng)景、建筑、人物合成為一個(gè)圖像，采用統(tǒng)一的色彩和處理手法，這樣能體現(xiàn)出一種特有的風(fēng)格。

6. 圖像的組合

在設(shè)計(jì)網(wǎng)頁(yè)時(shí)，為了能傳達(dá)更多信息，我們通常也對(duì)圖像進(jìn)行組合，即把多幅圖片以不同方式擺放，形成一個(gè)圖像組。圖像的重要程度可以因面積、擺放位置的不同而有所不同。圖像組合的方式有塊狀和散點(diǎn)兩種：塊狀組合方式有強(qiáng)烈的整體和嚴(yán)謹(jǐn)感，并富于理性和秩序美；散點(diǎn)組合方式則可以形成明快自由的感覺(jué)。

7. 圖像的局部與特寫

在網(wǎng)頁(yè)設(shè)計(jì)中使用圖像時(shí)往往還要注意圖像的整體與局部特寫。局部的圖像相對(duì)與整體而言更能讓視線集中，有一種點(diǎn)到為止、意猶未盡的感覺(jué)。特寫就是將局部圖像加以放大，用特殊手法作重點(diǎn)表現(xiàn)。特寫能讓圖像具有獨(dú)特的藝術(shù)魅力，使瀏覽者對(duì)圖像產(chǎn)生瞬間的凝視，引發(fā)瀏覽者的興趣點(diǎn)。

五、結(jié)束語(yǔ)

網(wǎng)頁(yè)設(shè)計(jì)中圖形圖像的使用對(duì)于強(qiáng)化網(wǎng)頁(yè)的視覺(jué)效果起到非常重要的作用，只有充分了解圖形圖像在網(wǎng)頁(yè)中的表現(xiàn)形式、使用原則及其重要作用，并結(jié)合具體切實(shí)可行的處理方法，才能讓圖形圖像在網(wǎng)頁(yè)中發(fā)揮更好的作用，達(dá)到美觀實(shí)用的目的。

參考文獻(xiàn)：

[1]劉心美.網(wǎng)站效果圖設(shè)計(jì).機(jī)械工業(yè)出版社，2012年4月

[2]韓廣良.Photoshop網(wǎng)站UI設(shè)計(jì)全程揭秘.清華大學(xué)出版社，2015年2月