淺談網頁設計用圖

黃英瓊

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

關鍵詞：網頁設計；圖形圖像；處理方法

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

由于圖片給人的視覺沖擊要比文字大85%，因此在視覺順序上，圖片往往能首先吸引人們的注意力，而圖片的引入也能大大美化網頁?？梢哉f，要使網頁在純文本基礎上變得更有趣味，最為簡捷省力的辦法就是使用圖片，幾乎所有的網頁都用到了圖片。善用圖片，可以生動、形象、直觀地表達網頁的主題，增強網頁的宣傳力，號召力和感染力，吸引瀏覽者的注意，引起瀏覽者的興趣。網頁能圖文并茂地向用戶提供信息，成倍地加大了它所提供的信息量。對一條信息來說，圖片對瀏覽者吸引也遠遠超過單純的文字。在網頁設計中如何使用圖形圖像，本文將從以下幾點來進行討論：

一、網頁中圖形圖像的表現形式

1.網站標志（LOGO）

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

2.背景插圖

網頁的背景插圖可以把瀏覽器變成一個真實的環境，使用圖形作為網站的背景是最能展現網站主題特色的地方，可以增加層次感，能夠強化整個網頁的結構效果，可與網頁主題圖像形成對比或共鳴，從而突出主題形象，彰顯網頁的風格。當然網站背景作為網頁設計的主要組成元素，在設計時要注重形成網站特有的氣勢，使其能有機的整合到網站的整體設計中，而不可孤立展現。

3.主圖

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

4.超級鏈接

在網頁設計中，將超級鏈接設計成圖形圖像的形式，不但能使網頁鏈接樣式變得豐富多彩，還可以使網頁更為美觀，彰顯頁面風格。在網頁中采用標志性符號，可以減弱語言的障礙。圖形化的鏈接按鈕更直觀形象，可以為單調的文字信息增添活力，可以更加明確地表現它所要進行的操作。

二、網頁設計中圖形圖像的作用

1.強化表現

在進行網頁設計時，正確地選擇圖形圖像不但可以更好的突出網站的主題，而且還可以對網站內容起到解釋說明的作用。同時，圖形圖像跟文字藝術是有區別的，它可以借助視覺上的形與色把內心的情感真實的表現出來，并通過形象的視覺效果促使瀏覽者產生更多的聯想，從而進一步深化和襯托出網站主題。因此在很多的設計中，經常會把圖片當做一種強而有力的表現元素。

2.美化頁面

在網頁設計中，如果僅有文字的排版，會讓瀏覽者感覺到單調乏味。為了提高瀏覽者的閱讀欲望，吸引他們的好奇心，在進行網頁設計的時候，必須要保證整個網頁版面設計中圖片的所占比率大約為百分之三十左右。把文字和圖片有效結合起來，可以促使網頁看起來更具美感。

3.傳達信息

圖形圖像本身就是一種信息，它參與到深層的語義之中，人們對任務回憶的時候，對圖片、文字等信息的記憶和理解是不相同的，相對來說，人們更喜歡記憶圖片信息，這是因為圖形圖像所表現的信息量非常大，它可以非常直觀地表達所要表達的內容。所以在網頁設計中使用圖形圖像可以更高效地將信息傳達給瀏覽者，從而達到設計目的。

4.提高趣味性

提高趣味性主要是在表現的形式上來增強閱讀的趣味性。尤其是當網頁存在大量文字信息的情況下插入圖片，可以起到刺激人體大腦的作用，進一步吸引瀏覽者的關注力，促使他們可以因其強烈的好奇心而繼續閱讀下去，最終達到傳播信息的本質目的。

三、網頁設計中圖形圖像使用的原則

即便是一個內容主導的網站，也需要圖形圖像來潤色，因此設計網站時，都需要尋找一些優秀圖片，良好圖片的運用能成就一個優秀的網站。人都是視覺動物，在瀏覽網頁時，對于圖像都有一種渴望，因此添加圖片非常重要。而且，一定是要合適的、相關的圖片。在網頁設計中使用圖形圖像時需要注意的基本原則有以下幾點：

1. 風格吻合

網頁設計中采用的圖形圖像在風格上要與網頁的主題內容保持氛圍、情感上的一致。筆者多年教學中看到，初學網頁設計的同學往往會犯這種錯誤，看到漂亮圖片就往自己的網頁里使用。如果所用圖的內容與網頁的主題不相符，就會干擾瀏覽者的注意力。

2. 精練簡潔

在一個網頁中如果所采用圖形圖像的數量過多，那么圖片所占的空間就會過大，這樣會影響網頁的下載速度從而影響網站的點擊率。因此網頁中采用的圖形圖像一定要做到少而精。

3. 顏色協調

顏色協調指所采用的圖形圖像與文字及整個頁面的主色調協調一致。眾多圖片的色彩應融于主色調這個整體中去，使整個網頁的色調趨向統一，不給人雜亂堆砌之感。

4.對比強烈

網頁設計中使用圖片時要牢牢記住可用性至上的原則！網頁中使用的圖片必須與整體相協調，并且與文字產生對比。干讀文字會讓瀏覽者覺得很乏味。要想產生鮮明的上下對比效果，就要學會觀察；圖片比較亮，那么文字可以使用較深的顏色，反之亦然。

5.采用質量好的圖片

一張畫面精致清晰的圖片讓瀏覽者感覺很舒服，更能表現網頁的細節，千萬不要用過于模糊的圖片。如果找不到好的質量的圖片，可有自己拍攝，實在還有困難，那么換個思路，建議采用字體設計、布局新穎、極簡主義等風格，然后不帶圖像，寧缺毋濫。

6.大圖受歡迎

圖像越大，視覺沖擊力也越大。在網頁設計中應用大圖或超大圖片，是網頁未來的設計和發展的主要方向，使用大圖可以給網站帶來強烈的視覺沖擊效果。當然為了不使圖片影響網頁的下載速度，必然要對大圖進行切片處理才行。

四、網頁設計中圖形圖像的處理方法

在網頁設計中圖形圖像的使用除了符合網站的主題，要有創新的構思和強烈的個性外。圖片的位置、面積、數量、形式、方向等直接關系到網頁的視覺傳達，在使用時應考慮圖片在整體編輯計劃中的作用，以達到和諧整齊。那么在網頁設計中怎樣處理圖片才能達到較好效果，本文將從以下幾點進行說明：

1.圖像的面積

大圖像能更好地表現細節，容易形成視覺焦點，感染力強，傳達的感情更為強烈，更容易吸引瀏覽者的注意。小圖像顯得簡潔精致，有點綴和呼應作用。大小對比強烈，給人跳躍感；大小對比減弱，則頁面穩定、安靜。圖像在網頁中占據的面積大小能直接顯示其重要程度。

在網頁設計時，應首先確定主要形象與次要形象，把重要的能吸引注意力的圖片放大，從屬的圖縮片小，形成主次分明的層次格局。

2.圖像的位置

在網頁中上下左右及對角線的四個角都是視覺的焦點，處理好圖像與這些位置的關系能使網頁表現出豐富的效果。

3.圖像的外形

在網頁設計中，通?？梢詫D片處理成不同形狀，而不同形狀的圖片給人的感覺也是不同的，如方形的穩定、嚴肅，三角形的銳利，圓形或曲線外形的柔軟、親切，退底圖及一些不規則或帶邊框圖像的活潑，都能產生強烈的裝飾感。比如：

（1）方形圖

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

（2）菱形圖

用直線邊框規范，使圖像整體表現為菱形，它讓人感覺打破常規，具有很強烈的個性和立體感。

（3）圓形圖

圓形圖是指利用曲線邊框將圖像進行規范和限制。圓形圖給人以充實、柔和、圓滿的感覺，給瀏覽者以流暢、隨意、自由的感受。

（4）三角形

圖像用直線邊框規范，使圖像在網頁呈現三角形顯示。它給瀏覽者動感，使網頁生動、靈活。

（5）退底圖

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

（6）出血圖

出血圖在網頁中表現為：圖形圖像充滿了整個版面、無邊框、有向外擴張、自由舒展的感覺。因其不受邊框限制，便于情感與動感的發揮，所以一般在需要傳達抒情或運動信息的頁面上采用出血圖。出血圖能拉近瀏覽者距離，有親近感，使情感與動感更能得到發揮。

4.圖像的虛實

在網頁設計時利用圖像的虛實對比能夠使網頁產生空間感，實的物體感覺近，虛的物體感覺遠。想讓圖像虛化很簡單，一個就是對圖像進行模糊處理，另一個則是對圖像色彩進行處理，如降低純度、采用單色效果等手法。

5.圖像的合成

在網頁設計中使用合成圖是很常用的手段。圖像合成通常是指將幾幅圖片利用圖像處理技術合成為一個圖像，合成圖傳達的信息更為豐富，更能集中地體現設計者的創意。如將不同風景、建筑、人物合成為一個圖像，采用統一的色彩和處理手法，這樣能體現出一種特有的風格。

6. 圖像的組合

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

7. 圖像的局部與特寫

在網頁設計中使用圖像時往往還要注意圖像的整體與局部特寫。局部的圖像相對與整體而言更能讓視線集中，有一種點到為止、意猶未盡的感覺。特寫就是將局部圖像加以放大，用特殊手法作重點表現。特寫能讓圖像具有獨特的藝術魅力，使瀏覽者對圖像產生瞬間的凝視，引發瀏覽者的興趣點。

五、結束語

網頁設計中圖形圖像的使用對于強化網頁的視覺效果起到非常重要的作用，只有充分了解圖形圖像在網頁中的表現形式、使用原則及其重要作用，并結合具體切實可行的處理方法，才能讓圖形圖像在網頁中發揮更好的作用，達到美觀實用的目的。

參考文獻：

[1]劉心美.網站效果圖設計.機械工業出版社，2012年4月

[2]韓廣良.Photoshop網站UI設計全程揭秘.清華大學出版社，2015年2月