網(wǎng)頁設(shè)計與圖形圖像處理技術(shù)探析

摘要：隨著社會的飛速發(fā)展，人們對網(wǎng)頁的視覺要求越來越高。網(wǎng)頁設(shè)計的美觀度就顯得尤為重要。計算機圖形圖像處理技術(shù)可以讓網(wǎng)頁呈現(xiàn)多樣化、動態(tài)的網(wǎng)頁效果?；诖耍疚膶W(wǎng)頁設(shè)計行業(yè)的現(xiàn)狀進行簡單地分析，介紹了網(wǎng)頁設(shè)計中計算機圖形圖像處理技術(shù)方式，接著論述了圖形圖像處理技術(shù)在網(wǎng)頁設(shè)計中的重要性，最后，對圖形圖像處理技術(shù)在網(wǎng)頁設(shè)計中的具體應(yīng)用分別進行了探討。

關(guān)鍵詞：網(wǎng)頁設(shè)計；圖形圖像處理技術(shù)；視覺效果；排版技巧；應(yīng)用探析

一、引言

在互聯(lián)網(wǎng)時代，人們對網(wǎng)頁的視覺瀏覽、排版要求以及音頻動態(tài)化融合的要求越來越高。雖然網(wǎng)頁的便利性和先進性非常重要，但網(wǎng)頁的美觀度也是吸引瀏覽量的重要因素之一。目前在網(wǎng)頁設(shè)計中，運用最多且最主要的是計算機圖形圖像處理技術(shù)。這項技術(shù)在實現(xiàn)網(wǎng)頁的視覺設(shè)計美觀度方面有著重要作用。因此，在互聯(lián)網(wǎng)時代，為了使網(wǎng)頁更具感染力，就需要加強圖形圖像處理技術(shù)的應(yīng)用質(zhì)量，以確保設(shè)計出來的網(wǎng)頁能夠適應(yīng)人們?yōu)g覽的需要。

二、網(wǎng)頁設(shè)計的行業(yè)現(xiàn)狀分析

互聯(lián)網(wǎng)已經(jīng)日益滲透入人們的生活中，互聯(lián)網(wǎng)上各個網(wǎng)站內(nèi)容均豐富多彩，滿足了不同使用者的需求，不僅促進了經(jīng)濟，還為商家?guī)砹诵麄餍б?，達到了網(wǎng)站開設(shè)的目標。

作為第四媒體，隨著互聯(lián)網(wǎng)的完善和成熟，網(wǎng)頁設(shè)計也逐漸成為一個獨立的領(lǐng)域，脫離了傳統(tǒng)廣告設(shè)計的范疇。因此，在網(wǎng)頁視覺審美、網(wǎng)站功能應(yīng)用等多個領(lǐng)域，相關(guān)從業(yè)者需要不端更新自身知識體系，以實現(xiàn)網(wǎng)頁設(shè)計美觀度的新高度。

目前互聯(lián)網(wǎng)競爭激烈。與十年前只有幾百個網(wǎng)站相比，如今已經(jīng)有千千萬萬個網(wǎng)站，主題相似且雷同的情況十分常見。要想在這個競爭環(huán)境中脫穎而出，網(wǎng)站視覺設(shè)計是一項重要的法寶。當前，網(wǎng)站不僅僅是發(fā)布信息或放置廣告，它成了一個大型的信息資料庫，為瀏覽者提供舒適的視覺環(huán)境，并幫助他們快速、科學地獲取所需信息。作為新媒體的媒介主體，網(wǎng)站的設(shè)計意義與傳統(tǒng)媒體完全不同，網(wǎng)頁視覺已經(jīng)成為設(shè)計中不可或缺的一部分，它可以給瀏覽者留下概念和印象，而這些印象在眾多網(wǎng)站中起到?jīng)Q定性的作用。

三、網(wǎng)頁設(shè)計中計算機圖形圖像處理技術(shù)方式

信息時代，計算機圖形圖像處理技術(shù)能夠有效地優(yōu)化和處理網(wǎng)頁中的圖形和圖像。網(wǎng)頁設(shè)計人員可以合理運用圖像去噪技術(shù)來優(yōu)化圖片質(zhì)量，運用圖像增強技術(shù)來改善網(wǎng)頁中的圖像的顯示效果，如色彩增效技術(shù)、圖形邊緣增強技術(shù)以及銳化技術(shù)等先進處理技術(shù)。此外，網(wǎng)頁設(shè)計人員還可以利用計算機圖像壓縮技術(shù)來減少圖像數(shù)據(jù)冗余，通過合理轉(zhuǎn)換圖像格式來提升網(wǎng)頁的傳輸效率和速率，并有效避免圖像失真現(xiàn)象的發(fā)生。在網(wǎng)頁設(shè)計中，計算機圖形圖像處理技術(shù)方式主要有以下3種：

（一）對圖像進行高精度處理

計算機圖像處理技術(shù)在網(wǎng)頁設(shè)計中得到廣泛的應(yīng)用，目前計算機圖像處理技術(shù)已經(jīng)能夠?qū)D像進行模擬處理，極大地提升了工作的處理效率和質(zhì)量。只要處理設(shè)備滿足需求，技術(shù)人員就能通過計算機圖像處理技術(shù)進行二維序列大小的調(diào)整，從而來提高圖像的精致度。人們在瀏覽網(wǎng)頁時通常會首先注意到圖形和圖像。相比傳統(tǒng)的網(wǎng)頁設(shè)計，具有圖形圖像的網(wǎng)頁能夠吸引更多人駐足瀏覽。網(wǎng)頁設(shè)計師需要考慮圖形圖像的位置、大小、顏色調(diào)配和內(nèi)容等多個因素。因為這些元素會在一定程度上影響網(wǎng)頁的整體設(shè)計效果。根據(jù)大數(shù)據(jù)調(diào)查顯示，訪問量較高的網(wǎng)頁往往是通過圖形圖像給瀏覽者留下的第一印象。這個第一印象可以讓網(wǎng)頁在眾多網(wǎng)頁中脫穎而出。

（二）對圖像進行去噪處理

在對圖像進行處理的過程中，會出現(xiàn)高斯噪點、量化噪點的現(xiàn)象。因此，需要運用平常使用的濾波方法對圖像進行去噪。均值濾波、中值濾波和小波濾波對噪聲的濾除有較好的效果，運用此技術(shù)可以將圖片中的像素信號以灰度值的方式排列來完成降噪處理，從而使圖片更加的清晰，目前，這已成為圖像處理中極其重要的內(nèi)容。

（三）對圖像進行壓縮預(yù)處理

圖像壓縮前進行預(yù)處理，主要包括對原圖像顏色空間轉(zhuǎn)換、大小的調(diào)整和采樣、整理MCU單元。JPEG壓縮的對象是基于YUV顏色空間，對于其他顏色空間的圖像數(shù)據(jù)要先應(yīng)用相應(yīng)的轉(zhuǎn)換公式轉(zhuǎn)換到Y(jié)UV顏色空間。圖像壓縮處理方式即是在網(wǎng)頁設(shè)計中通過對圖像數(shù)據(jù)進行壓縮處理，從而來提高圖像信息傳遞的效率，降低圖像失真的概率。當今，主流的圖像壓縮方式主要為JPEG和MPEG。 JPEG專家組開發(fā)了兩種基本的靜止圖像壓縮算法，一種是采用以離散余弦變換（Discrete Cosine Transform， DCT）為基礎(chǔ)的有損壓縮算法，另一種是采用以預(yù)測技術(shù)為基礎(chǔ)的無損壓縮算法。使用無損壓縮算法時，其壓縮比比較低，但可保證圖像不失真。使用有損壓縮算法時，其算法實現(xiàn)較為復(fù)雜，但其壓縮比大，按25：1壓縮后還原得到的圖像與原始圖像相比較，非圖像專家難于找出它們之間的區(qū)別，因此得到了廣泛的應(yīng)用[1]。

（四）圖形圖像處理技術(shù)在網(wǎng)頁設(shè)計中的重要性

對于圖形圖像處理技術(shù)在網(wǎng)頁設(shè)計中的重要性來說，一方面能夠體現(xiàn)出來自圖形圖像的功能，另一方面是該處理技術(shù)的先進性，能夠簡化和優(yōu)化復(fù)雜的網(wǎng)頁。換句話說，圖形圖像處理技術(shù)和網(wǎng)頁設(shè)計的有機結(jié)合能夠使得網(wǎng)頁具有較好的感染力和藝術(shù)性排版[2]。圖形圖像處理技術(shù)在網(wǎng)頁設(shè)計中的重要性主要是從以下三個方面體現(xiàn)：首先，通過美化網(wǎng)頁來吸引更多的瀏覽者。對于現(xiàn)代社會的網(wǎng)頁設(shè)計而言，追求藝術(shù)美感是網(wǎng)頁設(shè)計人員的目標，不僅可以讓網(wǎng)頁更美觀，還能吸引大多數(shù)瀏覽者的興趣，使他們對該網(wǎng)頁有清晰的記憶，甚至可能推薦給朋友，實現(xiàn)良好的宣傳效果；其次，通過突出重點信息來設(shè)計網(wǎng)頁。傳統(tǒng)的網(wǎng)頁設(shè)計中，往往充斥著大量的文字信息，這會使瀏覽者目不暇接，缺乏視覺焦點，導(dǎo)致重點信息難以查找和遺漏。這種現(xiàn)象在一定程度上影響了網(wǎng)頁的整體設(shè)計效果，并且會使網(wǎng)頁失去很多瀏覽者，對該網(wǎng)頁的長期發(fā)展極其不利。然而，隨著圖形圖像處理技術(shù)的發(fā)展，大多數(shù)網(wǎng)頁設(shè)計人員會合理地插入相應(yīng)的圖形圖像，避免讓瀏覽者視覺疲勞，從而正確引導(dǎo)他們有效瀏覽網(wǎng)頁并找到重點信息?？梢钥闯?，圖形圖像在網(wǎng)頁設(shè)計中起到了很好的突出重點信息的作用。

四、圖形圖像處理技術(shù)在網(wǎng)頁設(shè)計中的具體應(yīng)用

現(xiàn)代社會背景下的圖形圖像處理技術(shù)主要是設(shè)計類別的處理軟件。這些軟件能夠方便地優(yōu)化網(wǎng)頁中的各項需要展示的元素。常見的軟件包括火狐軟件、Photoshop和Illustrator等。它們的功能主要是幫助網(wǎng)頁設(shè)計師將自己的想法轉(zhuǎn)化為精美的網(wǎng)頁圖形和圖像，同時對網(wǎng)頁編碼和信息進行深度優(yōu)化處理，從而有效地提升網(wǎng)頁的展示效果以及處理效率。

（一）網(wǎng)頁設(shè)計中的構(gòu)圖排版應(yīng)用

如果把網(wǎng)頁比喻成房子的話，網(wǎng)頁的框架結(jié)構(gòu)就好比房屋的基礎(chǔ)結(jié)構(gòu)。制定好基礎(chǔ)框架，才能有效進行頁面的風格定位，從而對頁面元素進行更全面細致地設(shè)計。隨著網(wǎng)站市場競爭愈來愈激烈，人們對網(wǎng)站的頁面排版要求也愈來愈高。對于網(wǎng)頁設(shè)計中的構(gòu)圖排版技巧的應(yīng)用來說，可以從構(gòu)圖的功能進行體現(xiàn)。換句話說，構(gòu)圖設(shè)計能夠詮釋網(wǎng)頁的主題構(gòu)造和思想。從視覺的角度觀看網(wǎng)頁，想要將各個對象的合理設(shè)置顯示出來，就需要利用構(gòu)圖排版設(shè)計來進行清晰和完整的展示[3]。在網(wǎng)頁設(shè)計的版面構(gòu)成方面，想要增強網(wǎng)頁的視覺效果，就需要將圖片合理地穿插到網(wǎng)頁內(nèi)容中，以吸引更多的瀏覽者并引起他們的興趣。但對于網(wǎng)頁中的圖形圖像本身來說，還需要將其設(shè)計為具有彈性的優(yōu)良效果。簡單來說，需要將網(wǎng)頁中的圖形圖像和其他內(nèi)容相互結(jié)合，確保它們和網(wǎng)頁其他內(nèi)容能夠和諧統(tǒng)一和相互呼應(yīng)。同時，從網(wǎng)頁設(shè)計主題的角度來看，相關(guān)設(shè)計者在設(shè)計不同的圖形圖像上會反映出其設(shè)計的認知方式。借助圖形圖像進一步增加網(wǎng)頁的瀏覽流暢度，并有效降低瀏覽網(wǎng)頁的障礙因素?？鋸垇碚f，就是即使瀏覽者不識字，也能夠通過設(shè)計者設(shè)計的圖像信息中獲取該網(wǎng)頁的重點信息內(nèi)容和內(nèi)涵。

就目前網(wǎng)頁設(shè)計中的構(gòu)圖設(shè)計來看，每個網(wǎng)頁中的構(gòu)圖設(shè)計都不同，這是每個網(wǎng)頁設(shè)計者突出展現(xiàn)自身設(shè)計特點的主要表現(xiàn)形式。舉個例子，一些網(wǎng)頁設(shè)計者會使用水平式構(gòu)圖設(shè)計方法，簡單來說就是將網(wǎng)頁中的信息元素設(shè)計為水平方向進行展示。使用這種設(shè)計方法的設(shè)計者大多都是為了表現(xiàn)自身莊嚴、穩(wěn)定的品格和審美形式、標準?，F(xiàn)代社會背景下的水平式構(gòu)圖設(shè)計多用于教育、政府等領(lǐng)域的網(wǎng)頁設(shè)計中，一方面是彰顯設(shè)計者的設(shè)計個性，另一方面是彰顯這些領(lǐng)域的形象和特征。再比如，一些網(wǎng)頁設(shè)計者會使用縱向式構(gòu)圖設(shè)計方法。這種網(wǎng)頁設(shè)計方法簡單來說就是沿著垂直方向進行布局設(shè)計網(wǎng)頁內(nèi)的元素信息。再加上這種設(shè)計方法更符合現(xiàn)代大眾的審美視覺感，而且還具有簡潔、直接、清晰等多種優(yōu)良效果。所以這種設(shè)計方法常常被廣告行業(yè)的網(wǎng)頁設(shè)計合理利用。還有一些商業(yè)網(wǎng)頁和個人主頁，如果頁面被分為三排，下三排又分為三列的話，其排版相對來說較清晰，空間運用也較得當，信息布局較合理規(guī)范。不僅美觀實用，同時還能進行很好的商業(yè)宣傳。

（二）網(wǎng)頁設(shè)計中的色彩應(yīng)用

在互聯(lián)網(wǎng)時代的網(wǎng)頁設(shè)計，色彩搭配是非常重要的。一個網(wǎng)頁中豐富、合理的色彩搭配是保證該網(wǎng)頁瀏覽量的基本要素。因此，在網(wǎng)頁設(shè)計中，相關(guān)設(shè)計者常常會應(yīng)用圖形圖像處理技術(shù)來進行色彩設(shè)計。對于網(wǎng)頁設(shè)計中的色彩來說，色彩本身就具有多樣性。如果隨意、機械地進行搭配，將導(dǎo)致網(wǎng)頁設(shè)計中的色彩無法展示出良好的效果。目前的網(wǎng)頁設(shè)計色彩搭配中，色彩搭配和圖形圖像處理技術(shù)密不可分。這項技術(shù)能夠為網(wǎng)頁的色彩搭配起到積極性的作用。因此，在進行色彩搭配時，設(shè)計者應(yīng)該合理應(yīng)用圖形圖像處理技術(shù)，并從網(wǎng)頁整體的角度出發(fā)，也可以使用某些App軟件來根據(jù)主題素材進行合理的配色。例如，根據(jù)項目中國傳統(tǒng)文化博物館網(wǎng)站這一主題，考慮瀏覽者的滿意程度、視覺清晰度和整體協(xié)調(diào)性等多個方面進行科學合理地搭配。在進行網(wǎng)頁配色選擇時，設(shè)計師可以將一些中國傳統(tǒng)藝術(shù)品素材導(dǎo)入到App軟件中，通過軟件快速識別，從而得到符合網(wǎng)站主題的主體色塊（見圖1）。

最后，設(shè)計師可以將軟件識別的組合色塊作為網(wǎng)站色調(diào)重點調(diào)整對象，調(diào)整該系列顏色的透明度、飽和度等參數(shù)，實現(xiàn)對網(wǎng)頁中原色的淺化或深化處理。在處理網(wǎng)頁設(shè)計多種色彩的對比展示時，設(shè)計者可以通過科學合理的控制和調(diào)整網(wǎng)頁色彩的明度、純度等，來增加網(wǎng)頁色彩的表現(xiàn)力和渲染力。

（三）網(wǎng)頁設(shè)計中的導(dǎo)航設(shè)計

導(dǎo)航是瀏覽者瀏覽網(wǎng)站內(nèi)容的目錄。對于瀏覽者來說，導(dǎo)航系統(tǒng)作為網(wǎng)站的核心，不僅展示了網(wǎng)站的規(guī)模和信息儲備，還幫助瀏覽者便于查閱各分類信息。

一旦信息層混亂，將影響瀏覽者閱讀網(wǎng)站的情緒，帶來不好的體驗。因此，面對復(fù)雜的信息結(jié)構(gòu)，網(wǎng)頁設(shè)計師需要設(shè)計多個層面的導(dǎo)航按鈕。

網(wǎng)站導(dǎo)航可以分為純文字導(dǎo)航、帶有圖像裝飾的導(dǎo)航和多媒體導(dǎo)航三種類型。純文字導(dǎo)航在功能上已經(jīng)達到目的，并且相比裝飾復(fù)雜的導(dǎo)航設(shè)計更簡潔。適合呈現(xiàn)于大氣畫面中的導(dǎo)航可以使用較粗的字體，而女性類網(wǎng)站可以使用纖細的字體設(shè)計，呈現(xiàn)更唯美柔和的畫面。帶有圖像裝飾的導(dǎo)航比純文字導(dǎo)航更適用于靈活生動的網(wǎng)頁。多媒體導(dǎo)航包括帶有音樂和動畫的導(dǎo)航，給瀏覽者帶來視覺和聽覺體驗。例如，導(dǎo)航一開始隱藏在頁面中，鼠標點擊某個區(qū)域后才顯現(xiàn)，或者導(dǎo)航不僅能跟隨鼠標移動，點擊后還會有不同的聲音。這種豐富的體驗給瀏覽者帶來新鮮有趣的感受，從而對該網(wǎng)站印象深刻。

導(dǎo)航的作用不僅僅是設(shè)計成新奇有趣的效果，而是為了引導(dǎo)瀏覽者更好地閱讀網(wǎng)頁而設(shè)計的。

（四）制作網(wǎng)站Logo

Logo是網(wǎng)頁的重要標志性表現(xiàn)之一，甚至可以說Logo是網(wǎng)頁的面孔，因此需要設(shè)計師合理運用圖形圖像處理技術(shù)來設(shè)計Logo，使其具有鮮明、美觀和簡潔的視覺效果，體現(xiàn)出網(wǎng)站的文化內(nèi)涵。在Logo的制作上，設(shè)計師需要體現(xiàn)極高的審美能力以及美工設(shè)計水平，將創(chuàng)新能力、審美能力發(fā)揮出來，從而展現(xiàn)出網(wǎng)站的主題。設(shè)計師可以按照以下幾個步驟進行Logo設(shè)計：首先，采用手繪的形式構(gòu)思出傳統(tǒng)圖像，這樣便于后期修改；其次，修改科學合理的配色，實現(xiàn)符合網(wǎng)站主題的良好效果；第三，設(shè)計師運用圖形圖像處理軟件諸如Illustrator，結(jié)合確定好的手繪Logo繪制出矢量圖形；第四，合理調(diào)整網(wǎng)頁默認狀態(tài)中的Logo大小、方向和深度。這樣，通過制作網(wǎng)站Logo為網(wǎng)站賦予其品牌價值和意義，讓瀏覽者對網(wǎng)站的品牌、產(chǎn)品等產(chǎn)生共鳴。

（五）凸顯網(wǎng)站風格和主題

除了在網(wǎng)頁設(shè)計中應(yīng)用圖形圖像處理技術(shù)以外，還需要對需要使用的大量圖片進行處理。簡單來說，圖形圖像處理技術(shù)在網(wǎng)頁設(shè)計中具有重要的作用，需要從三個方面進行特效處理，即網(wǎng)站的風格、需求等明確一個主題。通過主題方面展示出個性獨特的網(wǎng)頁設(shè)計效果[5]，確保網(wǎng)頁圖片在顯示時具有統(tǒng)一性。首先，可以從選取何種網(wǎng)頁構(gòu)圖方式出發(fā)，結(jié)合網(wǎng)頁設(shè)計目標所適用的應(yīng)用領(lǐng)域。例如，如果某家企業(yè)希望將企業(yè)網(wǎng)頁改造成嚴肅、莊重的設(shè)計風格，就可以選擇水平構(gòu)圖方式或者中心構(gòu)圖方式，甚至將兩者結(jié)合起來，以增加觀眾的注意力。此時需要注意的是，在色彩的搭配上需要進行合理的設(shè)計。例如，可以使用常見的白色作為網(wǎng)頁背景色，將藍色作為主要調(diào)色板，然后調(diào)整藍色的飽和度和明暗度，以實現(xiàn)網(wǎng)頁具有深遠、柔和、和諧的視覺效果。

五、結(jié)束語

綜上所述，在互聯(lián)網(wǎng)時代，圖形圖像處理技術(shù)在網(wǎng)頁設(shè)計中是不可或缺的。它的功能應(yīng)用效果使網(wǎng)頁更美觀，能夠吸引用戶的注意力。同時，它也能幫助用戶快速、準確地找到所需的信息。因此，合理運用圖形圖像處理技術(shù)是設(shè)計出成功的網(wǎng)頁所必備的。本文對此進行了具體地闡述，希望這些內(nèi)容可以為應(yīng)用計算機圖形圖像處理技術(shù)進行網(wǎng)頁設(shè)計的從業(yè)者提供一些經(jīng)驗和參考。

作者單位：徐珺 江蘇農(nóng)牧科技職業(yè)學院

參? 考? 文? 獻

[1] 朱雅. 紫外光通信圖像分系統(tǒng)研究[D]. 北京：中國科學院空間科學與應(yīng)用研究中心，2010.

[2]張良.網(wǎng)頁設(shè)計中的圖形圖像處理技巧探索[J].襄陽職業(yè)技術(shù)學院學報，2020，19（04）：87-89+96.

[3]張宏.網(wǎng)頁設(shè)計中的圖形圖像處理技巧探索[J].信息與電腦（理論版），2019，31（18）：154-156.

[4]王永紅.試論計算機網(wǎng)頁設(shè)計中圖形設(shè)計的處理運用[J].河北農(nóng)機，2019（06）：47.