網(wǎng)頁設(shè)計中圖形圖像的應(yīng)用初探

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

【關(guān)鍵詞】圖形圖像 網(wǎng)頁設(shè)計 圖形圖像技術(shù)

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

1 圖形圖像的基礎(chǔ)知識

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

2 圖形圖像元素在網(wǎng)頁設(shè)計中的需求分析

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

3 網(wǎng)頁設(shè)計中圖形圖像的功能

圖形圖像能使網(wǎng)頁內(nèi)容生動、形象、美觀，因而在網(wǎng)頁設(shè)計中起著至關(guān)重要的作用，決定著整個網(wǎng)站的風(fēng)格和模式。網(wǎng)頁設(shè)計中圖形圖像的功能主要分為視覺吸引和信息引導(dǎo)兩個方面。

3.1 視覺吸引

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

3.2 信息引導(dǎo)

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

4 計算機圖像處理技術(shù)

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

5 圖形圖像在網(wǎng)頁設(shè)計中的應(yīng)用

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

5.1 網(wǎng)站標(biāo)志

網(wǎng)站標(biāo)志具有象征、識別功能，是網(wǎng)站形象、特征、文化等的集中體現(xiàn)。一個優(yōu)秀的網(wǎng)站標(biāo)志代表著具有高認(rèn)可度及高識別度的品牌形象，比如一個企業(yè)網(wǎng)站，從中則能體現(xiàn)出企業(yè)的運營理念、企業(yè)的內(nèi)涵、企業(yè)的整體定位等，具有很強的藝術(shù)性和功能性。簡潔而不簡單的網(wǎng)站標(biāo)志，具有以小見大、以少勝多、以一當(dāng)十的特點。

5.2 背景插圖

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

5.3 關(guān)鍵圖

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

5.4 超鏈接

在圖形圖像上設(shè)置超鏈接，使得網(wǎng)頁鏈接變得豐富多彩、網(wǎng)頁更美觀，具有直觀、形象的特點?？梢詾閱握{(diào)的文字信息增添活力，也可以更加清晰的表現(xiàn)出所要進行的操作。

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

參考文獻：

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

[2]李敏虹.Dreamweaver+Flash+Photoshop網(wǎng)頁設(shè)計入門與提高[M].北京：清華大學(xué)出版社，2012.

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

作者簡介：陳艷（1979—），女，四川遂寧人，本科，四川職業(yè)技術(shù)學(xué)院，講師，主要從事計算機基礎(chǔ)、辦公自動化、網(wǎng)頁設(shè)計方面的教學(xué)。