新時(shí)期網(wǎng)頁(yè)設(shè)計(jì)中計(jì)算機(jī)圖像處理技術(shù)的應(yīng)用

張 華, 陸 玉

(阜陽(yáng)職業(yè)技術(shù)學(xué)院，安徽 阜陽(yáng) 236031)

網(wǎng)絡(luò)信息技術(shù)發(fā)展的今天，網(wǎng)絡(luò)宣傳的受眾范圍越來(lái)越廣，藝術(shù)與網(wǎng)絡(luò)展示的有機(jī)結(jié)合是社會(huì)發(fā)展必然趨勢(shì)。因此，在進(jìn)行網(wǎng)頁(yè)設(shè)計(jì)時(shí)，可以將計(jì)算機(jī)圖像處理技術(shù)應(yīng)用在其中，這樣不僅能夠使網(wǎng)頁(yè)更具吸引力，而且網(wǎng)頁(yè)將更具美感與藝術(shù)性?；诖?，本文將重點(diǎn)介紹計(jì)算機(jī)圖像處理技術(shù)在網(wǎng)頁(yè)設(shè)計(jì)中的應(yīng)用。

1 計(jì)算機(jī)圖像處理技術(shù)

在今天的網(wǎng)頁(yè)設(shè)計(jì)中，幾乎都需要使用計(jì)算機(jī)圖像處理技術(shù)。更好地應(yīng)用計(jì)算機(jī)圖像處理技術(shù)，能保證網(wǎng)頁(yè)設(shè)計(jì)的科學(xué)性和美觀性。因此，我們需要掌握相應(yīng)的圖像處理技術(shù)與技巧，這樣才能熟練地應(yīng)用計(jì)算機(jī)圖像處理技術(shù)。計(jì)算機(jī)圖像處理技術(shù)中有許多內(nèi)容，本文將分析降噪技術(shù)，增強(qiáng)技術(shù)和壓縮技術(shù)(見(jiàn)圖1).

圖1 計(jì)算機(jī)圖像處理技術(shù)體系

1.1 去噪處理技術(shù)

在進(jìn)行圖像制作時(shí)，常常會(huì)遇見(jiàn)很多“高斯噪點(diǎn)”“量化噪點(diǎn)”現(xiàn)象。這些和輸入原信號(hào)圖像都沒(méi)有太大關(guān)聯(lián)，都是由于內(nèi)部器件影響，軟件量化處理程度有關(guān)[1]，其成像質(zhì)量影響觀賞舒適度，不能實(shí)現(xiàn)圖片價(jià)值。為此，在去噪操作時(shí)建議采用“均值濾波”“中值濾波”等方式，將圖片中的像素信號(hào)按照一定灰度值排列，將其中的中間值或者噪點(diǎn)強(qiáng)度進(jìn)行數(shù)值化分析，進(jìn)而插入一定的模糊值或者中間值，以實(shí)現(xiàn)降噪任務(wù)，其處理案例效果(見(jiàn)圖2)。

圖2 去噪處理技術(shù)

1.2 增強(qiáng)處理技術(shù)

增強(qiáng)處理技術(shù)的重點(diǎn)在于“突出重點(diǎn)，淡化瑕疵”。對(duì)于圖像處理，這部分處理技術(shù)包括圖像變換、剪切圖像、銳化和添加濾鏡等。借助相關(guān)軟件處理，可以幫助計(jì)算機(jī)圖像增強(qiáng)其特性，實(shí)現(xiàn)處理意義。就其處理技術(shù)而言，最有效的方式就是調(diào)整圖像色彩和清晰度調(diào)整等。具體操作時(shí)可借助相關(guān)偽彩色處理，讓一些傳統(tǒng)的失真的黑白圖片變成彩色。而利用邊緣銳化方式，在差分運(yùn)算和相關(guān)濾波處理過(guò)程中，能夠讓一些圖片結(jié)合位深度變得更加“尖銳”、“清晰”(見(jiàn)圖3)[2]。這種增強(qiáng)處理技術(shù)，能結(jié)合光學(xué)和視覺(jué)效應(yīng)，幫助人們將生活中平凡普通的圖片變得更加豐富多彩，因此也是一種常用的計(jì)算機(jī)圖像處理技術(shù)。

圖3 增強(qiáng)處理技術(shù)

1.3 壓縮處理技術(shù)

圖像的壓縮在計(jì)算機(jī)圖像處理技術(shù)中比較常見(jiàn)，主要用來(lái)壓縮圖像數(shù)據(jù)。通過(guò)壓縮圖像的方式，可以將圖片進(jìn)行有效傳遞，這樣可以在最大程度上將圖像的失真概率降到最低。結(jié)合其運(yùn)行效果而言，其可以將圖片進(jìn)行有損或者無(wú)損壓縮，其相關(guān)的壓縮時(shí)間和內(nèi)容也會(huì)存在很大差異[3]?，F(xiàn)在較為流行的圖片壓縮類(lèi)型有“JPEG”“MPEG”兩種。其運(yùn)算方式是借助了“圖像交換”，類(lèi)似“游程碼”，相關(guān)處理流程(見(jiàn)圖4)。

圖4 壓縮處理技術(shù)

2 計(jì)算機(jī)圖像處理技術(shù)在網(wǎng)頁(yè)設(shè)計(jì)中的作用

2.1 增強(qiáng)網(wǎng)頁(yè)美觀性

計(jì)算機(jī)圖像處理技術(shù)可以根據(jù)網(wǎng)頁(yè)設(shè)計(jì)的實(shí)際需要處理網(wǎng)頁(yè)中的圖片。例如，使用計(jì)算機(jī)圖像處理技術(shù)可以調(diào)整網(wǎng)頁(yè)中圖片的顏色，從而使網(wǎng)頁(yè)的視覺(jué)傳輸效果更好。瀏覽者在瀏覽網(wǎng)頁(yè)過(guò)程當(dāng)中，將會(huì)被美觀的圖像吸引，可不斷增加網(wǎng)頁(yè)瀏覽量。除此之外，在利用計(jì)算機(jī)圖像處理技術(shù)進(jìn)行網(wǎng)頁(yè)設(shè)計(jì)時(shí)，需要對(duì)圖像尺寸、網(wǎng)頁(yè)設(shè)置以及文字排版等進(jìn)行充分考慮，這樣保證各項(xiàng)內(nèi)容的設(shè)計(jì)能夠符合網(wǎng)頁(yè)需求，提升網(wǎng)頁(yè)美感，合理規(guī)劃網(wǎng)站結(jié)構(gòu)，以提高瀏覽量。

2.2 視覺(jué)沖擊強(qiáng)烈

在如今的互聯(lián)網(wǎng)時(shí)代當(dāng)中，人們通常情況下都會(huì)利用網(wǎng)絡(luò)獲取到相應(yīng)的數(shù)據(jù)信息或者自身想要的內(nèi)容，網(wǎng)民資源是一種重要資源，網(wǎng)民對(duì)網(wǎng)站的瀏覽、網(wǎng)頁(yè)的瀏覽以及相應(yīng)的點(diǎn)擊率等，是網(wǎng)站與網(wǎng)頁(yè)更好發(fā)展的前提保障。在信息化時(shí)代當(dāng)中，信息資源較為豐富，所以各個(gè)網(wǎng)站之間以及網(wǎng)頁(yè)之間的競(jìng)爭(zhēng)逐漸激烈，怎樣能夠吸引更多網(wǎng)民瀏覽網(wǎng)站或網(wǎng)頁(yè)是增強(qiáng)市場(chǎng)競(jìng)爭(zhēng)力的重點(diǎn)。圖像是一種最為直觀的信息表現(xiàn)方式，相較于文字而言，信息圖像更能吸引瀏覽者的眼球。因此，在網(wǎng)頁(yè)設(shè)計(jì)中，我們需要運(yùn)用計(jì)算機(jī)圖像處理技術(shù)科學(xué)合理地設(shè)置圖像，將其調(diào)整到合適的大小，使其顏色更加鮮明。許多網(wǎng)站或網(wǎng)頁(yè)在設(shè)計(jì)過(guò)程當(dāng)中，通過(guò)色彩調(diào)整等方式不斷提升其視覺(jué)沖擊感，為網(wǎng)民帶來(lái)更好的閱讀體驗(yàn)，從而實(shí)現(xiàn)網(wǎng)站與網(wǎng)頁(yè)的更好發(fā)展。

3 網(wǎng)頁(yè)設(shè)計(jì)中計(jì)算機(jī)圖像處理技術(shù)的應(yīng)用

3.1 在網(wǎng)頁(yè)風(fēng)格形象上的應(yīng)用

在網(wǎng)頁(yè)設(shè)計(jì)當(dāng)中，針對(duì)其中大量的圖像都需要進(jìn)行相應(yīng)的處理，對(duì)圖像的處理工作都需要利用計(jì)算機(jī)圖像處理技術(shù)，對(duì)網(wǎng)頁(yè)進(jìn)行風(fēng)格的統(tǒng)一化和主題的明確處理，以最大程度上保證網(wǎng)頁(yè)設(shè)計(jì)的科學(xué)性、合理性以及美觀性等。

網(wǎng)頁(yè)作為網(wǎng)絡(luò)信息的傳達(dá)者和“門(mén)戶”，網(wǎng)頁(yè)的整體風(fēng)格是網(wǎng)站信息資源代表與典型，能夠體現(xiàn)出網(wǎng)站的文化特點(diǎn)[4]。所以，在進(jìn)行網(wǎng)站風(fēng)格設(shè)計(jì)時(shí)候，相關(guān)設(shè)計(jì)人員可以借助計(jì)算機(jī)處理技術(shù)原理，針對(duì)網(wǎng)絡(luò)圖片的圖文信息“修圖”處理。同時(shí)網(wǎng)頁(yè)的結(jié)構(gòu)和排版也需要自己斟酌，需要發(fā)散思維讓其傳遞的信息簡(jiǎn)略，清晰，移動(dòng)。在網(wǎng)頁(yè)風(fēng)格建設(shè)上，要明確瀏覽者的風(fēng)格和信息接受能力，如針對(duì)受眾群眾設(shè)計(jì)漫畫(huà)風(fēng)格網(wǎng)頁(yè)，就可以借助于一些動(dòng)漫人物圖片的拼接；如針對(duì)中國(guó)風(fēng)就需要注重內(nèi)部構(gòu)圖和色彩搭配，選擇一些具有水墨，山水特征的畫(huà)面進(jìn)行“摳圖”“拼接”[5]。

在這方面，“攜程網(wǎng)”就做的比較好。在色系上，網(wǎng)站的底色是淡藍(lán)色，網(wǎng)站字體的顏色也主要是黑、藍(lán)、黃這三種顏色，整個(gè)網(wǎng)頁(yè)的整體風(fēng)格給人的感覺(jué)是很清新，又不單調(diào)，符合人們的旅游預(yù)期，也體現(xiàn)網(wǎng)站的文化特點(diǎn)。在網(wǎng)頁(yè)的排版、框架方面，攜程頁(yè)面主要分三大區(qū)塊，上面主要是導(dǎo)航欄，下面是廣告、鏈接等區(qū)域，而中間是整個(gè)網(wǎng)站的主體部分。中間主要是三大列，分區(qū)清楚，信息簡(jiǎn)略、清晰、層次淺顯易懂。另外，攜程網(wǎng)頁(yè)運(yùn)用了一些含F(xiàn)lash、Java、script等特效。整個(gè)網(wǎng)站的風(fēng)格與主題搭配的比較得當(dāng)，網(wǎng)頁(yè)風(fēng)格讓人耳目一新。

3.2 在創(chuàng)造LOGO上的應(yīng)用

矢量設(shè)計(jì)也是網(wǎng)頁(yè)設(shè)計(jì)的重要部分，一個(gè)簡(jiǎn)單且生動(dòng)的LOGO，能夠?yàn)g覽人員迅速記住和網(wǎng)頁(yè)相關(guān)的信息。比如，圓形的圖形可以給人溫暖的感覺(jué)，而不規(guī)則的圖形能夠給人動(dòng)態(tài)的感覺(jué)。當(dāng)瀏覽者看到正方形或者矩形時(shí)，將會(huì)感覺(jué)的束縛或者中規(guī)中矩。

例如，在每一個(gè)網(wǎng)頁(yè)當(dāng)中都會(huì)有網(wǎng)站的標(biāo)識(shí)，不同網(wǎng)站的標(biāo)識(shí)都有著不同的含義，科學(xué)合理的標(biāo)識(shí)設(shè)計(jì)，可以增強(qiáng)瀏覽者的瀏覽欲望，并且可以充分展現(xiàn)出網(wǎng)站文化。比如，人們所熟知的小米手機(jī)，也就是小米科技，標(biāo)識(shí)就是簡(jiǎn)答的MI(見(jiàn)圖5)。雖然它似乎是一個(gè)簡(jiǎn)單的字母組合，但實(shí)際上是通過(guò)計(jì)算機(jī)圖像處理技術(shù)進(jìn)行認(rèn)真處理的結(jié)果。經(jīng)過(guò)計(jì)算機(jī)圖像處理技術(shù)處理后的小米標(biāo)識(shí)，會(huì)比正常的字母標(biāo)識(shí)更具美感，可以更好體現(xiàn)出小米用心的理念，這樣可以使瀏覽者更容易感受到小米的企業(yè)文化，從而在最大程度上促使瀏覽者到小米商城當(dāng)中瀏覽更多小米商品，促使瀏覽者消費(fèi)。在瀏覽過(guò)程中，瀏覽者將會(huì)逐漸增強(qiáng)對(duì)小米企業(yè)的文化認(rèn)同感與企業(yè)認(rèn)同感，最終成為小米的忠實(shí)者。為提升網(wǎng)頁(yè)的質(zhì)感與檔次，對(duì)網(wǎng)頁(yè)背景圖需要精心制作，信息與背景需要相匹配，讓瀏覽者能夠在瀏覽當(dāng)中，明確網(wǎng)頁(yè)的主題，為瀏覽者帶來(lái)更好的瀏覽體驗(yàn)。在如今的圖文時(shí)代當(dāng)中，不僅需要網(wǎng)頁(yè)當(dāng)中擁有相應(yīng)的文字信息，同樣需要一定的圖像信息，將文字與圖像進(jìn)行有機(jī)結(jié)合。在制作精良的網(wǎng)頁(yè)當(dāng)中，都會(huì)在其中添加相應(yīng)的圖像，吸引瀏覽者眼球，同時(shí)能夠不斷提升瀏覽者的信息閱讀效果[5]。通過(guò)細(xì)膩的文字讓瀏覽者明確網(wǎng)頁(yè)主題，利用制作優(yōu)良的圖像，給瀏覽者帶來(lái)強(qiáng)烈的視覺(jué)沖擊。

圖5 小米標(biāo)識(shí)

3.3 在提升網(wǎng)頁(yè)瀏覽量上的應(yīng)用

在網(wǎng)頁(yè)設(shè)計(jì)當(dāng)中會(huì)采用不同的圖像種類(lèi)，動(dòng)態(tài)圖、拍攝圖以及截屏圖等是較為常見(jiàn)的圖像類(lèi)型。在網(wǎng)頁(yè)設(shè)計(jì)當(dāng)中添加不同類(lèi)型的圖片，可以使網(wǎng)頁(yè)更具觀賞感，豐富網(wǎng)頁(yè)內(nèi)容，增加瀏覽者的視覺(jué)粘性，從當(dāng)前的幾個(gè)門(mén)戶網(wǎng)站上，例如網(wǎng)易、新浪等都可以看到這些應(yīng)用。比如，從這些網(wǎng)站中看到拍攝的短影片時(shí)，無(wú)疑帶給瀏覽者更加強(qiáng)烈的寫(xiě)實(shí)感，這樣瀏覽者在網(wǎng)頁(yè)瀏覽時(shí)將明顯感覺(jué)增強(qiáng)了自身的代入感[6]。再如，這些網(wǎng)頁(yè)中都設(shè)計(jì)了不少動(dòng)圖圖像，來(lái)對(duì)網(wǎng)頁(yè)中的某一個(gè)功能進(jìn)行解釋?zhuān)敲礊g覽者就能更好的理解網(wǎng)頁(yè)操作，提升對(duì)網(wǎng)頁(yè)的滿意度[7]。因此，計(jì)算機(jī)圖像處理技術(shù)在WEB設(shè)計(jì)中的應(yīng)用過(guò)程中，我們需要盡可能地設(shè)計(jì)不同的圖形圖像，以增強(qiáng)網(wǎng)頁(yè)的趣味性。但是也需要注意到，圖形并非越多越好，而是需要保證應(yīng)用的科學(xué)性與合理性，這樣才能在最大程度上保證網(wǎng)頁(yè)設(shè)計(jì)的美觀度，同時(shí)為瀏覽者帶來(lái)良好的體驗(yàn)(見(jiàn)圖6)。在網(wǎng)頁(yè)設(shè)計(jì)過(guò)程當(dāng)中，需要保證網(wǎng)頁(yè)的基本性能與基本作用，在此基礎(chǔ)上對(duì)網(wǎng)頁(yè)進(jìn)行設(shè)計(jì)與制作。

圖6 網(wǎng)頁(yè)設(shè)計(jì)流覽圖

3.4 在網(wǎng)頁(yè)針對(duì)性信息傳輸方面應(yīng)用

值得注意的是，借助有效的圖形處理技巧，能夠優(yōu)化網(wǎng)頁(yè)設(shè)計(jì)。在網(wǎng)頁(yè)設(shè)計(jì)中，不同的圖像大小會(huì)給訪問(wèn)者帶來(lái)不同的感受[8]。例如，黃色三角形圖像通常表示受限功能，不能繼續(xù)使用。紅色感嘆號(hào)通常情況下表示性能失效或者設(shè)備設(shè)施遭到破壞等，所以，需要對(duì)網(wǎng)頁(yè)圖像的角色與職責(zé)進(jìn)行明確，這樣才能充分發(fā)揮圖像的作用[9]。比如，針對(duì)一些公益性網(wǎng)站，其網(wǎng)頁(yè)在選擇配圖和后期修圖、圖文搭配等方面一般都會(huì)以淺色調(diào)為主，且在修圖方面切忌出現(xiàn)較多顏色而產(chǎn)生干擾信息。針對(duì)一些商業(yè)性網(wǎng)站而言，其主要是銷(xiāo)售為主，因此在圖片設(shè)計(jì)上一般都會(huì)采取“精修圖”，加強(qiáng)“撞色”設(shè)計(jì)，引發(fā)消費(fèi)者的購(gòu)買(mǎi)欲。例如，公安或者法院的網(wǎng)頁(yè)設(shè)計(jì)通常情況下是采用方向圖像，這樣可以為瀏覽者帶來(lái)莊嚴(yán)感。具體形狀需要結(jié)合網(wǎng)頁(yè)中的具體內(nèi)容進(jìn)行設(shè)計(jì)，這樣才能夠保證圖像外形設(shè)計(jì)的科學(xué)性與合理性(見(jiàn)圖7)。利用計(jì)算機(jī)圖像處理技術(shù)做好網(wǎng)頁(yè)當(dāng)中的針對(duì)性搭配，能夠?yàn)槠髽I(yè)實(shí)現(xiàn)相應(yīng)的建設(shè)目標(biāo)提供幫助。

圖7 圖形處理技巧匯總

4 結(jié) 語(yǔ)

計(jì)算機(jī)圖像處理技術(shù)可以在網(wǎng)頁(yè)設(shè)計(jì)中發(fā)揮重要作用，文章通過(guò)對(duì)計(jì)算機(jī)圖像處理技術(shù)在攜程網(wǎng)、小米的LOGO、網(wǎng)易與新浪等門(mén)戶網(wǎng)站以及相關(guān)公益與政府網(wǎng)站的應(yīng)用研究分析，確認(rèn)與證實(shí)計(jì)算機(jī)圖像處理技術(shù)在確定網(wǎng)頁(yè)設(shè)計(jì)風(fēng)格與形象、在LOGO的創(chuàng)造方面、在提升網(wǎng)頁(yè)瀏覽量方面以及在網(wǎng)頁(yè)針對(duì)性信息傳輸方面都有著重要的作用與意義，計(jì)算機(jī)圖像處理技術(shù)的應(yīng)用可以大大提高網(wǎng)頁(yè)設(shè)計(jì)的科學(xué)性、合理性以及美觀性，并且制作優(yōu)良的圖像，能給瀏覽者帶來(lái)強(qiáng)烈的視覺(jué)沖擊，以及超出期望的質(zhì)感和美感。因此，合理地應(yīng)用計(jì)算機(jī)圖像處理技術(shù)勢(shì)在必行。