前言：尋找寫作靈感？中文期刊網用心挑選的圖像處理技術在網頁設計中的運用，希望能為您的閱讀和創作帶來靈感，歡迎大家閱讀并分享。

摘要：互聯網技術與圖像處理技術不斷升級，用戶在眾多頁面瀏覽中逐漸加強了審美品味。雷同性過高的網頁設計理念已經無法吸引用戶，如何運用計算機圖像處理技術，優化網頁設計方案成為全新課題。文中針對計算機圖像處理技術在網頁設計中的應用方法加以探討，通過分析當代網頁設計理念和適用性需求的轉化，以及計算機圖像處理軟件在網頁設計中的應用維度，進一步明確了圖像處理技術的應用方向和方法，以便為優化網頁設計方案提供理論參考。

關鍵詞：圖像處理；網頁設計；應用路徑

圖像處理技術的發展為網頁設計帶來諸多便捷性，且隨著計算機技術類型的更新迭代，及現代網絡終端消費群體的體驗需求轉化，日新月異的設計理念與構思充斥著網頁設計。為了進一步解析計算機圖像處理軟件在網頁設計中的應用維度，文中分析了當代網頁設計理念和適用性需求的轉化方向及應用策略，以便優化設計效果，支持網頁設計方法的凝練與創新。

1當代網頁設計理念和適用性需求的轉化

1．1動態化與虛擬化

動態化的頁面設計已經尤為普遍，多數主流網站頁面以滾屏形式輸出子頁面瀏覽信息。動態化頁面相對有限的頁面空間利用率更高，同時部分網站引入AdobeFlashPlayer插件，其動態效果的瀏覽模式加強了用戶體驗度與文本信息的識別度，能夠通過靜態與動態信息的交互加強視覺效果。虛擬化的頁面信息并非完全無鏈接插件，而是在設計角度上更加趨向于自由瀏覽的設計維度。當用戶瀏覽頁面時并未設置導向性的標識，而僅以產品圖像作為主控區域。如星巴克官網（www．starbucks．com．cn）的主頁面在設計上首先虛擬化了產品信息，通過借助自然場景的虛擬再現引導用戶瀏覽商品推薦內容。這樣的虛擬化感知體驗效果更強，在高頻次的頁面瀏覽狀態下，更加契合用戶的體驗需求，因此高斯分布、模糊線條、透明光感、蒙板運用等虛擬化操作并未完全剔除頁面元素的實體化效果，反而在虛擬場景的設計中達到了更高的視覺沖擊力，是加強網頁設計效果的全新方式。

1．2流暢度與體驗度

目前計算機圖像處理軟件輸出的圖像信息主要為矢量圖和位圖。以AdobeDreamweaver為代表的網頁編輯器HTML，CSS，XML，JSP，PHP，ASP，JS等頁面制作工具，對于位圖信息的識別度更高，因此bmp，gif，png，jpg，jpeg等圖像格式的應用頻次高于矢量圖。但是其像素存儲量也在很大程度上限制了圖像打開速度，當流量較低時，用戶也不傾向于位圖視覺需求。尤其在AutoCAD和CorelDRAW以及Illustrator等軟件類型逐步補充了多種矢量圖設計方案后，其圖像信息的完整度更加適合制作LOGO或VI，企業形象在頁面表達上更加清晰，且文件儲存量低于位圖，因此，基于頁面流量的流暢度需求而言，矢量圖的占比反而更高。但是從設計需求上分析，矢量圖主要為平面圖形結構的設計，雖然文字、標志、線條等流暢度更高，但是無法以像素單位描述真實感更強的圖像信息。諸如以商品銷售信息為主的網站頁面、以新聞素材為主導的頁面信息，更加傾向于位圖像素的表現形式，因此，基于用戶體驗度的需求，矢量圖無法真實反射出更為全面的視覺信息，因此，仍然無法取締位圖設計的體驗功能。由此可見，當前網頁設計的需求不僅趨向于流暢度的實用性，更加需要以體驗度更強的內容吸引用戶。

1．3感官性與適應性

雖然感官體驗需求尤為重要，但是網頁瀏覽狀態的整體適應性也必須充分考量。尤其在智能終端用戶比例逐年遞增的情況下，手機網頁模板、WAP站模板HTML5頁面模板源碼的使用頻次更高。從PC終端和移動終端的頁面設計效果分析，其中的像素質量、文字大小、插圖元素等一系列設計重點，都需要重新調整之后才能達到預期的設計效果。以GIF所代表的連續動畫效果為例，雖然AdobePhotoshopCC2017作為最新版本，在GIF輸出效果上提供了放大、縮小、傾斜、鏡像、旋轉、透視等多種功能，但在使用過程中仍然僅能維持在256種顏色，并無法深度開發潤色效果。不過，畢竟GIF格式較flash格式的內存占比更低，因此更加適應智能終端的頁面設計。而反觀PC終端的網頁視覺效果需求，則仍然需要以flash的清晰度作為設計標準，提供相應的感官體驗效果。因此，感官性的需求與適應性存在必然聯系，也需要充分考量具體應用界面的輸出形式，從而加強網頁設計的普遍應用效果。

2網頁設計中的應用維度解析

2．1加強網頁信息標識度

網頁信息在瀏覽過程中是否能夠第一時間吸引用戶，并不取決于文字的精細加工，反而更加傾向于圖文并茂的視覺感受。其中最為鮮明的代表便是LOGO的標識度特征。網頁引擎雖然在很大程度上輸出了大量文本信息，引流方式存在多種模式，但用戶并無法精準記錄頁面鏈接的具體網址，反而對于標識度特征起到了強烈的記憶效果。而計算機圖像設計技術的關鍵也在于加工圖像信息時的刻畫程度和文化理念的營造力。其中多以矢量圖的LOGO設計居多，其線條清晰度更強，可無限縮放或擴充，在網頁設計的整體格局中靈活性更強。由于精心設計的LOGO營造了網站品牌形象，對于用戶記憶深刻，其文化理念的傳輸效果更加具備針對性，因此也是增強網頁信息標識度的主要方向，更是網頁設計中應用計算機圖像處理軟件的主要路徑。

2．2強化網絡瀏覽體驗度

除去LOGO設計之外，計算機圖像處理軟件主要負責頁面形象加工，特別是背景設計。其圖像信息本身也是襯托文字內容的必要工具，能夠起到烘托主題的重要作用。在節日盛典、網站活動、新產品突出等時間節點中，圖像背景的主題性特征，是增強用戶聯想度與體驗度的必要環境設計維度。通過場景轉化引發用戶對于本次活動的關注度，烘托主題氛圍，進而達到強化網絡瀏覽體驗度的最佳效果。此時，以矢量圖為代表的圖像處理技術并無法進行漸變色、虛實演化、三維場景設置或者動態圖形瀏覽，因此更多的應用了位圖設計方案。尤其多種高像素拍攝自然景物的元素補充，也是網頁風格得以突出的重要表現。其渲染效果、感染力、視覺沖擊力是主題設計必備的基礎要素，因此在強化網絡瀏覽體驗度方面更多地應用了AdobePhotoshop，3DMAX等圖像處理技術，而很少選擇CoreIDRAW等圖像處理軟件。

2．3補充關鍵信息辨識度

網頁設計由LOGO塑造了點睛之筆，由背景渲染烘托了活動主題。但是此時并未就關鍵引導圖加以優化，并無法引導用戶加強針對性產品的關注度。此時需要進一步強化關鍵信息的識別度，通過色差、明暗、立體效果、文字引導等多種設計方式，加強重點信息的識別度，從而突出網頁設計的針對性。這樣的針對性關鍵信息也可以視為個性化發展的最終結果。由于現代用戶瀏覽終端頁面的頻次日漸增加，可視化信息在諸多設計要素中融入了多元化的風格取材，用戶體驗度普遍升高，其設計要求也在逐步上升。評價網頁設計的主題突出性、風格精煉度、關鍵信息的識別度，往往成為快速吸引用戶關注的必要措施。為此，需要運用諸如PS圖像處理軟件中的多種渲染功能，或者合并諸多風格元素的像素信息，在最大程度上突出關鍵圖像的引導鏈接，才能補充關鍵信息辨識度，達到預期的設計效果，以及瀏覽引導功能。

3網頁設計的盲區與針對性策略

3．1針對視覺反差盲區采取的補充像素模式

視覺反差的盲區問題近似于審美疲勞，在瀏覽了眾多其他網頁之后，用戶的審美感知已經趨于同化，并無法被網頁設計快速吸引。類似的現象是基于視覺記憶的同化規律，此時設計元素是以如何吸引用戶關注點為重要的優化方向。在此方面主要有以下3種方式，激發關鍵圖像的視覺設計效果。（1）可以利用鋼筆工具勾勒不同的圖形結構。由差異化的形狀信息區分視覺盲區，可通過加強線條勾勒后的視覺效果對比，從輪廓顯示特征中提取突出性的設計方案。形狀輪廓的鏈接矢量蒙版可以盡量選取特征更為突出的不規則圖形結構，并采取集中化的對齊分布，從而形成差異性更高的圖像分布特征。（2）可以通過填充像素的色彩差異，突出主體風格的新穎性。當主題背景以暖色調為主時，關鍵圖像的視覺信息可以采取冷色調處理，進而通過潤色反差強調視覺信息的突出性，并優化突出色彩的引導效果。此時需要明確創建路徑的空間結構，在特定區域內建立柵格，并優化后期處理效果，使之顏色分布的沖擊性與協調性同時發揮審美特征，補充視覺反差的感知盲區。（3）可借助動態化的信息引導，或者是立體圖案的設計模式，在形狀結構上增添視覺沖擊力，從而達到預期的設計效果。此時應用PS軟件的立體成像技術雖然也能夠達到三維視覺效果，但是設計空間較為狹隘，僅能通過色澤變化和陰影形成特定的曲線立體映射，并無法針對立體圖形的多維感官視角加以延伸，因此，必要時可以借助3DMAX軟件的立體成像效果，補充其中的視覺特征。

3．2針對圖像比例盲區采取的結構調整方案

圖像比例盲區的產生，主要源于初始圖像的空間尺寸規劃存在誤區。類似設計問題，也使得網頁設計元素過于單調，并未形成更為強烈的視覺感應。雖然絕對的黃金比例并不存在，多數網頁設計由設計師的經驗導向而最終形成，但是其中的空間比例規律仍然較為明顯，尤其在移動終端用戶逐年遞增的情況下，H5頁面的視覺效果往往決定了網頁流量的真實情況。因此，在設計網頁的整體風格、主題、比例的過程中，勢必需要充分考量Web頁面和H5頁面的對比效果，并依據用戶瀏覽規律設定補充元素的結構調整方案。原則上web頁面的文本信息可以盡量擴充，而H5頁面的設計元素需要相對集中。設計中可以在PS軟件中設定網格比例分區，然后選定主要設計元素的空間比例，依據鏈接引導的重要性排序，對比空間結構的合理性。此時多種圖形結構的合并運用更為重要，方形傳遞于用戶的信息是嚴肅、正規、內容嚴謹的，適合于理性思考的新聞網站或學術研究網站的頁面設計。而圓形圖像更加傾向于柔和曲線的審美表達，其圓滿的形象特征是激發用戶喜悅心情的設計要素，更加適合于購物型網站或娛樂型網站的頁面設計。三角形的圖像元素中具有突出性、沖擊性、個性化的形象特質，是諸多個性化網頁趨之若鶩的取值范疇。但本質上三角形、方形、圓形的圖像結構比例，均需要以網站主旨內容為依托，消解圖像比例的失衡性特征之后，才能讓整體設計結構更加人性化，突出原有主題的空間感知，激發自然規律和創意靈活度，豐富網頁設計的圖像比例信息，增強頁面設計效果。

3．3針對體驗需求盲區開展的個性化創新維度

視覺創意與設計是設計藝術的一個分支，網頁瀏覽本身具有強烈的商業性目的，設計元素和風格是否契合用戶體驗需求，已經是評估設計效果的重要方向。如果利用AutoCAD增強矢量位圖的結構規劃，同時也需要利用PS的渲染功能強化色彩調和度。如果利用PS軟件的潤色效果仍然無法完成預期的形象特征，也需要利用3DMAX軟件的三維信息補充。因此，在用戶體驗要求越來越高的情況下，網頁設計軟件Dreamweaver，Mockplus，H5＋CSS3，AmazingCarousel等軟件類型無法完全滿足用戶的體驗效果，以至于造成用戶體驗盲區的網頁設計失衡。為此，也需要進一步開發并綜合運用多種圖像處理軟件功能，才能真正規避用戶體驗效果的失衡現象，著力于人性化的設計，豐富設計元素和創意感，加強動態化、流暢度、感官體驗效果及頁面效果，支持網頁設計中對于多種圖像處理技術的綜合運用，突出網頁設計特色與風格的視覺創意。

4結語

綜上所述，隨網絡頁面的推陳出新，頁面的設計構思與應用維度升級，現代用戶的體驗度需求逐步上升，因此基于圖像處理技術的應用角度，也需要隨用戶體驗方式的感官需求加以演化。從目前主流網絡頁面和手機頁面的應用頻次分析，主要的設計方案趨于動態化與虛擬化合并構建的形式，主要的設計指標為流暢度與體驗度的視覺效果，側重于感官性與適應性的發展訴求。為此，需要綜合運用計算機圖像處理技術的多種功能，使輔助網頁設計不斷優化與完善，以突出個性主題的吸引度，強化用戶感知體驗，真正發揮出圖像處理技術在網頁設計中的應用效果。

參考文獻

［1］吳明珠．網頁設計中圖像處理的最佳化分析［J］．電腦知識與技術，2017，13（5）：164－165．

［2］李有仕．淺議Photoshop中“摳圖”的方法和技巧［J］．現代職業教育，2016（17）：138．

［3］姜琴．網頁設計中計算機圖像處理技術應用解析［J］．信息與電腦（理論版），2016（03）：148＋150．

［4］陳智蓋．新時期網頁設計中計算機圖像處理技術應用分析［J］．計算機光盤軟件與應用，2014，17（15）：219－220．

［5］張麗萍．網頁設計中Photoshop與Flash的結合應用［J］．煤炭技術，2013，32（04）：158－159＋182．

作者:楊明 單位:安徽電子信息職業技術學院