淺談網頁界面藝術設計

【摘要】在互聯網飛速發展的今天，網絡已成為人們生活中不可缺少的一部分，無論是在商業、工業還是政府部門中都早已普及開來，如今就連教育事業也都承載著網絡這四通八達的命脈迅速的發展起來。網站建設越來越接近于一門藝術而不僅僅是一項技術。網頁界面藝術設計，日益被網站建設者所注重。結合自身的經驗，闡述了如何制作一個完整的豐富多彩的頁面，主要從色彩、框架，布局、優化這幾個大方面對頁面設計進行描述，對網頁界面藝術設計的文字、圖形、色彩、多媒體四個要素做了具有特色的分析和歸納，最后對其藝術設計風格進行了深入的分類和闡述，這一部分的重點是對網頁界面藝術設計風格的研究。網頁作為新興媒體，有著比報刊、雜志、廣播、電視等傳統媒體更多的構成要素，如文字、圖形、聲音、圖像和動畫等。最后得出頁面設計需要時間和耐心去鉆研，才能做出好的網頁界面藝術設計這一觀點。

【關鍵詞】互聯網;網頁界面;藝術設計

【中圖號】TP3【文獻標示碼】A【文章編號】1005-1074(2008)11-0115-02

網頁界面藝術設計是伴隨著計算機互聯網絡的產生而形成的藝術設計新課題，是網頁設計者以所處時代所能獲取的技術和藝術經驗為基礎，依照設計目的和要求自覺地對網頁的構成元素進行藝術規劃的創造性思維活動，必然要成為設計藝術的重要組成部分，并隨著網絡技術的發展而發展。表面上看，它表面上看，它不過是關于網頁版式編排的技巧與方法，而實際上，它不僅是一種技能，更是藝術與技術的高度統一。?網頁設計包括風格定位、版面編排、色彩處理、瀏覽方式、鏈接功能等諸多方面，其中色彩處理有著舉足輕重的作用。色彩既是網頁作品的表述語言，又是視覺傳達的手。所以首先要了解一個問題那就是：

1制作網頁包括具體都包括哪幾部分呢?

1.1圖形、圖像處理制作網頁界面藝術設計，提到界面還有藝術，那在網頁上插入一些精美、適當的圖片是必要的，否則，不會有人去瀏覽你的頁面，因此，在設計網頁之前，就應搜集或制作一些好看、適用的圖片。提到圖形、圖像處理，大家都會想到的軟件是Photoshop這個軟件，對，這個軟件是進行圖形、圖像處理的軟件，但是，它不是專門的處理網絡圖像的軟件，Photoshop這個軟件會用到去進行一些平面的圖形圖像，我們網絡的圖形、圖像處理用的是Fireworks軟件，它可以制作出傳輸較快的gif格式的圖片，占的空間也比較小，一般大小也就是KB，而Photoshop制作出來的是jpg格式的位圖，并且是有損壓縮，象素大了圖像就清晰，但這樣的話上傳到網上會影響瀏覽速度，象素小了就會出現模糊或者馬賽克小方格，所以我們采用的是Fireworks軟件進行處理圖形、圖像。

1.2動畫制作網頁界面藝術設計，肯定也少不了動畫的加入，并且還要有藝術氣息在里面，這就要求我們的設計者要有藝術修養和對顏色的綜合把握了，在沒有FLASH軟件之前，用的是Go live這個軟件，再后來就用傳統的做法，在html中嵌入Java程序編寫的動畫，但這要求設計者要對Java語言熟悉。隨著軟件的發展，如今有了許多制作動畫的軟件，二維的、三維的等等，如現在我們用的FLASH軟件，用它制作的動畫，小巧迷人，只需作為一個.swf格式文件導出，再導入到網頁編輯器里就可以了。

1.3文本的編寫一般是采用在網頁中用html語言中的標簽編寫，也可以用網頁編輯工具的“所見即所得”功能直接寫入文字，如：Dream weaver軟件或者Front page軟件等都可以進行文本的編寫。還有一點要注意的就是，顯示文本的時候，設計者的機器上裝了很多漂亮的字體，設計的時候采用了，但是等上傳到網上以后，別人在瀏覽的時候，如果別人機器上沒有安裝字體，那就顯示不出來我們采用的漂亮樣式字體，因此，在考慮網頁界面藝術設計的基礎上，我們是把文字提前在Photoshop或Fireworks可以將字體先選擇自己喜歡的樣式，然后轉換柵格化圖片再用切片切成小塊，分別進行優化。輸出的格式可以為gif或jpeg，再導入到Dream weaver進行具體編輯，做鏈接可以用圖片特有的屬性進行熱區鏈接，這樣就完成我們想要的字體樣式效果了，就不會出現字體樣式顯示不出來的情況啦。

1.4框架的應用框架是網頁的常用形式，它可以使網頁更為清晰，可以把不同的頁面超鏈接到同一框架中，使的頁面更加緊湊。一般框架用在小說瀏覽頁面，或者介紹圖書章節的部分，或者教學網頁用到的的框架比較多。

1.5表格的應用表格是網頁中用處最廣泛的，可以布局，定位等等，它是網頁中最活躍的元素。它的應用可以使用網頁更加靈活。表格(table)是頁面中的重要元素，是頁面排版的主要手段。我們可以設定表格的寬度、高度、邊框、背景色、對齊方式等參數。很多時候，我們將表格的邊框設為0，以此來定位頁面中的元素，或者籍此確定頁面中各元素的相對位置。我們知道：瀏覽器在讀取網頁html源代碼時，是讀完整個table才將它顯示出來的。如果一個大表格中含有多個子表格，必須等大表格讀完，才能將子表格一起顯示出來。我們在訪問一些站點時，等待多時無結果，按“停止”按鈕卻一下顯示出頁面就是這個原因。因此，我們在設計頁面表格的時候，應該盡量避免將所有元素嵌套在一個表格里，而且表格嵌套層次盡量要少。在使用Dream weaver制作網頁時，會自動在每一個td內添加一個空字符。如果單元格內沒有填充其它元素，這個空字符會保留，在指定td的寬度或高度后，可以在源代碼內將其刪去。

2色彩的運用

網頁界面藝術設計離不開色彩的應用，當打開一個網站的時候，給用戶留下第一印象的既不是網站豐富的內容，也不是網站合理的布局，而是網站的色彩，尤其是在體現界面的時候，色彩對人的視覺效果非常明顯，一個網站設計的成功與否，在某種程度上取決于設計者對網頁界面設計顏色的運用和搭配。

網頁界面設計是一種審美活動，成功的設計作品一般都很藝術化。但藝術只是設計的手段，而并非設計的任務。設計的任務是要實現設計者的意圖，而并非創造美。網頁界面頁面設計的任務，是指設計者要表現的主題和要實現的功能。站點的性質不同，設計的任務也不同。從形式上，可以將站點分為以下三類：第一類是資訊類站點，像新浪、網易、搜狐等門戶網站。這類站點將為訪問者提供大量的信息，而且訪問量較大。因此需注意網頁界面設計頁面的分割、結構的合理、頁面的優化、界面的親和等問題。第二類是資訊和形象相結合的網站，像一些較大的公司、國內的高校等。這類網站在設計上要求較高，既要保證資訊類網站的上述要求，同時又要突出企業、單位的形象。第三類則是形象類網站，比如一些中小型的公司或單位。這類網站一般較小，有的則有幾頁，需要實現的功能也較為簡單，頁面設計的主要任務是突出企業形象。這類網站對設計者的美工水平要求較高。

3網頁界面的優化

在頁面設計中，網頁界面的優化是較為重要的一個環節。它的成功與否會影響頁面的瀏覽速度和頁面的適應性，影響觀者對網站的印象。

在資訊類網站中，文字是頁面中最大的構成元素，因此字體的優化顯得尤為重要。使用css樣式表指定文字的樣式是必要的，通常我們將字體指定為宋體，大小指定為12px，顏色要視背景色而定，原則上以能看清且與整個頁面搭配和諧為準。在白色的背景上，我們一般使用黑色，這樣不易產生視覺疲勞，能保證瀏覽者較長時間地瀏覽網頁。一般我們網頁默認的字體是宋體。為了體現站點的“與眾不同”和特有風格，我門可以根據需要選擇一些特別字體。例如，為了體現專業可以使用粗仿宋體，體現設計精美可以用廣告體，體現親切隨意可以用手寫體等等。當然這些都是個人看法，你可以根據實際情況，選擇更貼切的字體。目前常見的中文字體有二三十種，常見的英文字體有近百種，網絡上還有許多專用藝術字體下載，要尋找一款滿意的字體并不算困難。需要說明的是：使用非默認字體只能用圖片的形式，因為很可能瀏覽者的PC里沒有安裝你的特別字體，那么你的辛苦設計制作便將付之東流。

網頁的適應性是很重要的，在不同的系統上，不同的分辨率下，不同的瀏覽器上，我們將會看到不同的結果，因此設計時要統籌考慮。一般我們在800×600下制作網頁，最佳瀏覽效果也是在800×600分辨率下，在其它情況下只要保證基本一致，不出現較大問題即可?，F在我們設計網頁，一般要考慮800×600和1024×768兩種分辨率，因此我們的表格一般為居中的770左右的表格，表格的寬度最寬不要超過778。事實上，\"做網頁\"不是單純意義上的\"制作網頁\"，如果想讓自己制作的網頁美觀大方，就必須要考慮\"設計網頁\"的過程，一個好的作品，不通過仔細的\"設計\"就成形是絕對不可能的。

我國的網頁界面頁面設計水平總體上不及韓國，創新的頁面極少，基本都是一種風格，這也是因以前我國的寬帶水平跟不上有原因，一個漂亮的頁面，必然體積會比較龐大，網絡比較慢的話打開的速度也就可想而之，打開速度慢正是網頁的一個最大殺手，所以我國以前的頁面基本都是以框架式居多。隨著我國寬帶的普及，我們也迅速括起了一陣韓風，很多大膽創新的頁面出現，這是一個好現象，但是一味的模仿韓國也不行，我們也要有自己的特色，不能一味的拿來主義。

網頁界面頁面設計的一個基本特色便是吸引瀏覽者，一個美觀漂亮的頁面不管內容多么空洞，也會有人欣賞，反之一個內容充實但頁面簡陋卻往往不會有人去瀏覽，從這便可看出網頁界面藝術設計是多么的重要。

最后總結，網頁界面藝術設計是永遠也學不完的一門學問，因為它會跟著你的成長也變化，直到形成你的一種風格，網頁界面藝術設計需要大膽創新，需要新的思維，需要不斷的努力。

4參考文獻

1張帆，等.網頁界面設計藝術教程[M].人民郵電出版社，2002