商業(yè)網(wǎng)頁版式構(gòu)成設(shè)計

商業(yè)網(wǎng)頁版式構(gòu)成設(shè)計

---商業(yè)網(wǎng)頁藝術(shù)設(shè)計---商業(yè)網(wǎng)頁版式構(gòu)成設(shè)計

.主要內(nèi)容:1.版式構(gòu)成設(shè)計的概念

2.版式構(gòu)成的分類和特點(diǎn)

3.版式構(gòu)成的排版工具和方法.學(xué)習(xí)重點(diǎn):1.各類版式構(gòu)成的特點(diǎn)2.排版工具的選用.學(xué)習(xí)難點(diǎn):區(qū)域式布局、排版工具的操作

版式構(gòu)成設(shè)計的概念網(wǎng)頁界面的版式構(gòu)成設(shè)計，是將文字、圖像、色彩、動畫、視頻等網(wǎng)頁界面的傳達(dá)要素，根據(jù)特定的內(nèi)容和主題，在網(wǎng)頁所限定的范圍中，運(yùn)用造型元素和形式原理進(jìn)行視覺的關(guān)聯(lián)與配置，從而將設(shè)計意圖以視覺形式表現(xiàn)出來。這一過程實際上是創(chuàng)造性、藝術(shù)性地傳達(dá)信息的過程。

版式構(gòu)成的分類和特點(diǎn)

商業(yè)網(wǎng)頁的版式構(gòu)成大致可分為分列式布局結(jié)構(gòu)區(qū)域式布局結(jié)構(gòu)自由式布局結(jié)構(gòu)1）分列式布局結(jié)構(gòu)的特點(diǎn)分列式布局結(jié)構(gòu)是運(yùn)用最為廣泛的商業(yè)網(wǎng)頁布局結(jié)構(gòu)，英特網(wǎng)上的門戶網(wǎng)站和綜合類網(wǎng)站絕大部分是這一結(jié)構(gòu)。分列式布局結(jié)構(gòu)一般版面呈長方形，顯示效果橫窄豎寬，有上下滾動條。分列式布局結(jié)構(gòu)可分為：整列式、二列式、三列式、四列式、五列式、混合列式。整列式(通列)

其格式從上到下一通到底。這種版式構(gòu)成通常用于商業(yè)網(wǎng)頁的內(nèi)頁，顯示信息內(nèi)容、注冊信息等頁面的布局。

二列式是最常見的分列式版式構(gòu)成。二列式版式構(gòu)成一般是左窄右寬，也有時是右窄左寬，但非主流。三列式給人的感覺開放、大氣，適用于門戶類和流量大的網(wǎng)站。常規(guī)內(nèi)容設(shè)置是：導(dǎo)航橫排在頁面上部，左右兩列為功能區(qū)和附加信息區(qū)，中列為主要信息顯示區(qū)和重要資料顯示區(qū)。四列式會使得頁面相對很擁擠，給人一種網(wǎng)站的信息量很大的感覺，信息儲備少的站點(diǎn)采用這種布局結(jié)構(gòu)，可以在視覺感觀上調(diào)整信息量少的不足。五列式分列式布局的極限，多用于內(nèi)頁布局?；旌狭惺?）區(qū)域式布局結(jié)構(gòu)的特點(diǎn)區(qū)域式布局結(jié)構(gòu)在商業(yè)網(wǎng)頁布局中運(yùn)用也很廣，它通常利用顏色、線條、文字的斷口或插圖的變換等手段把網(wǎng)頁平面劃分為幾個規(guī)則的或不規(guī)則的區(qū)域。區(qū)域式布局結(jié)構(gòu)版面接近方形，一般沒有滾動條或滾動條很短。區(qū)域式布局結(jié)構(gòu)靈活多變，劃分出來的區(qū)域大小、形式都可以自行定義，格局則變化莫測。此類版式構(gòu)成比較適用于企業(yè)站點(diǎn)和產(chǎn)品單一的電子商務(wù)類站點(diǎn)，以及對頁面要求較高、信息流通量小的專業(yè)性信息站點(diǎn)，不適用于門戶開放式站點(diǎn)和信息交錯緊密的站點(diǎn)。

3）自由式布局結(jié)構(gòu)的特點(diǎn)自由式布局結(jié)構(gòu)有靜態(tài)和動態(tài)兩種形式。靜態(tài)布局通常把網(wǎng)頁當(dāng)作平面出版物創(chuàng)意設(shè)計，將信息與背景畫面融為一體，沒有清晰的界限區(qū)分，設(shè)計好的網(wǎng)頁圖片通常采取分割整張圖片生成網(wǎng)頁的形式去制作。此類頁面設(shè)計通常精美華麗，視覺效果較好，個性化強(qiáng)，但不適用于信息量大的站點(diǎn)。動態(tài)布局通常采用流行的Flash動畫作為表現(xiàn)形式。由于Flash強(qiáng)大的功能，很多國際大公司都采用了布局結(jié)構(gòu)。這種排版形式變化多樣，視覺沖擊力強(qiáng)，整體效果好。Flash動畫使頁面體現(xiàn)出極強(qiáng)的互動感、時代感和科技感。

各類版式構(gòu)成設(shè)計的開發(fā)工具

類型推薦布局排版工具分列式布局結(jié)構(gòu)Dreamweaver區(qū)域式布局結(jié)構(gòu)Dreamweaver自由式布局結(jié)構(gòu)(靜態(tài))Photoshop+Dreamweaver自由式布局結(jié)構(gòu)(動態(tài))Flash商業(yè)網(wǎng)頁的頁面元素設(shè)計

logo設(shè)計

Banner設(shè)計

導(dǎo)航設(shè)計

網(wǎng)頁文字設(shè)計

圖形圖像設(shè)計

網(wǎng)頁動畫設(shè)計

一個網(wǎng)站是由多個網(wǎng)頁組成，一張網(wǎng)頁又是由多個頁面元素構(gòu)成。網(wǎng)頁界面包含了更多的構(gòu)成要素。除了文字和圖形以外，還有動畫、聲音和視頻等多媒體元素，以及各種特殊效果及交互功能．正是由于這些區(qū)別于傳統(tǒng)媒體的元素，使網(wǎng)頁界面的設(shè)計要考慮更多的因素。通過本單元使學(xué)生熟悉網(wǎng)頁界面的基礎(chǔ)頁面元素，掌握頁面元素的設(shè)計要點(diǎn)，能綜合運(yùn)用各種元素設(shè)計出風(fēng)格各異的網(wǎng)頁。1．logo設(shè)計

1）Logo的含義和形式網(wǎng)頁Logo是指網(wǎng)站的標(biāo)志、標(biāo)識。Logo是企業(yè)綜合信息傳遞的媒介，是依據(jù)企業(yè)的構(gòu)成結(jié)構(gòu)、行業(yè)類別、經(jīng)營理念，并充分考慮標(biāo)志接觸的對象和應(yīng)用環(huán)境，為企業(yè)制定的標(biāo)準(zhǔn)視覺符號。它以單純、顯著、易識別的物象、圖形或文字符號為直觀語言，具有表達(dá)意義、情感和指令行動等作用。Logo設(shè)計將具體的事物、事件、場景和抽象的精神、理念、方向通過特殊的圖形固定下來，使人們在看到Logo標(biāo)志的同時，自然的產(chǎn)生聯(lián)想，從而對企業(yè)產(chǎn)生認(rèn)同。網(wǎng)頁中的Logo可分為圖案Logo、文字Logo、圖文Logo。（1）圖案Logo通過隱寓、聯(lián)想、概括、

抽象等繪畫表現(xiàn)方法表現(xiàn)被標(biāo)識體，對其理念的表達(dá)概括而形象，容易區(qū)分、記憶，如圖所示。但圖案Logo往往與被標(biāo)識體關(guān)聯(lián)

性不夠直接，瀏覽者容易記憶圖案本身，對被標(biāo)識體的關(guān)系的認(rèn)知需要相對較曲折的

過程。可一旦建立聯(lián)系，印象較深刻，對被標(biāo)識體記憶則相對持久。所以對持久記憶要求高時應(yīng)設(shè)計良好的特示圖案形象。（2）文字Logo涵義明確、直接，

易于被理解，認(rèn)知，對所表達(dá)的理念也具有說明的作用，如圖所示。但因為文字本身的相似性易模糊受眾對標(biāo)識本身的記憶，從而對被標(biāo)識體的長久記憶發(fā)生弱化。所以特示文字，一般作為特示圖案的補(bǔ)充，要求選擇的字體應(yīng)與整體風(fēng)格一致，

應(yīng)盡可能做全新的區(qū)別性創(chuàng)作。完整的Logo設(shè)計，尤其是有中國特色的Logo設(shè)計，在國際化的要求下，一

般都應(yīng)考慮至少有中英文雙語的形式，要考慮中英文字的比例、搭配，還要兼顧標(biāo)識或文字展開后的應(yīng)用是否美觀，這

一點(diǎn)對背景等的制作十分必要，有利于追求符號擴(kuò)張的效果。（3）圖文Logo是文字與圖案結(jié)合，兼具文字與圖案的屬性，如圖所示。但圖文Logo易導(dǎo)致相關(guān)屬性的影響力相對弱化。為了不同的對象取向，制作偏圖案或偏文字的

Logo，會在表達(dá)時產(chǎn)生較大的差異。如只對印刷字體做簡單修飾，或把文字變成一

種裝飾造型讓大家去猜。其綜合功能為：能夠直接將被標(biāo)識體的印象，透過文字造型讓讀者理解；造型后的文字，較易于使觀者留下深刻印象與記憶。2）Logo設(shè)計原則（1）遵循人們的認(rèn)識規(guī)律，突出主題、引人注目。能夠在方寸之間概括出站點(diǎn)的理念，保持視覺平衡、講究線條的流暢，使整體形狀美觀，用反差、對比或邊框等強(qiáng)調(diào)主題。（2）外觀尺寸要根據(jù)頁面的整體版面設(shè)計來確定，選擇恰當(dāng)字體，注意留白，給人想象空間。（3）在色彩運(yùn)用上基色要相對穩(wěn)定，強(qiáng)調(diào)色彩的形式感、記憶感和感情規(guī)律。合理使用色彩的對比關(guān)系，重視色彩的注目性。（4）形式上重視簡約，以簡潔的符號化的視覺藝術(shù)形象把網(wǎng)站的形象和理念長留于人們心中。Banner設(shè)計

1）Banner的含義和形式

網(wǎng)頁Banner是指網(wǎng)頁中的廣告。它可分為橫幅廣告、通欄廣告、彈出窗口廣告、擎天柱廣告、按鈕廣告、畫中畫廣告、漂?。ɑ瑒樱V告、文字鏈接廣告、隱藏頁面廣告等。（1）橫幅廣告是互聯(lián)網(wǎng)廣告中最基本的廣告形式，尺寸是490×60像素，或233×30像素，可以使用靜態(tài)圖形，也可用多幀圖像拼接為動畫圖像，如圖所示。除普通GIF格式外，目前流行使用動感更強(qiáng)，交互性更高的Flash形式。橫幅廣告只需稍具視覺沖擊力就能輕易吸引瀏覽者的視線，可謂事半功倍。既可以通過廣告畫面或告語向瀏覽者傳遞某種信息，更可以引導(dǎo)瀏覽者與商家進(jìn)行深度接觸，實現(xiàn)交互。（2）通欄廣告通常放在網(wǎng)頁頂部或中間等顯著位置，橫貫頁面，如圖所示。該廣告形式尺寸較大，視覺沖擊力強(qiáng)，能給網(wǎng)絡(luò)訪客留下深刻印象。特別適合活動信息發(fā)布、產(chǎn)品推廣、慶典等。這種廣告版幅較大，是當(dāng)今網(wǎng)絡(luò)媒體中深受喜愛的廣告形式。貫穿頁面的大面積發(fā)布空間使廣告訴求得以充分發(fā)揮，從而將網(wǎng)絡(luò)媒體較之傳統(tǒng)媒體的優(yōu)勢演繹得更加徹底。其合理地嵌入頁面重要位置更使其如虎添翼。一種規(guī)格相當(dāng)于兩條橫幅的寬屏廣告，廣告置于整個頁面的中部，可以在媒體網(wǎng)站的首頁和頻道頁面刊登。寬屏廣告由于被放置在網(wǎng)站的黃金版位上，一方面廣告的含金量增加，另一方面由于中位的緣故，訪客在瀏覽頁面下端信息時勢必接觸廣告，從而提高廣告的有效曝光。廣告面積大，廣告信息豐富；廣告創(chuàng)意可以任意發(fā)揮，盡現(xiàn)廣告表現(xiàn)；由于寬銀幕廣告是上端頁面與下端下頁面的"橋梁"，訪客在瀏覽整個頁面時，必須先瀏覽廣告，即廣告信息可以迅速地傳達(dá)到訪客的視野中，這樣廣告的有效度大大提高。（3）彈出窗口廣告是在訪問者進(jìn)入該頁面之前，就搶先以大尺寸彈出的形式將相關(guān)廣告信息推介給瀏覽者，使人在意外之間加以關(guān)注。首頁彈出窗口廣告是網(wǎng)頁中十分流行的廣告形式，它可以有力的為您做好每一種廣告，加大對您的宣傳力度。（4）擎天柱廣告是在網(wǎng)頁右側(cè)或左側(cè)豎條式廣告形式，它可以形象的表現(xiàn)廣告的宣傳，是一種新型的廣告形式，是利用網(wǎng)站頁面左右兩側(cè)的豎式廣告位置而設(shè)計的廣告形式，如圖所示。這種廣告形式可以直接將客戶的產(chǎn)品和產(chǎn)品特點(diǎn)詳細(xì)的說明，并可以進(jìn)行特定的數(shù)據(jù)調(diào)查、有獎活動。廣告規(guī)格為120×600像素，制作表現(xiàn)為Flash,JavaScript或Gif,Jpg。由于廣告規(guī)格較大，廣告置于頁左右兩側(cè)，不會產(chǎn)生上下段位的廣告盲區(qū)，廣告位置可以強(qiáng)烈沖擊訪客視覺；廣告的獨(dú)享和排他性，可以降低廣告的干擾，同時也可以更好的傳達(dá)廣告信息；可以進(jìn)行多方位的廣告信息訴求，廣告調(diào)查、有獎活動、產(chǎn)品測試、熱點(diǎn)追蹤等均可在此進(jìn)行，并容易引起訪客的注意。（5）按鈕廣告尺寸較小，有120×60、90×40、40×20像素等大小。由于圖形尺寸小，故可以被更靈活的放置在網(wǎng)頁的任何位置。（7）漂?。ɑ瑒樱V告是隨頁面瀏覽而上下移動的小型圖像，會一直處于瀏覽者的視線之中。往往一個頗具懸念的訴求就會使瀏覽者欲罷不能，點(diǎn)擊即進(jìn)入。（8）文字廣告是通過一般性的簡短文字鏈接，直鏈連接到客戶的廣告內(nèi)容頁面上。廣告簡單明了，直接涵蓋主題，對訪問者而言具有較強(qiáng)的針對性和引導(dǎo)性。文字鏈接廣告是較軟性的宣傳手法，以精簡煽動的語句體現(xiàn)相關(guān)訴求，引發(fā)瀏覽者的好奇心理并進(jìn)一步地關(guān)注。文字鏈接是一種對瀏覽者干擾最少，卻很有效果的網(wǎng)絡(luò)廣告形式。一般不超過10個漢字，發(fā)布在首頁、重點(diǎn)頻道首頁的推薦位置。（9）隱藏頁面廣告是在Banner廣告的基礎(chǔ)上發(fā)展的產(chǎn)物，也是為了彌補(bǔ)Banner廣告?zhèn)鬏d信息較少、廣告表現(xiàn)單一的不足。隱藏頁面廣告主要是通過鼠標(biāo)掠過，從而產(chǎn)生動態(tài)的頁面。這個頁面是隱藏在特定的廣告表現(xiàn)形式下，廣告規(guī)格一般是特定廣告的3-4倍，這樣彌補(bǔ)了基本廣告所不能說明的信息。由于廣告信息的出現(xiàn)由訪客鼠標(biāo)控制，并具有隱蔽性的特點(diǎn)，所以廣告具有明顯的趣味性；廣告主要是對基本廣告形式的補(bǔ)充，所以起到了說明、感染的作用，并提高了訪客對廣告的興趣；廣告在沒有動作的情況下不會出現(xiàn)更大的廣告頁面，這樣不會影響訪客對自己所關(guān)心的信息的接受和瀏覽，可以增加親和力，并廣告的針對性也較強(qiáng)。

（10）播放式廣告是在Banner出現(xiàn)的廣告位置上不斷的變化單一廣告客戶的廣告，在流量上進(jìn)行控制。這樣避免了單一Banner缺乏吸引的狀況，并在視覺上使訪客產(chǎn)生新鮮的感覺。廣告動感更加明顯，廣告形式從單一型，向多元型轉(zhuǎn)變；廣告動態(tài)的感覺象電影播放，色彩豐富；廣告集中，避免一條廣告不能吸引訪客的弊端，多條客戶廣告的播放狀態(tài)，使廣告信息更加廣泛。

2）Banner設(shè)計原則（1）文字編排簡潔、和諧。（2）內(nèi)容醒目、美觀，視覺效果好（3）廣告內(nèi)容的方向正確。（4）激起點(diǎn)擊的欲望。你的廣告讓瀏覽者點(diǎn)擊的理由是什么？點(diǎn)擊后將能看到什么？（5）適當(dāng)?shù)牧艨眨荛_廣告條的邊緣。導(dǎo)航設(shè)計1）導(dǎo)航的含義和形式

導(dǎo)航是網(wǎng)頁的目錄，網(wǎng)頁之間的聯(lián)系和分類通過它來實現(xiàn)。導(dǎo)航應(yīng)放置在頁面的醒目位置，讓瀏覽者在第一時間看到它。網(wǎng)頁中的導(dǎo)航通常分為文字導(dǎo)航、圖像導(dǎo)航、交替圖像導(dǎo)航、下拉菜單導(dǎo)航、Flash導(dǎo)航。（1）文字導(dǎo)航是由純文字構(gòu)成，簡潔、清爽，容量較小。（2）圖像導(dǎo)航美觀、大方，字體選用不受限制，但占用空間較大。（3）交替圖像導(dǎo)航是指當(dāng)站點(diǎn)訪問者將鼠標(biāo)移到圖像導(dǎo)航上時，圖像發(fā)生變化。鼠標(biāo)移出圖像導(dǎo)航時，圖像又可以還原。交替圖像導(dǎo)航實際上使用了兩副圖像，原始圖像和鼠標(biāo)經(jīng)過圖像。

（4）下拉菜單導(dǎo)航比較節(jié)省空間，可以包含很多鏈接。它通過Javascript控制每一個元素的可見屬性實現(xiàn)效果，如所示。目前有很多可視化工具可以做下拉菜單導(dǎo)航，完全不需編寫代碼，只要簡單的設(shè)置就可完成。（5）Flash導(dǎo)航體積小、表現(xiàn)形式多樣、視覺沖擊力強(qiáng)，如圖所示。2）導(dǎo)航設(shè)計原則（1）導(dǎo)航設(shè)計合理、便捷。瀏覽者通過導(dǎo)航應(yīng)方便去任何頁面，并注意不要將內(nèi)容藏的太深。（2）導(dǎo)航內(nèi)文字組織清晰、明確、簡潔,符合瀏覽者的認(rèn)知心理。（3）導(dǎo)航條不易過多。除門戶網(wǎng)站外，商業(yè)網(wǎng)頁的導(dǎo)航不宜過多。導(dǎo)航過多一方面讓頁面顯得過于沉重，一方面會過分?jǐn)D占頁面位置，減少信息量。（4）將導(dǎo)航的設(shè)計融入整個網(wǎng)站設(shè)計中，使瀏覽者通過導(dǎo)航加深對企業(yè)形象的認(rèn)識。網(wǎng)頁文字設(shè)計

1）文字設(shè)計的含義和形式

文字是網(wǎng)頁界面的主體，是用以傳達(dá)信息的主要元素。由于目前的網(wǎng)速原因，文字還是信息傳達(dá)的最佳載體。單一的純文本給人感覺單調(diào)、枯燥，但只要對它進(jìn)行少許簡單而又有趣的修飾，就會使頁面變得生動起來。文字設(shè)計可以增強(qiáng)文字視覺傳達(dá)效果，提高文本內(nèi)容吸引力。文字構(gòu)成要素設(shè)計的好壞，直接影響到版面的視覺傳達(dá)效果和瀏覽者的興趣。網(wǎng)頁中的文字主要有標(biāo)題、文字信息、文字鏈接等幾種形式。（1）在網(wǎng)頁文章的頂端，通常會有一個醒目的標(biāo)題，作為文章的題目。標(biāo)題不一定是一個完整的句子，盡量簡單明了、引入注目，這樣才能得到瀏覽者的青睞。通常標(biāo)題應(yīng)放置在醒目的位置，使用較大的字體，在版面中作點(diǎn)或線的編排。（2）文字信息是標(biāo)題的內(nèi)容展開，是傳達(dá)信息的主體部分。文字信息的主體作用是圖形、動畫和影音等其他任何元素所不能替代的。文字信息是標(biāo)題的發(fā)揮，瀏覽者在閱讀標(biāo)題之后，需要在文字信息中得到進(jìn)一步解答，文字信息雖然簡單，但內(nèi)容必須適合標(biāo)題。同時要對文字的字體、字形、大小、顏色和編排要進(jìn)行精心的設(shè)置，以達(dá)到較好的瀏覽效果。（3）文字鏈接是網(wǎng)頁中最常見的超鏈接，它能直觀地呈現(xiàn)鏈接的相關(guān)主題信息，可方便瀏覽者對信息的檢索，使瀏覽者對所包含信息一目了然。2）文字設(shè)計原則（1）網(wǎng)頁中的文字須有一個整體基調(diào)。也就是要分清主次，把握文字總體的特征慣向，不能讓各種文字自成風(fēng)格，各行其是。（2）注重文字可讀性，適應(yīng)人們閱讀習(xí)慣。（3）考慮字體的外形特征。針對不同視覺動向的文字進(jìn)行有意識處理，會使平面更富有方向性與秩序美感。（4）文字的字體建議使用缺省字體。（5）注重空白的作用。版面上的空白，如字間距、行間距及其周圍空白的處理，對于文字的編排也有很大的影響。圖形圖像設(shè)計1）圖形圖像的含義和形式在很多網(wǎng)頁中，圖占據(jù)著整個頁面的重要位置，有的甚至占據(jù)了整個頁面。瀏覽者常常會因為看到一幅引人注目的圖像而引發(fā)興趣去了解相關(guān)內(nèi)容，圖給人的視覺印象要比文字強(qiáng)烈得多。網(wǎng)頁中的圖形圖像主要有插圖和照片、背景圖、標(biāo)題、鏈接按鈕等幾種形式。（1）在網(wǎng)頁中通常會放置幅面較大的插圖和照片來突出網(wǎng)頁主題。圖相當(dāng)直觀，不需像文字那樣逐步逐句地閱讀，可以不受文化水下的限制，并能在瞬間給人以印象。圖的渲染力很強(qiáng)，一幅好的圖，可以使瀏覽者見其圖即知其內(nèi)容，因此圖的選材通常要與主題緊密關(guān)聯(lián)。（2）背景圖是用作網(wǎng)頁的背景，以圖為背景來襯托主題。它可以增加層次感使網(wǎng)頁變得生動活潑而同時突出網(wǎng)頁的風(fēng)格。

（3）用圖作標(biāo)題可以避免千篇一律的文字標(biāo)題所給人的單調(diào)感和枯燥感。圖形圖像中豐富的色彩可以使標(biāo)題更加鮮明，巧妙的圖形組合可以使網(wǎng)頁具有更好的視覺效果，給人以深刻印象。（4）用小圖形取代文字作為鏈接按鈕，在網(wǎng)頁中應(yīng)用非常廣泛，可以使網(wǎng)頁更為生動、美觀。圖形按鈕具有直觀、形象的特點(diǎn)，可以為單調(diào)的文字信息增添活力，可以更加明確地表現(xiàn)它所要進(jìn)行的操作。2）圖形圖像設(shè)計原則（1）精練筒潔。在網(wǎng)站中放置圖片一定要慎重，即要放在量需要的地方，做到少而精。（2）圖像內(nèi)客恰當(dāng)。圖像的內(nèi)容必須與網(wǎng)頁主題相符。（3）顏色協(xié)調(diào)。在網(wǎng)頁色彩的運(yùn)用上，最主要的是圖形、圖像的色調(diào)要與整個網(wǎng)頁的主色調(diào)協(xié)調(diào)—致。（4）風(fēng)格吻合。圖形圖像的意境、風(fēng)格要與網(wǎng)頁的主題內(nèi)容保持氛圍、情感上的一致。（5）布局合理。圖像的布置至關(guān)重要。網(wǎng)頁動畫設(shè)計1）動畫的含義和形式動畫是網(wǎng)頁中最吸引入的元素。網(wǎng)頁動畫是利用人的視覺暫留現(xiàn)象，將在特定時間里完成的動作通過一系列略有差別的畫面表現(xiàn)出來。動畫具有很強(qiáng)的視覺沖擊力。在頁面中，動畫往往是第一視覺中心。因此在傳達(dá)主要信息時，動畫是有效的于段。動畫具有調(diào)節(jié)頁面的重要作用。在以靜態(tài)頁面為主的網(wǎng)站中適當(dāng)加入動畫，可以達(dá)到“動靜相宜”的良好視覺效果。網(wǎng)頁中的動畫以Gif動畫和Flash動畫這兩種形式為主。（1）Gif動畫是由Imageready等軟件制作出來的，構(gòu)成動畫的基本單位是幀，動畫由多幀畫面組成，每幀的內(nèi)容不同，前后相互聯(lián)系，后一幀畫面是前一幀的繼續(xù)。Gif格式的動畫需要幾幅原圖，把它們依次快速翻動就形成了動畫，這種動畫可以控制翻動速度，如圖所示的動畫由4幀組成。（2）Flash動畫是指Swf格式的動畫，用Flash動畫設(shè)計軟件制作。Flash動畫主要是網(wǎng)絡(luò)應(yīng)用開發(fā)的交互式矢量圖形動畫，目前Flash技術(shù)在網(wǎng)上非常流行，有些企業(yè)網(wǎng)站整個站點(diǎn)都用Flash形式來表現(xiàn)。2）動畫設(shè)計原則（1）內(nèi)容與形式相統(tǒng)一。內(nèi)容與形式的統(tǒng)一包括信息載體的選擇與信息內(nèi)容的統(tǒng)一、色彩與內(nèi)容的統(tǒng)一及字體與內(nèi)容的統(tǒng)一等。（2）常識性信息符號的選擇，可以盡量采用一般性常識視覺經(jīng)驗。（3）動畫時間以自然界動作的規(guī)律為依據(jù)，正確地設(shè)置時間。（4）動畫為網(wǎng)頁整體服務(wù)，頁面動點(diǎn)適度，不能為動而動。（5）保持較小的動畫文件。商業(yè)網(wǎng)頁的色彩設(shè)計

商業(yè)網(wǎng)頁的色彩設(shè)計

色彩是自然美、生活美、藝術(shù)美的重要組成部分。色彩設(shè)計是指遵循科學(xué)與藝術(shù)的內(nèi)在邏輯，對網(wǎng)頁色彩進(jìn)行富有鮮明創(chuàng)見性及理想化的組合，是理性與感性相結(jié)合的創(chuàng)造過程。色彩設(shè)計應(yīng)用于網(wǎng)頁界面設(shè)計中，給網(wǎng)頁作品帶來鮮活的生命力。它既是界面設(shè)計的語言，又是視覺信息傳達(dá)的手段和方式，是網(wǎng)頁界面設(shè)計中不可缺少的重要元素。通過本項目的實訓(xùn)與練習(xí)使學(xué)生熟悉色彩的基礎(chǔ)知識，理解色彩的意象，掌握商業(yè)網(wǎng)頁色彩設(shè)計的配制方法，能綜合運(yùn)用色彩設(shè)計知識構(gòu)造出鮮明、獨(dú)特、富有視覺沖擊力的網(wǎng)頁色彩。1．色彩三要素色彩最基本的三個原素：明度色相純度明度是指色彩的明亮或晦暗程度。明度包括色彩本身的明暗程度或是一種色相在不同強(qiáng)弱光線下呈現(xiàn)的明暗程度。在無彩色中，明度最高的色為白色，明度最低的色為黑色。在有彩色中，任何一種純度色都有自己的明度特征。在色相環(huán)中黃色為明度最高的色，紫色是明度最低的色，如圖所示。明度的變化往往通過區(qū)分其色階來表示，可表示為高明度、中間明度和低明度。色相是指色彩的相貌。每種顏色都具有自己特有的外觀特征，諸如色相感覺的紅、橙、黃、綠、藍(lán)、紫等相貌。色彩之間的色相比較，可分為同類色、類似色、對比色與互補(bǔ)色。同類色是色相接近的色，色相環(huán)中相距30度左右。類似色是色相差別適中的色，色相環(huán)中相距50度。對比色與互補(bǔ)色是色相差別較大的色，色相環(huán)中相距90~180度左右的色。純度是指色彩的鮮濁程度。人的視覺能辨認(rèn)出有色相感的色，都具有一定程度的鮮艷度。比如綠色，當(dāng)它混入白色后，雖然仍舊具有綠色相的特征，但它的鮮艷度降低了，明度提高了，成為淡綠色；當(dāng)它混入黑色后，鮮艷度也降低了，明度變暗了，成為暗綠色；當(dāng)混入與綠色明度相似的中性灰時，它的明度沒有改變，純度降低了，成為灰綠色。在純度色譜中，接近純色的色叫高純度色，接近灰色的色叫低純度色，處于中間狀態(tài)的叫中純度色。2．色彩的意象根據(jù)色彩的心理作用，人們常把色彩劃分為冷色和暖色。不同的色相給予人們不同的冷暖感覺上的聯(lián)想。色彩的冷暖感覺稱為色性。紅、橙、黃具有溫暖感，稱為暖色；藍(lán)、紫具有寒冷感，稱為冷色；綠色稱為中性色。冷暖色的劃分有助于運(yùn)用色調(diào)的基本傾向，把握網(wǎng)頁用色的整體效果，達(dá)到和諧、美觀的目的。冷暖色對人們的心理作用不同，賦予色彩的意象也不同。（1）紅色。紅色是一種充滿激情的色彩，像初升的太陽或燃燒的火焰，能使人產(chǎn)生興奮、沖動、憤怒、熱情、活力的感覺。紅色容易引起注意，具有較佳的明視效果，常用來傳達(dá)有活力、積極、熱誠、溫暖、前進(jìn)等涵義的企業(yè)形象與精神，也常用來作為警告、危險、禁止、防火等標(biāo)示用色。高明度的紅色與灰色、黑色搭配使用，會產(chǎn)生激進(jìn)、現(xiàn)代感；低明度的紅色則感到冷靜、沉重，凝造出古典氛圍。鮮艷的紅色極易吸引人們的目光，因此一般在網(wǎng)頁設(shè)計中不會大范圍的使用紅色，多數(shù)情況下紅色在網(wǎng)頁中起強(qiáng)調(diào)和點(diǎn)綴作用。（2）橙色。橙色是華美、歡快的光輝色彩，是暖色中最溫暖的顏色，能使人聯(lián)想到金秋、豐收、果實累累，因此是一種富足、快樂而幸福的色彩。橙色明視度高，具有警戒的含義，火車頭、救生衣、登山服裝等都會用橙色來警視。高明度橙色的網(wǎng)頁通常給人晴朗清新感，用黃色、黃綠色等類似色搭配，視覺效果極佳。橙色與藍(lán)色搭配極為生動，構(gòu)成了最響亮、最歡快的色彩。由于橙色非常明亮刺眼，有時會使人感到負(fù)面低俗的意象，所以在網(wǎng)頁中運(yùn)用橙色時，要注意選擇搭配的色彩和表現(xiàn)方式，才能把橙色明亮活潑的特性發(fā)揮出來。（3）黃色。黃色是亮度最高的色彩，像陽光一樣光明、燦爛，能使人具有快樂、希望、智慧、輕快的個性。黃色不僅象征照亮黑暗的智慧之光，而且象征財富和權(quán)利，它是驕傲的色彩。黃色明視度高，用來警告危險或提醒注意，因此交通標(biāo)志上的黃燈、工程用的大型機(jī)器、學(xué)生用的雨衣與雨鞋等都會用黃色。黃色在門戶網(wǎng)站和兒童網(wǎng)站運(yùn)用極為普遍，如果用顏色來形容一個網(wǎng)站，搜狐網(wǎng)就是黃色的。黑色、藍(lán)色或紫色的襯托可以使黃色達(dá)到力量無限擴(kuò)大的強(qiáng)度，得到溫暖愉快的積極效果。（4）綠色。綠色是介于冷暖色中間的色彩，顯得和睦、寧靜、健康、安全。它是草地、樹木、莊稼得色彩，給人以純凈、清新與無限生機(jī)的感覺。綠色常被作為青春、和平的象征色，綠色所傳達(dá)的是清爽、理想、希望、生長的意象。教育、醫(yī)藥、服務(wù)行業(yè)的網(wǎng)站，常選用綠色做基調(diào)色。黃綠色有單純、年青、旺盛的視覺意境，在網(wǎng)頁中通常與藍(lán)色搭配，用于表現(xiàn)溫暖親切或高科技的神秘虛幻感，是兒童和年輕人比較喜歡的顏色。清綠色是一種寧靜、平和的色彩，給人以涼爽清新感。青綠色與黃色、橙色等顏色搭配可愛、親切，與藍(lán)色、白色搭配爽朗、明快。（5）藍(lán)色。藍(lán)色是博大的色彩，永恒的象征，天空和大海都呈蔚藍(lán)色。藍(lán)色是最具涼爽，清新，專業(yè)的色彩，藍(lán)色沉穩(wěn)的特性，具有理智，準(zhǔn)確的意象，在商業(yè)設(shè)計中，強(qiáng)調(diào)科技，效率的商品或企業(yè)形象，大多選用藍(lán)色當(dāng)標(biāo)準(zhǔn)色、企業(yè)色，如電腦，汽車，影印機(jī)，攝影器材等。藍(lán)色也代表憂郁、愛情，韓國電視劇《藍(lán)色生死戀》就是用藍(lán)色來表述情感。藍(lán)色和白色搭配的網(wǎng)頁，能體現(xiàn)柔順，淡雅，浪漫的氣氛，象天空的色彩。高對比度的藍(lán)色凝造出整潔、輕快感，低對比度的藍(lán)色具有現(xiàn)代都市氣派。（6）紫色。紫色是最消極的色彩，給人以神秘感、壓迫感，通常代表尊貴、高尚。并且因?qū)Ρ鹊牟煌?，時而富有威脅性，時而又富有鼓舞性。由于具有強(qiáng)烈的女性化性格，在網(wǎng)頁設(shè)計中，紫色也受到相當(dāng)?shù)南拗?，除了和女性有關(guān)的商品或企業(yè)形象之外，其他類型的網(wǎng)頁很少采用紫色為主色。女性站點(diǎn)通常用清澈的紫紅色（粉紅色），在白色背景下優(yōu)美、柔和，顯示出無限魅力。白色、粉紅色、天藍(lán)色的搭配是最受少女歡迎的配色方案。暗色調(diào)的紫色體現(xiàn)成熟感，藍(lán)紫色則體現(xiàn)孤獨(dú)感。（7）白色。白色具有潔白、明快、純真、清潔的感受。白色的沉默寓意有無盡的可能性，但有時也給人一種恐懼和悲哀的感受。白色具有高級，科技的意象，是永遠(yuǎn)的流行色彩，可以和任何顏色作搭配。白色和黑色的搭配的網(wǎng)頁很都市化，還有一種特殊的嚴(yán)肅感。純白色會帶給別人寒冷，嚴(yán)峻的感覺，所以在使用白色時，可以摻一些其它的色彩，如象牙白、米白、乳白、蘋果白等。（8）黑色。黑色具有深沉、神秘、寂靜、悲哀、壓抑的感受。黑色給人沉默、虛空感，但有時會體現(xiàn)一種莊嚴(yán)肅穆感。黑色具有高貴、穩(wěn)重、科技的意象，許多科技產(chǎn)品如轎車、電視音響、攝影器材，大多采用黑色。黑色莊嚴(yán)的意象，也常用在一些特殊場合作為空間設(shè)計，黑色是一種永遠(yuǎn)流行的色彩，適合和許多色彩作搭配。黑色在現(xiàn)代又被賦予Cool的含義，很多時尚站點(diǎn)與游戲站點(diǎn)都大面積的運(yùn)用黑色來體現(xiàn)時代感。（9）灰色?；疑哂兄杏?、平凡、溫和、謙讓、中立和高雅的感覺?；疑珜儆谥虚g性格，男女皆能接受。所以灰色也是永遠(yuǎn)流行的主要顏色?；疑哂腥岷?，高雅的意象，許多的高科技產(chǎn)品都采用灰色來傳達(dá)高級，科技的形象。韓國網(wǎng)頁尤其喜歡利用灰色不同層次的變化組合來搭配其它色彩，使頁面色彩更為整體、協(xié)調(diào)。3．商業(yè)網(wǎng)頁色彩設(shè)計的配制方法1）網(wǎng)頁色彩的組成網(wǎng)頁色彩由主顏色、副顏色、點(diǎn)綴色組成。主顏色是網(wǎng)頁的主要顏色，起到在顯示網(wǎng)頁整體基調(diào)和風(fēng)格的作用，通常不超過２種顏色。副顏色在網(wǎng)頁中輔助主顏色的次要顏色，通常為１－３種顏色。點(diǎn)綴色在網(wǎng)頁中用于突出、強(qiáng)調(diào)顯示，主要用于Logo、范圍較小的按鈕、標(biāo)簽等，通常為１-2種顏色。2）主顏色的配色主顏色是整個網(wǎng)頁的基調(diào)色，是網(wǎng)頁色彩設(shè)計的關(guān)鍵顏色。配制主顏色的方法有如下幾種：（1）用色彩的意象來配制主顏色。譬如要為一家果園開發(fā)網(wǎng)站，可以選綠色或橙色。綠色有生長、希望的意象，又是大自然色，果樹都是綠色的。而橙色寓意果實累累，豐收的景象。（2）用行業(yè)色來配制主顏色。每個行業(yè)都有它自己的標(biāo)準(zhǔn)色，比如IT行業(yè)總是用藍(lán)色來表現(xiàn)，而醫(yī)藥行業(yè)總是用綠色來表現(xiàn)。因此IT行業(yè)的網(wǎng)站主顏色可以用藍(lán)色，醫(yī)藥行業(yè)的網(wǎng)站主顏色可以用綠色。（3）用商品色來配制主顏色。所謂“商品色”是指某些或某類商品在消費(fèi)者的心目中已經(jīng)形成的、固定不變的色彩形象。在長期的廣告宣傳作用下，某些商品的包裝、色彩等外觀形態(tài)已經(jīng)與商品的內(nèi)在特性融為一體，成為不可分離的基本特征。比如為上島咖啡設(shè)計網(wǎng)頁，就可以采用咖啡的褐色調(diào)子作為主顏色。（4）用瀏覽者的偏愛來配制主顏色。每種網(wǎng)頁都有自己不同的受眾群，不同的瀏覽者對色彩的喜好大相徑庭。比如針對兒童的網(wǎng)站主顏色可采用鮮艷、活潑的粉紅或粉藍(lán)，而為白領(lǐng)女性服務(wù)的網(wǎng)頁，可采用各種高級灰色作為主顏色。（5）用流行色來配制主顏色。設(shè)計流行元素的站點(diǎn)，可以參照本年度的流行色進(jìn)行配色，使網(wǎng)頁配色前衛(wèi)、時尚。3）副顏色的配色副顏色的配色主要是主顏色與副顏色所形成的對比關(guān)系，可以有明度對比、色相對比、純度對比、冷暖對比。（1）明度對比。明度對比是指主顏色與副顏色因明度差別而形成的色彩對比。色彩的層次、立體感、空間關(guān)系，主要靠色彩的明度對比來實現(xiàn)，由于明度傾向和明度對比程度不同，會形成高調(diào)、中調(diào)、低調(diào)。高明度基調(diào)情快、活潑、柔軟、輝煌。色相的明度提高后，色彩的明度和色相的對比相對降低，產(chǎn)生了統(tǒng)一的感覺，整體色調(diào)明快柔和，但要注意其明度差，以造成一定的節(jié)奏感。中明度基調(diào)剛強(qiáng)、有力量、豐富感。明度差距小，給人以含蓄厚重的感覺，為了避免過分軟弱無力，可在色相和純度上略加變化。低調(diào)樸素、豐富、宏大，有寂寞感。單獨(dú)的明度對比調(diào)和的頁面它有一個很顯著的缺點(diǎn)，畫面沉悶，因此明度對比調(diào)和在很多情況下是不單獨(dú)存在的，它往往需要結(jié)合其他的調(diào)和方式，作為一種輔助的調(diào)和方式存在。如果以明度對比調(diào)和作為主要調(diào)和方式的頁面需要在其他的輔助色的用色上多多考慮，用輔助色打破沉悶的感覺。明度對比強(qiáng)時，給人的感覺是光感強(qiáng)，體感也強(qiáng)，頁面的清晰度高，明度對比弱時，給人的感覺是光感弱，體感也弱，頁面不清晰，不易看清楚．如果明度對比太強(qiáng)，則會給人生硬、空洞、簡單化的感覺。（2）色相對比。色相對比是指主顏色與副顏色因色相差別而形成的色彩對比。各色相由于在色相環(huán)上的距離不同而形成不同的色相比，形成同類色、類似色、對比色、互補(bǔ)色。同類色配色。主顏色與副顏色是同類色的關(guān)系，總體上會給人一種安靜、協(xié)調(diào)、整齊的感覺。同一色相里不同明度與純度色彩的對比，色相感顯得單純、柔和、高稚、文靜。類似色配色。主顏色與副顏色是類似色的關(guān)系，色相雖不同，但仍屬接近，頁面色彩和諧、統(tǒng)一，更蘊(yùn)含變化的效果。此種配色亦可搭配白色，使畫面更明亮；或以灰色搭配，讓圖面較柔和；或用黑色來增加厚實感。兩個類似色對比調(diào)和要注意與無彩色相結(jié)合，即黑和白，這樣的頁面會比較干凈、大眾化，是門戶網(wǎng)站用色方式的較好選擇。用類似色的色相可表現(xiàn)出細(xì)微不同的感覺，為了避免單調(diào)，在配色時應(yīng)注意選擇具有明確色相的色彩組合，并合理調(diào)整其間的明度差。對比色配色。主顏色與副顏色是對比色的關(guān)系，使頁面色彩感鮮明、強(qiáng)烈、飽滿、豐富，凝造出的是一種強(qiáng)弱分明的氛圍。影響這種配色方案效果的最大因素在于所選的顏色在整體畫面中所占的比例。由于色彩感覺較強(qiáng)烈，可加入無彩色緩和，以增加調(diào)和與統(tǒng)一之感。運(yùn)用對比色相間的組合，易產(chǎn)生生動活潑的感覺，但有時會缺少調(diào)和感，在具體配色時可根據(jù)情況利用明度和純度的變化進(jìn)行調(diào)和?；パa(bǔ)色配色。主顏色與副顏色是互補(bǔ)色的關(guān)系，使頁面色彩感完整、豐富、富有激情，呈現(xiàn)強(qiáng)烈的相互輝映的視覺效果，如紅色與綠色、黃色與青色、橙色與紫色成對組合在一起配色時，具有很強(qiáng)烈的視覺沖擊力。由于補(bǔ)色的對抗較強(qiáng)，在具體配色時，常常通過改變對比雙方的面積比，或通過中間色過渡，或以黑、白、灰、光澤色來間隔，加強(qiáng)其統(tǒng)一的因素。兩個補(bǔ)色對比調(diào)非常的