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

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

2、雜志、廣播、電視等傳統(tǒng)媒體更多的構(gòu)成要素，如文字、圖形、聲音、圖像和動 畫等。最后得出頁面設(shè)計需要時間和耐心去鉆研，才能做出好的頁界面藝術(shù)設(shè)計 這一觀點。關(guān)鍵詞：互聯(lián)；頁界面；藝術(shù)設(shè)計頁界面藝術(shù)設(shè)計是伴隨著計算機(jī)互聯(lián)絡(luò)的產(chǎn)生而形成的藝術(shù)設(shè)計新課題， 是頁設(shè)計者以所處時代所能獲取的技術(shù)和藝術(shù)經(jīng)驗為基礎(chǔ)，依照設(shè)計目的和要求自覺地對頁的構(gòu)成元素進(jìn)行藝術(shù)規(guī)劃的創(chuàng)造性思維活動，必然要成為設(shè)計藝術(shù)的重要組成部分，并隨著絡(luò)技術(shù)的發(fā)展而發(fā)展。表面上看，它表面上看，它不過是 關(guān)于頁版式編排的技巧與方法，而實際上，它不僅是一種技能，更是藝術(shù)與技術(shù) 的高度統(tǒng)一。？頁設(shè)計包括風(fēng)格定位、版面編排、色彩處理、瀏覽方式、功

3、能等 諸多方面,其中色彩處理有著舉足輕重的作用。色彩既是頁作品的表述語言，又是 視覺傳達(dá)的手。所以首先要了解一個問題那就是：1制作頁包括具體都包括哪幾部分呢？圖形、圖像處理制作頁界面藝術(shù)設(shè)計，提到界面還有藝術(shù)，那在頁上插入 一些精美、適當(dāng)?shù)膱D片是必要的，否則，不會有人去瀏覽你的頁面，因此，在設(shè) 計頁之前，就應(yīng)搜集或制作一些好看、適用的圖片。提到圖形、圖像處理，大家 都會想到的軟件是PhotoshoP這個軟件，對，這個軟件是進(jìn)行圖形、圖像處理的 軟件，但是，它不是專門的處理絡(luò)圖像的軟件，Photoshop這個軟件會用到去進(jìn)行一些平面的圖形圖像，我們絡(luò)的圖形、圖像處理用的是Fireworks軟件，

4、它可 以制作出傳輸較快的gif格式的圖片，占的空間也比較小，一般大小也就是KB 而Photoshop制作出來的是jpg格式的位圖，并且是有損壓縮，象素大了圖像就 清晰，但這樣的話上傳到上會影響瀏覽速度， 象素小了就會出現(xiàn)模糊或者馬賽克 小方格，所以我們采用的是Fireworks軟件進(jìn)行處理圖形、圖像。動畫制作頁界面藝術(shù)設(shè)計，肯定也少不了動畫的加入，并且還要有藝術(shù)氣 息在里面，這就要求我們的設(shè)計者要有藝術(shù)修養(yǎng)和對顏色的綜合把握了，在沒有FLASH軟件之前，用的是Go live這個軟件，再后來就用傳統(tǒng)的做法，在 html 中嵌入Java程序編寫的動畫，但這要求設(shè)計者要對Java語言熟悉。隨著軟件的

5、 發(fā)展，如今有了許多制作動畫的軟件，二維的、三維的等等，如現(xiàn)在我們用的 FLASH軟件，用它制作的動畫，小巧迷人，只需作為一個.swf格式文件導(dǎo)出，再 導(dǎo)入到頁編輯器里就可以了。文本的編寫一般是采用在頁中用html語言中的標(biāo)簽編寫，也可以用頁編輯 工具的“所見即所得”功能直接寫入文字，如：Dream weaver軟件或者Front然后轉(zhuǎn)換柵格化圖page軟件等都可以進(jìn)行文本的編寫。還有一點要注意的就是，顯示文本的時候， 設(shè)計者的機(jī)器上裝了很多漂亮的字體，設(shè)計的時候采用了，但是等上傳到上以后， 別人在瀏覽的時候，如果別人機(jī)器上沒有安裝字體，那就顯示不出來我們采用的 漂亮樣式字體，因此，在考慮頁界

6、面藝術(shù)設(shè)計的基礎(chǔ)上，我們是把文字提前在 Photoshop或Fireworks可以將字體先選擇自己喜歡的樣式，片再用切片切成小塊，分別進(jìn)行優(yōu)化。輸出的格式可以為gif或jpeg，再導(dǎo)入到Dream weaver進(jìn)行具體編輯，做可以用圖片特有的屬性進(jìn)行熱區(qū)，這樣就完 成我們想要的字體樣式效果了，就不會出現(xiàn)字體樣式顯示不出來的情況啦?？蚣艿膽?yīng)用框架是頁的常用形式，它可以使頁更為清晰，可以把不同的頁 面超到同一框架中，使的頁面更加緊湊。一般框架用在小說瀏覽頁面，或者介紹 圖書章節(jié)的部分，或者教學(xué)頁用到的的框架比較多。表格的應(yīng)用表格是頁中用處最廣泛的，可以布局，定位等等，它是頁中最 活躍的元素。它的應(yīng)

7、用可以使用頁更加靈活。表格(table)是頁面中的重要元素, 是頁面排版的主要手段。我們可以設(shè)定表格的寬度、高度、邊框、背景色、對齊 方式等參數(shù)。很多時候，我們將表格的邊框設(shè)為0,以此來定位頁面中的元素，html源代或者籍此確定頁面中各元素的相對位置。我們知道：瀏覽器在讀取頁碼時，是讀完整個table才將它顯示出來的。如果一個大表格中含有多個子表格， 必須等大表格讀完，才能將子表格一起顯示出來。我們在訪問一些站點時，等待 多時無結(jié)果，按“停止”按鈕卻一下顯示出頁面就是這個原因。因此，我們在設(shè)計頁面表格的時候，應(yīng)該盡量避免將所有元素嵌套在一個表格里，而且表格嵌套層次盡量要少。在使用Dreamwe

8、aver制作頁時，會自動在每一個td內(nèi)添加一個 空字符。如果單元格內(nèi)沒有填充其它元素，這個空字符會保留，在指定td的寬度或高度后，可以在源代碼內(nèi)將其刪去。2色彩的運用頁界面藝術(shù)設(shè)計離不開色彩的應(yīng)用，當(dāng)打開一個站的時候，給用戶留下第一印象的既不是站豐富的內(nèi)容，也不是站合理的布局，而是站的色彩，尤其是在 體現(xiàn)界面的時候，色彩對人的視覺效果非常明顯，一個站設(shè)計的成功與否，在某 種程度上取決于設(shè)計者對頁界面設(shè)計顏色的運用和搭配。頁界面設(shè)計是一種審美活動，成功的設(shè)計作品一般都很藝術(shù)化。但藝術(shù)只 是設(shè)計的手段，而并非設(shè)計的任務(wù)。設(shè)計的任務(wù)是要實現(xiàn)設(shè)計者的意圖， 而并非 創(chuàng)造美。頁界面頁面設(shè)計的任務(wù)，是指設(shè)

9、計者要表現(xiàn)的主題和要實現(xiàn)的功能。 點的性質(zhì)不同，設(shè)計的任務(wù)也不同。從形式上，可以將站點分為以下三類：第一 類是資訊類站點，像新浪、易、搜狐等門戶站。這類站點將為訪問者提供大量的 信息，而且訪問量較大。因此需注意頁界面設(shè)計頁面的分割、結(jié)構(gòu)的合理、頁面 的優(yōu)化、界面的親和等問題。第二類是資訊和形象相結(jié)合的站，像一些較大的公 司、國內(nèi)的高校等。這類站在設(shè)計上要求較高，既要保證資訊類站的上述要求， 同時又要突出、單位的形象。第三類則是形象類站，比如一些中小型的公司或單 位。這類站一般較小，有的則有幾頁，需要實現(xiàn)的功能也較為簡單，頁面設(shè)計的 主要任務(wù)是突出形象。這類站對設(shè)計者的美工水平要求較高。3頁界面

10、的優(yōu)化在頁面設(shè)計中，頁界面的優(yōu)化是較為重要的一個環(huán)節(jié)。它的成功與否會影 響頁面的瀏覽速度和頁面的適應(yīng)性，影響觀者對站的印象。在資訊類站中，文字是頁面中最大的構(gòu)成元素，因此字體的優(yōu)化顯得尤為SS樣式表指定文字的樣式是必要的，通常我們將字體指定為宋體，大小指定為 12px，顏色要視背景色而定，原則上以能看清且與整個頁面搭配和諧為準(zhǔn)。在白色的背景上，我們一般使用黑色，這樣不易產(chǎn)生視覺疲勞，能保證瀏覽者較長時 間地瀏覽頁。一般我們頁默認(rèn)的字體是宋體。為了體現(xiàn)站點的“與眾不同”和特 有風(fēng)格，我門可以根據(jù)需要選擇一些特別字體。 例如，為了體現(xiàn)專業(yè)可以使用粗 仿宋體，體現(xiàn)設(shè)計精美可以用廣告體，體現(xiàn)親切隨意可

11、以用手寫體等等。當(dāng)然這 些都是個人看法，你可以根據(jù)實際情況，選擇更貼切的字體。目前常見的中文字 體有二三十種，常見的英文字體有近百種，絡(luò)上還有許多專用藝術(shù)字體下載，要 尋找一款滿意的字體并不算困難。 需要說明的是：使用非默認(rèn)字體只能用圖片的 形式，因為很可能瀏覽者的PC里沒有安裝你的特別字體，那么你的辛苦設(shè)計制 作便將付之東流。頁的適應(yīng)性是很重要的，在不同的系統(tǒng)上，不同的分辨率下，不同的瀏覽 器上，我們將會看到不同的結(jié)果，因此設(shè)計時要統(tǒng)籌考慮。一般我們在800X600下制作頁，最佳瀏覽效果也是在 800X600分辨率下，在其它情況下只要保證基 本一致，不出現(xiàn)較大問題即可。現(xiàn)在我們設(shè)計頁，一般要

12、考慮800X 600和1024X 768兩種分辨率，因此我們的表格一般為居中的 770左右的表格，表格的 寬度最寬不要超過778。事實上，”做頁”不是單純意義上的”制作頁”，如果 想讓自己制作的頁美觀大方，就必須要考慮”設(shè)計頁”的過程，一個好的作品， 不通過仔細(xì)的”設(shè)計”就成形是絕對不可能的。我國的頁界面頁面設(shè)計水平總體上不及韓國，創(chuàng)新的頁面極少，基本都是 一種風(fēng)格，這也是因以前我國的寬帶水平跟不上有原因， 一個漂亮的頁面，必然 體積會比較龐大，絡(luò)比較慢的話打開的速度也就可想而之， 打開速度慢正是頁的 一個最大殺手，所以我國以前的頁面基本都是以框架式居多。隨著我國寬帶的普及，我們也迅速括起了一陣韓風(fēng)，很多大膽創(chuàng)新的頁面出現(xiàn)，這是一個好現(xiàn)象， 但是一味的模仿韓國也不行，我們也要有自己的特色，不能一味的拿來主義。頁界面頁面設(shè)計的一個基本特色便是吸引瀏覽者，一