網頁設計中圖形圖像的應用初探

【摘 要】圖形圖像是構成網頁設計的重要元素之一，一個只有文字的網頁會讓人覺得單調枯燥，然而全是圖形圖像也不能全面準確的傳達信息。所以圖形圖像在網頁中恰到好處的應用就顯得尤為重要，既能突出主題，也能增加網頁的藝術力與感染力。本文中我們對圖形圖像在網頁中的應用作一些簡單的分析。

【關鍵詞】圖形圖像 網頁設計 圖形圖像技術

隨著計算機和網絡的飛速發展，目前網頁設計與網站建設技術已經成為熱門，在整個網頁中，首先躍入瀏覽者眼簾的除了網頁中的色彩就是網頁中各種各樣的圖形圖像了。圖形圖像設計、動畫設計及頁面設計是網頁設計與網站建設的三大核心內容。作為核心內容之一的圖形圖像設計，比文字信息更能夠吸引瀏覽者的注意力，給我們帶來了全新的視覺盛宴。

1 圖形圖像的基礎知識

網頁中的圖片，根據其不同特點，可以分為圖形和圖像，其中圖形在平面設計領域被稱為矢量圖，圖像被稱為位圖。（1）矢量圖包括AI、CDR、EPS、和WMF等圖片文件格式，位圖包括JPG、BMP、PSD和GIF等圖片文件格式。而在Photoshop中處理的圖片則是默認以PSD格式進行保存的。（2）矢量圖的明暗和顏色層次比較簡單，多用于表現標志、商標等簡單的形象；而位圖樣式多變，色彩豐富，明暗的細節十分細膩，多用于表現人物、風景等。（3）矢量圖是以線條構成的，所以當它被放大后，不會現現邊緣變模糊的情況，因此我們可以任意縮放矢量圖的尺寸，它的清晰度也不會改變。位圖的基本單位是像素點，因此當位圖被放大后，每個像素點被放大為一個一個的色塊，在不同色塊之間顯示出鋸齒，因而看起來就比較模糊。

2 圖形圖像元素在網頁設計中的需求分析

互聯網的出現促進了網頁設計的發展，從而更多的人開始熱衷于從網頁上獲取與收集信息。網頁的基本組成元素有文字和圖形圖像，隨著網絡的不斷發展，創造了讓更多圖形圖像文件進行展示的空間，網頁內容也變得更加豐富和美觀。因此，在網頁設計中，圖形圖像元素越來越重要，這就需要讓圖形圖像在滿足大小的同時提高其清晰度。從而讓圖形圖像能更好的使用于豐富多彩的網頁中。

3 網頁設計中圖形圖像的功能

圖形圖像能使網頁內容生動、形象、美觀，因而在網頁設計中起著至關重要的作用，決定著整個網站的風格和模式。網頁設計中圖形圖像的功能主要分為視覺吸引和信息引導兩個方面。

3.1 視覺吸引

相對于其它的文字信息，圖形圖像在整個網站中更能夠吸引瀏覽者的眼球。圖形圖像的內容、大小、位置、樣式和色彩都會直接引響到整個網站的效果，進而引響到網站的瀏覽量。據調查，人們在瀏覽同類型的網站時，大約有60%的瀏覽者是由于圖形圖像的吸引而選擇繼續瀏覽。所以我們不難得出結論，在同類型的網站中，擁有生動豐富圖形圖像的網站對瀏覽者更有吸引力。

3.2 信息引導

在網頁設計中，圖形圖像還起到了引導的作用。不僅能讓瀏覽者對整個網站的信息一目了然，還能從中了解到網站設計者的設計理念。在網頁設計中，圖形圖像與文字的完美結合，既能使網站的信息導向性更加明確，也能有效的幫助瀏覽者快速、準確的搜索所需信息，從而有效的節省盲目搜索所耗費的時間。此外，清晰、簡單的流程圖的使用，也使得整個網頁更加干凈、美觀為瀏覽者搜索信息提供了很大的方便。

4 計算機圖像處理技術

根據圖形圖像元素的構成特點，最主要的還是對圖像元素的處理。計算機圖像處理技術利用計算機系統內部的軟件對圖像進行分析、加工、處理，借助多媒體和數字化原理的手段使得圖像的清晰度度有所提高，放大和處理圖像中存在瑕疵的關鍵部位等，從而滿足網頁設計中我們對圖像效果的要求。計算機圖像處理技術的核心工作即是將數字轉化為只有紅、黃、藍三種原始色彩的數字圖像，并對這些數字圖像進行分析、處理。實現對圖像的多樣化操作。未來計算機圖像處理技術將向著高清晰度、實時圖像處理及高速傳輸等方向發展。

5 圖形圖像在網頁設計中的應用

圖形圖像在傳達信息時具有真實、具體、直接和易于理解的特點，所以在網頁設計中合理的應用圖形圖像，能讓其成為視覺信息的中心，有利于重要信息的表現與傳達。圖形圖像在網頁設計中的應用主要體現在以下幾個方面。

5.1 網站標志

網站標志具有象征、識別功能，是網站形象、特征、文化等的集中體現。一個優秀的網站標志代表著具有高認可度及高識別度的品牌形象，比如一個企業網站，從中則能體現出企業的運營理念、企業的內涵、企業的整體定位等，具有很強的藝術性和功能性。簡潔而不簡單的網站標志，具有以小見大、以少勝多、以一當十的特點。

5.2 背景插圖

在網頁設計中，選擇并設計出美觀且有內涵的圖形圖像來作為背景襯托主題，既能體現出網頁的層次感，又能與網頁主題圖形圖像形成對比或共鳴，進而突出主題形象，彰顯網頁別具一格的風格，有著很強的感染力與吸引力。

5.3 關鍵圖

網頁關鍵圖指的是在網頁中能表達、突出主題圖形圖像。在一些成功的網站中，通常采用一些醒目且有個性的圖形圖像來吸引瀏覽者的眼球。一個好的關鍵圖，不像文字描述那樣的單調，也不受瀏覽者文化水平的限制，能在瞬間給人留下深刻的印象，給人更直觀、更強勁的視覺沖擊力。

5.4 超鏈接

在圖形圖像上設置超鏈接，使得網頁鏈接變得豐富多彩、網頁更美觀，具有直觀、形象的特點。可以為單調的文字信息增添活力，也可以更加清晰的表現出所要進行的操作。

在網頁設計中，合理布局及處理網頁中的圖形圖像。才能使網頁更美觀、更具有藝術性和功能性。不僅可以吸引瀏覽者，增加訪問量，還可以提高網站知名度，設計者要綜合考慮，最終設計出讓瀏覽者滿意的作品。

參考文獻：

[1]九州書源，夏幫貴，廖宵.新手學做網站（Dreamweaver+Flash+PhotoshopCS6版）[M].北京：清華大學出版社，2013.

[2]李敏虹.Dreamweaver+Flash+Photoshop網頁設計入門與提高[M].北京：清華大學出版社，2012.

基金項目：2015年度四川省教育廳一般項目（自然科學）立項編號：15ZB0356。

作者簡介：陳艷（1979—），女，四川遂寧人，本科，四川職業技術學院，講師，主要從事計算機基礎、辦公自動化、網頁設計方面的教學。