對(duì)任何網(wǎng)站來(lái)說(shuō)，網(wǎng)頁(yè)設(shè)計(jì)都是非常重要的部分，優(yōu)秀的網(wǎng)站設(shè)計(jì)師，可以是一個(gè)Flash動(dòng)畫(huà)師、平面設(shè)計(jì)師、交互設(shè)計(jì)師，更有藝術(shù)家的潛質(zhì)。優(yōu)秀的網(wǎng)頁(yè)設(shè)計(jì)，要想達(dá)到好的藝術(shù)效果，需要設(shè)計(jì)師擁有一定的藝術(shù)涵養(yǎng)，并能結(jié)合各方面的技術(shù)。

一、網(wǎng)頁(yè)設(shè)計(jì)基本內(nèi)容

1.網(wǎng)頁(yè)的構(gòu)成

網(wǎng)頁(yè)的基本構(gòu)成，分為網(wǎng)頁(yè)板塊分布、導(dǎo)航、視覺(jué)傳達(dá)，網(wǎng)頁(yè)設(shè)計(jì)中的傳達(dá)信息通過(guò)點(diǎn)線面的形式，通過(guò)點(diǎn)狀的網(wǎng)頁(yè)版塊兒分布，形成一個(gè)網(wǎng)頁(yè)導(dǎo)航，然后才形成一個(gè)視覺(jué)傳達(dá)的效果。這三者之間相互聯(lián)系和輔助，進(jìn)而向網(wǎng)絡(luò)使用的受眾傳達(dá)除了視覺(jué)信息之外，更重要的其他的信息。三者之間通過(guò)技術(shù)的實(shí)踐，以及協(xié)調(diào)處理，這三者之中包括：文字、圖片、動(dòng)畫(huà)等元素，來(lái)進(jìn)行網(wǎng)頁(yè)更優(yōu)的呈現(xiàn)[2]。

2.網(wǎng)頁(yè)設(shè)計(jì)的表現(xiàn)形式

網(wǎng)頁(yè)的設(shè)計(jì)形式跟報(bào)紙雜志等多種平面媒體設(shè)計(jì)有很多的相同之處，在視覺(jué)傳達(dá)以及藝術(shù)效果上，都有著非同一般的呈現(xiàn)。網(wǎng)頁(yè)設(shè)計(jì)需要在一個(gè)有限的展示空間，呈現(xiàn)出圖片、文字再加上動(dòng)畫(huà)的結(jié)合信息，來(lái)進(jìn)行此網(wǎng)頁(yè)需要做到的視覺(jué)以及信息的傳達(dá)，設(shè)計(jì)者通過(guò)處理文字、圖片、布局以及網(wǎng)頁(yè)上需要的動(dòng)畫(huà)，甚至聲音影效等，來(lái)進(jìn)行理性的藝術(shù)化的排版設(shè)計(jì)，這要求設(shè)計(jì)者擁有一定的設(shè)計(jì)藝術(shù)鑒賞能力和設(shè)計(jì)技術(shù)掌握能力。

隨著網(wǎng)絡(luò)技術(shù)、電腦技術(shù)的快速發(fā)展與廣泛普及，網(wǎng)頁(yè)設(shè)計(jì)開(kāi)啟了人類(lèi)新的生活、新的實(shí)踐，網(wǎng)頁(yè)已經(jīng)成為網(wǎng)絡(luò)信息的表現(xiàn)和思想傳播的主要形式。而在網(wǎng)頁(yè)設(shè)計(jì)與網(wǎng)站建設(shè)的過(guò)程中，F(xiàn)lash的應(yīng)用尤為重要。在網(wǎng)頁(yè)設(shè)計(jì)中適當(dāng)?shù)厥褂肍lash技術(shù)，能使網(wǎng)頁(yè)呈現(xiàn)出多媒體效果，從而更加具有吸引力，增加網(wǎng)頁(yè)與瀏覽者的互動(dòng)性。同時(shí)，F(xiàn)lash也逐漸依靠其諸多優(yōu)勢(shì)迅速占領(lǐng)了網(wǎng)頁(yè)設(shè)計(jì)領(lǐng)域，成為了網(wǎng)頁(yè)設(shè)計(jì)的重心。本文重在探討Flash動(dòng)畫(huà)在網(wǎng)頁(yè)設(shè)計(jì)中的應(yīng)用，以供同行參考。

1Flash動(dòng)畫(huà)技術(shù)概述

Flash是一類(lèi)矢量式圖形編輯及動(dòng)畫(huà)制作應(yīng)用軟件。它通過(guò)利用符號(hào)、按鈕、場(chǎng)景等一系列元素組合，能夠使設(shè)計(jì)者集成圖形、動(dòng)畫(huà)，影像文件，音頻等各種多媒體制作素材，利用最基礎(chǔ)的元素制作出內(nèi)容豐富、形式簡(jiǎn)潔、交互性強(qiáng)、極富渲染力的動(dòng)畫(huà)效果。

2Flash在網(wǎng)頁(yè)設(shè)計(jì)中的應(yīng)用

近幾年，F(xiàn)lash作為一種新型的設(shè)計(jì)方式和娛樂(lè)方式，已被廣泛應(yīng)用于網(wǎng)頁(yè)設(shè)計(jì)中，從簡(jiǎn)單的文字、圖片效果到復(fù)雜的Flash網(wǎng)站建設(shè)，可以說(shuō)Flash所起的作用不再僅僅是增添一些漂亮的動(dòng)畫(huà)，而是已經(jīng)融入到了整個(gè)網(wǎng)站的建設(shè)之中。目前Flash技術(shù)已與電視、廣告、動(dòng)畫(huà)、MTV制作等緊密結(jié)合，并作為一種產(chǎn)業(yè)，逐步向音樂(lè)、電視、廣告、游戲、遠(yuǎn)程教育等各個(gè)領(lǐng)域滲透。

2.1將Flash引入網(wǎng)頁(yè)設(shè)計(jì)的必要性

網(wǎng)頁(yè)設(shè)計(jì)的目的是提供一種功能強(qiáng)大、使用方便、頁(yè)面美觀的形式，讓瀏覽者能夠方便快捷地了解網(wǎng)頁(yè)所提供的信息，提升用戶體驗(yàn)，并最終引導(dǎo)瀏覽者的行為。研究網(wǎng)頁(yè)設(shè)計(jì)信息現(xiàn)象對(duì)于網(wǎng)頁(yè)設(shè)計(jì)的發(fā)展有重要的指導(dǎo)意義。

一、網(wǎng)頁(yè)設(shè)計(jì)信息的概念

法國(guó)學(xué)者德盧西奧•邁耶在《視覺(jué)美學(xué)》中寫(xiě)道：“一件藝術(shù)作品不是獨(dú)白而是對(duì)話?！蓖瑯?，網(wǎng)頁(yè)設(shè)計(jì)也不是設(shè)計(jì)師的個(gè)人獨(dú)白，而是與瀏覽者的對(duì)話。既然是對(duì)話，那么其中就一定有信息的交流與傳遞?？刂普摽茖W(xué)創(chuàng)始人美國(guó)數(shù)學(xué)家諾伯特•維納將信息定義為：“信息是人們?cè)谶m應(yīng)及控制外部世界、并且使這種適應(yīng)及控制反作用于外部世界的過(guò)程中，同外部世界進(jìn)行交換的內(nèi)容的名稱。”對(duì)于網(wǎng)頁(yè)設(shè)計(jì)來(lái)說(shuō)，網(wǎng)頁(yè)設(shè)計(jì)信息就是網(wǎng)頁(yè)設(shè)計(jì)師（發(fā)送者）對(duì)網(wǎng)站環(huán)境進(jìn)行調(diào)節(jié)與設(shè)計(jì)，并讓這種設(shè)計(jì)被網(wǎng)頁(yè)瀏覽者（接收者）所理解時(shí)產(chǎn)生的與網(wǎng)站環(huán)境進(jìn)行交換的產(chǎn)物。對(duì)網(wǎng)頁(yè)設(shè)計(jì)師而言，如果感到網(wǎng)站環(huán)境有某種不確定性（如如何傳達(dá)客戶的需求及理念，如何布局網(wǎng)頁(yè)的形式等），設(shè)計(jì)師便會(huì)產(chǎn)生審美注意；當(dāng)設(shè)計(jì)師通過(guò)某種途徑或方法接收到了有效信息時(shí)（這種信息可以是某種設(shè)計(jì)形式、某種設(shè)計(jì)方案等），就消除了對(duì)網(wǎng)站環(huán)境的不確定性，并完成了對(duì)設(shè)計(jì)信息的編碼。而對(duì)于網(wǎng)頁(yè)瀏覽者而言，瀏覽者對(duì)于網(wǎng)站環(huán)境感到有疑問(wèn)或不確定的時(shí)候（如感興趣的資料在哪里、布局是否合理等），也會(huì)產(chǎn)生審美注意；當(dāng)瀏覽者通過(guò)對(duì)信息編碼的破譯接收到了有效信息時(shí)（如在網(wǎng)頁(yè)上獲取到了需要的資料），也消除了對(duì)網(wǎng)站環(huán)境的不確定性。這樣，網(wǎng)頁(yè)設(shè)計(jì)中的設(shè)計(jì)對(duì)話和設(shè)計(jì)活動(dòng)便在信息傳遞中真正形成。

二、網(wǎng)頁(yè)設(shè)計(jì)信息的層次

在網(wǎng)頁(yè)設(shè)計(jì)信息傳播的過(guò)程中，設(shè)計(jì)信息是一種多層次的復(fù)雜信息綜合體，可以分為技術(shù)信息、語(yǔ)義信息和審美信息三個(gè)層次。網(wǎng)頁(yè)設(shè)計(jì)的技術(shù)信息指的是信息的物質(zhì)層面或形式層面，不僅包括網(wǎng)頁(yè)設(shè)計(jì)的布局、色彩、音效、交互等信息，也包括隱藏在網(wǎng)頁(yè)背后、能夠讓網(wǎng)頁(yè)正常呈現(xiàn)及運(yùn)行的網(wǎng)站編程語(yǔ)言，體現(xiàn)了網(wǎng)站整體知覺(jué)環(huán)境和網(wǎng)站的后臺(tái)環(huán)境。因此，技術(shù)信息就是網(wǎng)頁(yè)表現(xiàn)形式的信息。網(wǎng)頁(yè)設(shè)計(jì)的語(yǔ)義信息指的是信息的內(nèi)容，即單純作為語(yǔ)言意義的信息。這種信息不僅泛指網(wǎng)頁(yè)需要傳達(dá)的文本內(nèi)容，也包括由網(wǎng)頁(yè)布局、色彩、音效、交互等體現(xiàn)出來(lái)的設(shè)計(jì)符號(hào)、設(shè)計(jì)功能、交互體驗(yàn)方式等，體現(xiàn)了網(wǎng)站的前臺(tái)環(huán)境。網(wǎng)頁(yè)設(shè)計(jì)的語(yǔ)義信息服從普遍邏輯，具有可理解、可翻譯為其他語(yǔ)言結(jié)構(gòu)的特點(diǎn)。

三、網(wǎng)頁(yè)設(shè)計(jì)信息的流動(dòng)方式與特征

摘要：響應(yīng)式網(wǎng)頁(yè)設(shè)計(jì)能夠讓網(wǎng)頁(yè)的表現(xiàn)效果達(dá)到用戶的需求，越來(lái)越多的響應(yīng)式網(wǎng)頁(yè)設(shè)計(jì)被廣泛的應(yīng)用。論文在闡述響應(yīng)式網(wǎng)頁(yè)概念的基礎(chǔ)上，分析了響應(yīng)式網(wǎng)頁(yè)設(shè)計(jì)的優(yōu)勢(shì)優(yōu)勢(shì)，給出了響應(yīng)式網(wǎng)頁(yè)設(shè)計(jì)的關(guān)鍵技術(shù)。

關(guān)鍵詞：響應(yīng)式設(shè)計(jì)；網(wǎng)頁(yè)開(kāi)發(fā)；EthanMarcotte

1響應(yīng)式網(wǎng)頁(yè)設(shè)計(jì)

近些年來(lái)，移動(dòng)智能設(shè)備發(fā)展迅猛，用戶們可以在各種終端上進(jìn)行訪問(wèn)，如：個(gè)人電腦、平板電腦、智能手機(jī)等各種途徑進(jìn)行訪問(wèn)。如何能使同一個(gè)網(wǎng)站在許多不同分辨率的屏幕和設(shè)備上都可以很好的顯示出來(lái)，不會(huì)出現(xiàn)排版的混亂。EthanMarcotte在2010年提出的響應(yīng)式網(wǎng)頁(yè)設(shè)計(jì)，解決了根據(jù)人的行為自動(dòng)調(diào)整空間環(huán)境這一難題。響應(yīng)式設(shè)計(jì)根據(jù)用戶不同的設(shè)備環(huán)境做出響應(yīng)，提出了一個(gè)空間應(yīng)該根據(jù)環(huán)境和存在其中的人的變化進(jìn)行響應(yīng)。頁(yè)面的設(shè)計(jì)與開(kāi)發(fā)根據(jù)用戶的行為以及設(shè)備環(huán)境、屏幕尺寸等，能夠進(jìn)行自動(dòng)的響應(yīng)和相應(yīng)的調(diào)整，做到“一源多屏”。

2響應(yīng)式網(wǎng)頁(yè)設(shè)計(jì)的優(yōu)勢(shì)

由于其便捷的功能，被越來(lái)越多的網(wǎng)頁(yè)設(shè)計(jì)師們廣泛應(yīng)用，對(duì)比響應(yīng)式網(wǎng)頁(yè)設(shè)計(jì)概念沒(méi)有出現(xiàn)之前的固定寬度為主的頁(yè)面布局，有很多的特點(diǎn)及優(yōu)勢(shì)：優(yōu)勢(shì)1，響應(yīng)式網(wǎng)頁(yè)可以很好地解決移動(dòng)終端設(shè)備顯示差異的問(wèn)題，當(dāng)用戶使用不同分辨率和屏幕大小的多種設(shè)備瀏覽響應(yīng)式網(wǎng)頁(yè)時(shí)，頁(yè)面會(huì)根據(jù)屏幕尺寸，分辨率來(lái)進(jìn)行重新的排版，能展現(xiàn)出更完美的顯示效果。通常情況下，網(wǎng)頁(yè)設(shè)計(jì)師想最想傳達(dá)的第一重要的內(nèi)容會(huì)第一個(gè)顯示出來(lái)，其余內(nèi)容會(huì)根據(jù)設(shè)計(jì)師其他的想法，以一種或幾種排序規(guī)則排列在屏幕外，用戶通過(guò)滑動(dòng)或滾動(dòng)屏幕就可以瀏覽其余信息。優(yōu)勢(shì)2，在用戶使用平板電腦、智能手機(jī)等的時(shí)候，智能設(shè)備可以根據(jù)用戶的持握方向，主動(dòng)調(diào)整等用戶行為進(jìn)行橫屏豎屏切換。橫屏和豎屏的切換是發(fā)生在一瞬間的，而采用響應(yīng)式的網(wǎng)頁(yè)在這一瞬間也能根據(jù)不同的方向以及屏幕尺寸，做出迅速的響應(yīng)，使網(wǎng)頁(yè)呈現(xiàn)出最佳的布局效果。優(yōu)勢(shì)3，采用響應(yīng)式開(kāi)發(fā)的頁(yè)面，可以減少維護(hù)成本，在目前人們生活中使用的的多種設(shè)備平臺(tái)上只需要一個(gè)網(wǎng)頁(yè)的開(kāi)發(fā)與維護(hù)。同時(shí)，在更新網(wǎng)站數(shù)據(jù)的時(shí)候也不會(huì)出現(xiàn)多個(gè)獨(dú)立平臺(tái)的網(wǎng)頁(yè)數(shù)據(jù)更新不同步的情況。響應(yīng)式網(wǎng)頁(yè)不同于多個(gè)獨(dú)立平臺(tái)的網(wǎng)頁(yè)，不會(huì)需要多個(gè)域名。

1網(wǎng)頁(yè)平面設(shè)計(jì)的特點(diǎn)

從技術(shù)手法來(lái)講，網(wǎng)頁(yè)設(shè)計(jì)遵循HTML標(biāo)準(zhǔn)規(guī)范。其標(biāo)記式代碼構(gòu)成正是針對(duì)網(wǎng)頁(yè)視覺(jué)元素組織編排的描述語(yǔ)言。如規(guī)定文字、圖片的位置、大小、透明度、色彩等。通過(guò)這種標(biāo)記語(yǔ)言，清楚的表達(dá)了設(shè)計(jì)者的創(chuàng)作意圖，使人能夠一目了然。這是一種易于借鑒、重用、修訂的設(shè)計(jì)手法。從觀者體驗(yàn)來(lái)講，網(wǎng)頁(yè)相對(duì)與其他媒體更能吸引人的眼球。人們每日頻繁打開(kāi)網(wǎng)站，瀏覽大量網(wǎng)頁(yè)，將其作為獲取信息的主要渠道。報(bào)紙、廣播、電視只是單向的提供信息內(nèi)容給受眾，而網(wǎng)絡(luò)卻提供了對(duì)信息進(jìn)行篩選、拓展、深化的手段。網(wǎng)頁(yè)必將遠(yuǎn)超報(bào)紙、廣播、電視在社交媒體中的作用。優(yōu)秀的網(wǎng)頁(yè)設(shè)計(jì)應(yīng)該能以簡(jiǎn)潔的布局、明確的導(dǎo)航、統(tǒng)一的風(fēng)格、便捷的交互帶給人們流暢的瀏覽體驗(yàn)。網(wǎng)頁(yè)文件大小、分辨率、瀏覽器等因素都可能影響人們的瀏覽體驗(yàn)，而傳統(tǒng)的平面設(shè)計(jì)卻無(wú)需考慮媒介載體問(wèn)題。

2平面構(gòu)成在網(wǎng)頁(yè)設(shè)計(jì)中的應(yīng)用

平面構(gòu)成用于網(wǎng)頁(yè)設(shè)計(jì)應(yīng)為信息內(nèi)容的流暢傳遞服務(wù)。“不要把信息隨意的擺放在屏幕上。要把信息放在由窗口和面板構(gòu)成的背景中，窗口、面板和基本的網(wǎng)格應(yīng)有一致、清晰的聯(lián)系”。遵循傳統(tǒng)平面構(gòu)成的認(rèn)知，網(wǎng)頁(yè)中的信息仍可歸結(jié)為點(diǎn)線面的視覺(jué)元素。諸如重復(fù)、對(duì)比、漸變等構(gòu)成形式，是將視覺(jué)信息元素有序化、藝術(shù)化的必要手段。

2.1網(wǎng)頁(yè)設(shè)計(jì)中的點(diǎn)線面應(yīng)用

點(diǎn)是網(wǎng)頁(yè)設(shè)計(jì)的基本構(gòu)件，是不可分割的信息元素和視覺(jué)元素，即人們?yōu)g覽網(wǎng)頁(yè)的著眼點(diǎn)所在。譬如超鏈接、按鈕、logo、表單輸入項(xiàng)、標(biāo)題、列表項(xiàng)。依筆者所見(jiàn)，網(wǎng)頁(yè)中的點(diǎn)可以是圖片，也可以是文字；可以體現(xiàn)內(nèi)容，也可以提供交互功能。線是點(diǎn)的移動(dòng)軌跡，是面的邊際，是不同信息內(nèi)容的板塊劃分。在網(wǎng)頁(yè)中，線具有分割、聯(lián)結(jié)、牽引、裝飾、組織等作用。在網(wǎng)頁(yè)設(shè)計(jì)中，線的作用弱于傳統(tǒng)媒介。因?yàn)榫W(wǎng)頁(yè)處理的多是有規(guī)則輪廓的線，有虛實(shí)之分。實(shí)線如：圖片、表格的邊框，網(wǎng)頁(yè)中專(zhuān)門(mén)有一個(gè)標(biāo)記<hr>用來(lái)畫(huà)出橫線，以示區(qū)域間隔。虛線如：無(wú)邊框網(wǎng)頁(yè)元素的內(nèi)外間距（magin和padding），將為信息視覺(jué)元素繪制無(wú)形的邊線，將其與內(nèi)外層的元素區(qū)分開(kāi)來(lái)。網(wǎng)頁(yè)并不支持無(wú)規(guī)則的線獨(dú)立完整的存在。網(wǎng)頁(yè)的結(jié)構(gòu)布局本質(zhì)上是由矩形容器，按從上到下的瀑布式排列、嵌套組合而成。橫線、豎線之外的斜線、不規(guī)則線條最終都是切割、分解到不同行列的矩形容器中拼接而成的。從瀏覽器看到的完整效果只是假象。即使通過(guò)<map>標(biāo)記創(chuàng)建形狀（shap）為多變不規(guī)則形（polygon）的熱點(diǎn)鏈接，其所指向的圖片本身仍是處于矩形容器中。所謂的不規(guī)則鏈接區(qū)域，只是為了表征如地圖中特定地點(diǎn)之類(lèi)的信息內(nèi)容，卻與網(wǎng)頁(yè)的布局和視覺(jué)元素實(shí)體無(wú)關(guān)。面在網(wǎng)頁(yè)中的表征，即大大小小的矩形容器。和不存在不規(guī)則的線條一樣，網(wǎng)頁(yè)結(jié)構(gòu)中也不存在不規(guī)則的面。這似乎是一個(gè)束縛平面設(shè)計(jì)師手腳的枷鎖。實(shí)際上，網(wǎng)頁(yè)設(shè)計(jì)并不排斥任何的線面形式呈現(xiàn)。瀑布式排列、嵌套組成網(wǎng)頁(yè)的虛擬矩形容器，可視為組成報(bào)紙、電子屏幕的點(diǎn)陣系統(tǒng)。包括線、面，甚至色彩等視覺(jué)元素都可以無(wú)礙的呈現(xiàn)在人們面前，只是其實(shí)質(zhì)的結(jié)構(gòu)受到了精密的分解和組織而已。這種組織本身就是平面構(gòu)成設(shè)計(jì)最基礎(chǔ)的重復(fù)構(gòu)成的應(yīng)用。對(duì)此，火狐瀏覽器提供了三維視圖的查看工具，可以讓人更加形象的了解網(wǎng)頁(yè)中各視覺(jué)元素的層次關(guān)系。