探析網(wǎng)頁(yè)界面藝術(shù)設(shè)計(jì)

探析網(wǎng)頁(yè)界面藝術(shù)設(shè)計(jì)

摘要：在互聯(lián)網(wǎng)飛速發(fā)展的今天，網(wǎng)絡(luò)已成為人們生活中不可缺少的一部分,無(wú)論是在商業(yè)、工業(yè)還是政府部門(mén)中都早已普及開(kāi)來(lái)，如今就連教育事業(yè)也都承載著網(wǎng)絡(luò)這四通八達(dá)的命脈迅速的發(fā)展起來(lái)。網(wǎng)站建設(shè)越來(lái)越接近于一門(mén)藝術(shù)而不僅僅是一項(xiàng)技術(shù)。網(wǎng)頁(yè)界面藝術(shù)設(shè)計(jì)，日益被網(wǎng)站建設(shè)者所注重。結(jié)合自身的經(jīng)驗(yàn)，闡述了如何制作一個(gè)完整的豐富多彩的頁(yè)面，主要從色彩、框架，布局、優(yōu)化這幾個(gè)大方面對(duì)頁(yè)面設(shè)計(jì)進(jìn)行描述,對(duì)網(wǎng)頁(yè)界面藝術(shù)設(shè)計(jì)的文字、圖形、色彩、多媒體四個(gè)要素做了具有特色的分析和歸納，最后對(duì)其藝術(shù)設(shè)計(jì)風(fēng)格進(jìn)行了深入的分類(lèi)和闡述，這一部分的重點(diǎn)是對(duì)網(wǎng)頁(yè)界面藝術(shù)設(shè)計(jì)風(fēng)格的研究。網(wǎng)頁(yè)作為新興媒體,有著比報(bào)刊、雜志、廣播、電視等傳統(tǒng)媒體互聯(lián)網(wǎng);網(wǎng)頁(yè)界面;藝術(shù)設(shè)計(jì)

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

1制作網(wǎng)頁(yè)包括具體都包括哪幾部分呢?

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

動(dòng)畫(huà)制作網(wǎng)頁(yè)界面藝術(shù)設(shè)計(jì)，肯定也少不了動(dòng)畫(huà)的加入，并且還要有藝術(shù)氣息在里面，這就要求我們的設(shè)計(jì)者要有藝術(shù)修養(yǎng)和對(duì)顏色的綜合把握了，在沒(méi)有FLASH軟件之前，用的是Golive這個(gè)軟件，再后來(lái)就用傳統(tǒng)的做法，在html中嵌入Java程序編寫(xiě)的動(dòng)畫(huà)，但這要求設(shè)計(jì)者要對(duì)Java語(yǔ)言熟悉。隨著軟件的發(fā)展，如今有了許多制作動(dòng)畫(huà)的軟件，二維的、三維的等等，如現(xiàn)在我們用的FLASH軟件，用它制作的動(dòng)畫(huà)，小巧迷人，只需作為一個(gè).swf格式文件導(dǎo)出，再導(dǎo)入到網(wǎng)頁(yè)編輯器里就可以了。

文本的編寫(xiě)一般是采用在網(wǎng)頁(yè)中用html語(yǔ)言中的標(biāo)簽編寫(xiě),也可以用網(wǎng)頁(yè)編輯工具的“所見(jiàn)即所得”功能直接寫(xiě)入文字，如：Dreamweaver軟件或者Frontpage軟件等都可以進(jìn)行文本的編寫(xiě)。還有一點(diǎn)要注意的就是，顯示文本的時(shí)候，設(shè)計(jì)者的機(jī)器上裝了很多漂亮的字體，設(shè)計(jì)的時(shí)候采用了，但是等上傳到網(wǎng)上以后，別人在瀏覽的時(shí)候，如果別人機(jī)器上沒(méi)有安裝字體，那就顯示不出來(lái)我們采用的漂亮樣式字體，因此，在考慮網(wǎng)頁(yè)界面藝術(shù)設(shè)計(jì)的基礎(chǔ)上，我們是把文字提前在Photoshop或Fireworks可以將字體先選擇自己喜歡的樣式，然后轉(zhuǎn)換柵格化圖片再用切片切成小塊，分別進(jìn)行優(yōu)化。輸出的格式可以為gif或jpeg，再導(dǎo)入到Dreamweaver進(jìn)行具體編輯，做鏈接可以用圖片特有的屬性進(jìn)行熱區(qū)鏈接，這樣就完成我們想要的字體樣式效果了，就不會(huì)出現(xiàn)字體樣式顯示不出來(lái)的情況啦。

框架的應(yīng)用框架是網(wǎng)頁(yè)的常用形式，它可以使網(wǎng)頁(yè)更為清晰，可以把不同的頁(yè)面超鏈接到同一框架中，使的頁(yè)面更加緊湊。一般框架用在小說(shuō)瀏覽頁(yè)面，或者介紹圖書(shū)章節(jié)的部分，或者教學(xué)網(wǎng)頁(yè)用到的的框架比較多。

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

2色彩的運(yùn)用

網(wǎng)頁(yè)界面藝術(shù)設(shè)計(jì)離不開(kāi)色彩的應(yīng)用，當(dāng)打開(kāi)一個(gè)網(wǎng)站的時(shí)候，給用戶(hù)留下第一印象的既不是網(wǎng)站豐富的內(nèi)容，也不是網(wǎng)站合理的布局，而是網(wǎng)站的色彩，尤其是在體現(xiàn)界面的時(shí)候，色彩對(duì)人的視覺(jué)效果非常明顯，一個(gè)網(wǎng)站設(shè)計(jì)的成功與否，在某種程度上取決于設(shè)計(jì)者對(duì)網(wǎng)頁(yè)界面設(shè)計(jì)顏色的運(yùn)用和搭配。

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

3網(wǎng)頁(yè)界面的優(yōu)化

在頁(yè)面設(shè)計(jì)中，網(wǎng)頁(yè)界面的優(yōu)化是較為重要的一個(gè)環(huán)節(jié)。它的成功與否會(huì)影響頁(yè)面的瀏覽速度和頁(yè)面的適應(yīng)性，影響觀者對(duì)網(wǎng)站的印象。

在資訊類(lèi)網(wǎng)站中，文字是頁(yè)面中最大的構(gòu)成元素，因此字體的優(yōu)化顯得尤為重要。使用c

ss樣式表指定文字的樣式是必要的，通常我們將字體指定為宋體，大小指定為12px，顏色要視背景色而定，原則上以能看清且與整個(gè)頁(yè)面搭配和諧為準(zhǔn)。在白色的背景上，我們一般使用黑色，這樣不易產(chǎn)生視覺(jué)疲勞，能保證瀏覽者較長(zhǎng)時(shí)間地瀏覽網(wǎng)頁(yè)。一般我們網(wǎng)頁(yè)默認(rèn)的字體是宋體。為了體現(xiàn)站點(diǎn)的“與眾不同”和特有風(fēng)格，我門(mén)可以根據(jù)需要選擇一些特別字體。例如，為了體現(xiàn)專(zhuān)業(yè)可以使用粗仿宋體，體現(xiàn)設(shè)計(jì)精美可以用廣告體，體現(xiàn)親切隨意可以用手寫(xiě)體等等。當(dāng)然這些都是個(gè)人看法，你可以根據(jù)實(shí)際情況，選擇更貼切的字體。目前常見(jiàn)的中文字體有二三十種，常見(jiàn)的英文字體有近百種，網(wǎng)絡(luò)上還有許多專(zhuān)用藝術(shù)字體下載，要尋找一款滿(mǎn)意的字體并不算困難。需要說(shuō)明的是：使用非默認(rèn)字體只能用圖片的形式，因?yàn)楹芸赡転g覽者的PC里沒(méi)有安裝你的特別字體，那么你的辛苦設(shè)計(jì)制作便將付之東流。

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

我國(guó)的網(wǎng)頁(yè)界面頁(yè)面設(shè)計(jì)水平總體上不及韓國(guó)，創(chuàng)新的頁(yè)面極少，基本都是一種風(fēng)格，這也是因以前我國(guó)的寬帶水平跟不上有原因，一個(gè)漂亮的頁(yè)面，必然體積會(huì)比較龐大，網(wǎng)絡(luò)比較慢的話打開(kāi)的速度也就可想而之，打開(kāi)速度慢正是網(wǎng)頁(yè)的一個(gè)最大殺手，所以我國(guó)以前的頁(yè)面基本都是以框架式居多。隨著我國(guó)寬帶的普及，我們也迅速括起了一陣韓風(fēng)，很多大膽創(chuàng)新的頁(yè)面出現(xiàn)，這是一個(gè)好現(xiàn)象，但是一味的模仿韓國(guó)也不行，我們也要有自己的特色，不能一味的拿來(lái)主義。

網(wǎng)頁(yè)界面頁(yè)面設(shè)計(jì)的一個(gè)基本特色便是吸引瀏覽者，一個(gè)美觀漂