網(wǎng)頁美工電子教案（課堂PPT）

1、1河南林業(yè)職業(yè)學(xué)院河南林業(yè)職業(yè)學(xué)院網(wǎng)頁美工網(wǎng)頁美工教師：潘慧芝電話mail:2第第1 1章章網(wǎng)頁美工概述 1.1網(wǎng)絡(luò)發(fā)展歷程 1.2傳統(tǒng)美工與網(wǎng)頁美工 1.2.11.2.1傳統(tǒng)美工傳統(tǒng)美工 分為賣場(chǎng)美工（手繪廣告POP,POINT OF PURCHASE），游戲美工（游戲人物設(shè)定），影樓美工（婚紗照后期制作）1.2.21.2.2網(wǎng)頁美工網(wǎng)頁美工 顧名思義，就是美化網(wǎng)站的視覺效果，更深層次的就是突出網(wǎng)站本身的內(nèi)涵。比如簡(jiǎn)潔，干練，或者有活力。 3手繪廣告游戲人物設(shè)定婚紗照后期制作41.3網(wǎng)頁美工需要具備的能力 網(wǎng)頁設(shè)計(jì)也是平面設(shè)計(jì)的一方面，網(wǎng)頁設(shè)計(jì)師完全可以運(yùn)用平面設(shè)計(jì)

2、中的審美觀點(diǎn)進(jìn)行設(shè)計(jì)，二者唯一不同的是動(dòng)態(tài)與靜態(tài)的區(qū)分，動(dòng)態(tài)網(wǎng)頁的制作是平面設(shè)計(jì)不能完全達(dá)到的，它是一種審美方式的延伸。所以平面設(shè)計(jì)的審美觀點(diǎn)在網(wǎng)頁設(shè)計(jì)上非常實(shí)用，如對(duì)比、均衡、重復(fù)、比例、近似、漸變以及節(jié)奏美、韻律美，這些都能在網(wǎng)頁上顯示出來，反映設(shè)計(jì)師超凡的審美能力。網(wǎng)頁美工設(shè)計(jì)作品51、網(wǎng) 網(wǎng)絡(luò)，設(shè)計(jì)者要對(duì)網(wǎng)絡(luò)上的東西有一定的了解（如做什么樣的網(wǎng)站，同行業(yè)的網(wǎng)頁怎么樣等），以做到知已知彼，否則設(shè)計(jì)者的作品就沒有衡量的標(biāo)準(zhǔn)了。2、頁頁面：就是設(shè)計(jì)者的排版水平。3、美美術(shù)，審美觀，這就要設(shè)計(jì)者對(duì)色彩，尤其是對(duì)色彩搭配有獨(dú)到的見解。4、工工具，干什么活都要有好的工具。在此意為所用到的軟件，Ph

3、otoshop, flash,fireworks,dreamweaver,3DMAX 等。（MAYA） 1.3網(wǎng)頁美工需要具備的能力 6第第3 3章章 網(wǎng)頁色彩搭配網(wǎng)頁色彩搭配3.13.1色彩構(gòu)成原理色彩構(gòu)成原理3.1.1色彩形成：光源的照射，物體本身反射一定的色彩，環(huán)境與空間對(duì)物體色彩的影響。3.1.2色彩組成1.基本色:一個(gè)色環(huán)通常包括12種明顯不同的顏色。 2.三原色:三原色是能夠按照一些數(shù)量規(guī)定合成其他任何一種顏色的基色。紅、黃、藍(lán)三原色也可以構(gòu)成網(wǎng)頁色彩 （圖3-2 ） 3.近似色:是色相環(huán)中相類似的顏色 （圖3-3）4.補(bǔ)色:是色環(huán)中的直接位置相對(duì)的顏色（圖3-4） 5.暖色:由紅

4、色調(diào)組成。（圖3-5）6.冷色 :來自于藍(lán)色色調(diào)。 （圖3-6） 73.13色彩對(duì)比 兩種以上的色彩，以空間或時(shí)間關(guān)系相比較，表現(xiàn)出明顯的差別，并產(chǎn)生比較作用，被稱為色彩對(duì)比。1.色相對(duì)比 因色相之間的差別形成對(duì)比。當(dāng)主色相確定后，必須考慮其他色彩與主色相是什么關(guān)系，要表現(xiàn)什么內(nèi)容及效果等，這樣才能增強(qiáng)其表現(xiàn)力。 2.明度對(duì)比 因明度之間的差別形成的對(duì)比。（檸檬黃明度高，藍(lán)紫色的明度低，橙色和綠色屬中明度，紅色與藍(lán)色屬中低明度）。 3.純度對(duì)比 一種顏色與另一種更鮮艷的顏色相比時(shí)，會(huì)感覺不太鮮明，但與不鮮艷的顏色相比時(shí)，則顯得鮮明，這種色彩的對(duì)比便稱為純度對(duì)比。 83.23.2網(wǎng)頁配色的原理網(wǎng)

5、頁配色的原理 網(wǎng)頁中的色彩是人們對(duì)網(wǎng)站最直觀的了解方式之一，也是網(wǎng)站統(tǒng)一風(fēng)格設(shè)計(jì)的主要組成部分。蕓蕓眾網(wǎng)站中，讓瀏覽者記得的三兩個(gè)站點(diǎn)，最深刻的就是網(wǎng)站的色彩，其中包括里面的色彩系列，色彩配合元素，整體色彩氛圍等等。3.2.13.2.1色彩的基本知識(shí)色彩的基本知識(shí) 任何色彩，皆具備三個(gè)基本的重要性質(zhì)：色度，明度，純度，一般稱為色彩三要素或色彩三屬性。1.色相(Hue) 又叫色名（Hue，簡(jiǎn)稱為；或譯為色相）是區(qū)分色彩的名稱，也就是色彩的名字，就如同人的姓名一般，用來辨別不同的人。2.明度(Value) 明度（Value簡(jiǎn)稱）光線強(qiáng)時(shí)，感覺比較亮，光線弱時(shí)感覺比較暗，色彩的明暗強(qiáng)度就是所謂的明度

6、，明度高是指色彩較明亮，而相對(duì)的明度低，就是色彩較灰暗。 93.純度(Chroma) 又叫彩度（Chroma，簡(jiǎn)稱）是指色彩的純度，通常以某彩色的純度所占的比例，來分辨彩度的高低，純色比例高為彩度高，純色比例低為彩度低，在色彩鮮艷狀況下，通常很容易感覺高彩度，但有時(shí)不易作出正確的判斷，因?yàn)槿菀资艿矫鞫鹊糜绊?，譬如人們最容易誤會(huì)的是，黑白灰是屬於無彩度的，他們只有明度。 4.色環(huán) 每個(gè)色彩模式都包含了一組三原色，然后經(jīng)由這一組三原色的相互混合而產(chǎn)生不同的顏色。在傳統(tǒng)色彩學(xué)中，三原色指的是藍(lán)、紅、黃；而在RGB色彩模式中，色光的三原色是指紅、綠、藍(lán)。任何兩個(gè)色光的組合會(huì)產(chǎn)生一組次顏色。三次色則是混

7、合了原色與次色，或者是混合兩種次原色所產(chǎn)生。通常用色環(huán)來呈現(xiàn)顏色的邏輯性?？梢詮南聢D中看出，RGB的色環(huán)和傳統(tǒng)藝術(shù)家們所使用的色環(huán)是很不一樣的。 10色素混合效果 色光混合效果 113.2.23.2.2處理顏色的方法處理顏色的方法 理論上，處理顏色的方法通常有兩種： 1、加色法，混合不同顏色的光波以形成白光； 2、減色法，使用顏料來減少光波。傳統(tǒng)的藝術(shù)家所使用的色盤和打印時(shí)使用的CMYK系統(tǒng)都是減色法模式。在網(wǎng)站上，人們所面對(duì)的是光的投射，而不是從物體上反射回來的光，所以使用的是加色法模式，也就是上面提到的RGB。 123.2.33.2.3色彩的印象色彩的印象 當(dāng)看到色彩時(shí)，除了會(huì)感覺其物理方

8、面的影響，心里也會(huì)立即產(chǎn)生相應(yīng)的感覺，這種感覺一般難以用言語形容，人們稱之為印象，也就是色彩印象。如果有一個(gè)能夠合理客觀地分析出這種感覺差異的標(biāo)準(zhǔn)，那么就可以利用它說明這種感覺上的差異了。 131.紅色的色彩印象 （3-18） 紅色是強(qiáng)有力的色彩，是熱烈、沖動(dòng)的色彩，容易引起注意，所以在各種媒體中也被廣泛的利用，除了具有較佳的明視效果之外，更被用來傳達(dá)有活力、積極、熱誠(chéng)、溫暖、前進(jìn)等涵義的企業(yè)形象與精神，另外紅色也常用來作為警告、危險(xiǎn)、禁止、防火等標(biāo)示用色 。2.橙色的色彩印象 （3-19） 橙色的波長(zhǎng)僅次于紅色，因此它也具有長(zhǎng)波長(zhǎng)導(dǎo)致的特征。是十分活潑的光輝色彩，是暖色系中最溫暖的色彩 。3

9、.黃色的色彩印象（3-20） 黃色是亮度最高的色，在高明度下能夠保持很強(qiáng)的純度。 144.綠色的色彩印象 （3-21） 綠色在黃色和藍(lán)色（冷暖）之間，屬于較中庸的顏色，這樣使得綠色的性格最為平和、安穩(wěn)、大度、寬容。是一種柔順、恬靜、滿足、優(yōu)美、受歡迎之色。也是網(wǎng)頁中使用最為廣泛的顏色之一。5.藍(lán)色的色彩印象 （3-22） 由于藍(lán)色沉穩(wěn)的特性，具有理智，準(zhǔn)確的印象，在設(shè)計(jì)中，強(qiáng)調(diào)科技，效率的商品或企業(yè)形象，大多選用藍(lán)色作為標(biāo)準(zhǔn)色。6.紫色的色彩印象 （3-23） 紫色由于具有強(qiáng)烈的女性化性格，在設(shè)計(jì)用色中，紫色也受到相當(dāng)?shù)南拗?，除了和女性有關(guān)的商品或企業(yè)形象之外，其他類的設(shè)計(jì)不常采用為主色。7.

10、褐色的色彩印象 （3-24） 在設(shè)計(jì)上，褐色通常用來表現(xiàn)原始材料的質(zhì)感，如麻、木材、竹片、軟木等，或用來傳達(dá)某些飲品原料的色澤及味感，如咖啡、茶、麥類等，或強(qiáng)調(diào)格調(diào)古典優(yōu)雅的企業(yè)或商品形象。 158.灰色的色彩印象 （3-25） 灰色介于黑色和白色之間，中性色、中等明度，可以是無色彩或極低色彩的顏色?；疑軌蛭掌渌实幕盍?，削弱色彩的對(duì)立面，而制造出融合的作用。9.黑色與白色的色彩印象 （3-26） 在設(shè)計(jì)中，白色具有高級(jí)、科技的印象，通常需和其它色彩搭配使用，純白色會(huì)帶給別人寒冷、嚴(yán)峻的感覺，所以在使用白色時(shí)，都會(huì)摻一些其它的色彩，如象牙白、米白、乳白、蘋果白，在生活用品、服飾用色上，白

11、色是永遠(yuǎn)流行的主要色，可以和任何顏色作搭配。 163.2.43.2.4色彩的調(diào)和色彩的調(diào)和 所謂色彩調(diào)和，即用兩種或多種顏色互相調(diào)和生成新色彩的方法，因?yàn)檎{(diào)和的形式不同，色彩調(diào)和又分為加色法調(diào)和、減色法調(diào)和和中性調(diào)和三類。1加色法調(diào)和 加色法調(diào)和是指色光的調(diào)和形式。兩種以上的色光調(diào)和在一起時(shí)就決定了明度的提升，調(diào)和色的總亮度相當(dāng)于參加調(diào)和各色明度之和。 2減色法調(diào)和 減色法調(diào)和指色素的調(diào)和形式。色素調(diào)和造成使明度降低的減光現(xiàn)象，故稱“減色法調(diào)和”。減色調(diào)和有色料調(diào)和和疊色調(diào)和兩種調(diào)色方法 173空間調(diào)和 所謂空間調(diào)和，即在一定距離內(nèi)，通過人的眼睛自動(dòng)感應(yīng)能夠把兩種以上的并置色彩同化為新色彩的調(diào)

12、和方法。空間調(diào)和有三大特點(diǎn)： 近看色彩豐富，遠(yuǎn)看色調(diào)統(tǒng)一。在不同視覺距離中，可以看到不同的色彩效果； 色彩有顫動(dòng)感、閃爍感，適于表現(xiàn)光感，印象派畫家貫用這種手法； 如果變化各種色彩的比例，少套色可以得到多套色的效果，電子分色印刷就是利用這種原理。 183.2.53.2.5色彩的對(duì)比色彩的對(duì)比 運(yùn)用各種色彩同時(shí)對(duì)比的能力產(chǎn)生于敏感的色彩視覺。色彩反應(yīng)遲鈍的人往往難以發(fā)現(xiàn)同時(shí)色彩對(duì)比現(xiàn)象。由于參加對(duì)比的色彩結(jié)構(gòu)不同，所以，構(gòu)成不同的色彩同時(shí)對(duì)比結(jié)果，其中最鮮明的同時(shí)對(duì)比是互補(bǔ)色對(duì)比。 如圖所示，從繪畫色彩結(jié)構(gòu)看，補(bǔ)色對(duì)比如果運(yùn)用得準(zhǔn)確，便形成既生動(dòng)又穩(wěn)定的色彩結(jié)構(gòu)，表現(xiàn)出人的完整的色彩本質(zhì)需要 1

13、93.2.6 3.2.6 色調(diào)的變化色調(diào)的變化 色調(diào)傾向大致可歸納成鮮色調(diào)、灰色調(diào)、淺色調(diào)、深色調(diào)、中色調(diào)等。 鮮色調(diào) 深色調(diào)203.33.3網(wǎng)頁色彩心理網(wǎng)頁色彩心理 網(wǎng)頁色彩心理主要包括以下幾個(gè)方面：1.色彩的心理效應(yīng) 色彩的直接心理效應(yīng)來自色彩的物理光刺激對(duì)人的生理發(fā)生的直接影響。(觀察圖形-38，3-39，體驗(yàn)色彩的心理效果，如冷暖，輕重，明快與憂郁，興奮與沉靜，華麗與樸素，舒適與疲勞，積極與消極等) 2.色彩與聯(lián)想（圖形-40-43） 當(dāng)人們看顏色的時(shí)候，常常回憶過去的經(jīng)歷，不由自主地把色彩與這些經(jīng)歷相聯(lián)系.根據(jù)色彩的刺激想起與它有關(guān)的事物稱為色彩聯(lián)想。3.色彩與象征 隨著色彩聯(lián)想的社

14、會(huì)化，色彩日益成為某種含義的象征。人們的聯(lián)想內(nèi)容也隨之具體事物為抽象、情緒等意境。色彩成為具有普遍意義的某種象征后，便會(huì)給人相同的印像。 214.色彩與記憶 色彩記憶是大腦對(duì)過去視覺經(jīng)驗(yàn)中發(fā)生過的色彩的反映。色彩刺激作用停止以后，它的影響并不立刻消失，可以形成視覺后像，這種視覺后像是最直接的原始記憶，帶有具體形象性的色彩可以長(zhǎng)期保留在記憶中。 色彩單純的網(wǎng)頁 22網(wǎng)頁配色的原理n網(wǎng)頁中的色彩是最直觀的了解方式之一n是網(wǎng)站統(tǒng)一風(fēng)格設(shè)計(jì)的重要組成部分n網(wǎng)站的色彩往往給人留下深刻的印象，包括網(wǎng)站的色彩系列，色彩配合元素，整體色彩氛圍。n舉例：電影：英雄，臥虎藏龍233.4網(wǎng)頁常用配色分析網(wǎng)頁常用配色

15、分析3.4.1 網(wǎng)頁最常用流行色藍(lán)色藍(lán)天白云，沉靜整潔的顏色。（圖3-47）綠色綠白相間，雅致而有生氣。橙色活潑熱烈，標(biāo)準(zhǔn)商業(yè)色調(diào)。暗紅寧重、嚴(yán)肅、高貴，需要配黑和灰來壓制刺激的紅色.243.4.2 3.4.2 顏色的忌諱顏色的忌諱 忌臟背景與文字內(nèi)容對(duì)比不強(qiáng)烈，灰暗的背景令人沮喪！ 忌純艷麗的純色對(duì)人的刺激太強(qiáng)烈抗議，缺乏內(nèi)涵。 忌跳再好看的顏色，也不能脫離整體。忌花要有一種主色貫穿其中，主色并不是面積最大的顏色，而是最重要，最能揭示和反映主題的顏色，就象領(lǐng)導(dǎo)者一樣，雖然在人數(shù)上居少數(shù)，但起決定作用。 忌粉顏色淺固然顯的干凈，但如果對(duì)比過弱，整得蒼白無力了，就象病夫一樣無可救藥。 藍(lán)色忌純，

16、綠色忌黃，紅色忌艷253.4.3 3.4.3 幾種固定搭配幾種固定搭配 藍(lán)白橙藍(lán)為主調(diào)。白底，藍(lán)標(biāo)題欄，橙色按鈕或ICON做點(diǎn)綴（icon用來指定GIF格式或JPEG格式的小圖標(biāo)或大圖標(biāo)。（圖3-51）綠白蘭綠為主調(diào)。白底，綠標(biāo)題欄，藍(lán)色或橙色按鈕或ICON做點(diǎn)綴。橙白紅橙為主調(diào)。白底，橙標(biāo)題欄，暗紅或桔紅色按鈕或ICON做點(diǎn)綴。暗紅黑暗紅主調(diào)。黑或灰底，暗紅標(biāo)題欄，文字內(nèi)容背景為淺灰色。策劃正確的配色方案時(shí)必須要有一個(gè)判斷標(biāo)準(zhǔn)。網(wǎng)頁設(shè)計(jì)師策劃一個(gè)網(wǎng)站需要經(jīng)過反復(fù)多次的思考，而在決定網(wǎng)頁配色方案時(shí)同樣需要經(jīng)過再三的思量。 262.12.1平面構(gòu)成概述平面構(gòu)成概述 平面構(gòu)成是設(shè)計(jì)的基礎(chǔ)，平面構(gòu)成

17、主要是運(yùn)用點(diǎn)、線、面和律動(dòng)組成結(jié)構(gòu)嚴(yán)謹(jǐn)，富有極強(qiáng)的抽象性和形式感。又具有多方面的實(shí)用特點(diǎn)和創(chuàng)造力的設(shè)計(jì)作品，與具象表現(xiàn)形式相比較，它更具有廣泛性。是在實(shí)際設(shè)計(jì)運(yùn)用之前必須要學(xué)會(huì)運(yùn)用的視覺藝術(shù)語言，進(jìn)行視覺方面的創(chuàng)造，了解造型觀念，訓(xùn)練培養(yǎng)各種熟練的構(gòu)成技巧和表現(xiàn)方法，培養(yǎng)審美觀及美的修養(yǎng)和感覺，提高創(chuàng)作活動(dòng)和造型能力，活躍構(gòu)思。 第第2 2章章 網(wǎng)頁平面構(gòu)成網(wǎng)頁平面構(gòu)成271布局要新穎布局要新穎 所謂布局是指界面的平面分布安排，即將復(fù)雜的內(nèi)容進(jìn)行條理化、次序化的編輯處理，將其組織成一個(gè)結(jié)構(gòu)合理、版塊搭配適度的頁面。其中新穎的形式感非常重要，要根據(jù)不同的內(nèi)容特點(diǎn)來決定版面的最終形式感。雖不能說牽

18、一發(fā)而動(dòng)全身，但減之一分則少，增之一分則多的版面處理。2.2.1網(wǎng)頁平面構(gòu)成設(shè)計(jì)中的3個(gè)方面28 2 2對(duì)比要強(qiáng)烈對(duì)比要強(qiáng)烈 加強(qiáng)頁面的對(duì)比因素 是吸引人們的關(guān)注的有效手段，頁面上的各種文字、圖片在設(shè)計(jì)時(shí)就應(yīng)構(gòu)思好相互之間的對(duì)比關(guān)系。要大小參差變化，疏密襯托有致，輕重感覺均衡，明暗對(duì)比適度，設(shè)計(jì)上別具一格。這些因素對(duì)網(wǎng)頁設(shè)計(jì)的成功與失敗起著至關(guān)重要的作用 293變化又統(tǒng)一對(duì)版面外形的選擇應(yīng)遵守變化統(tǒng)一的設(shè)計(jì)原則，既不刻意追求外形的變化，使版面分割繁瑣凌亂；又不簡(jiǎn)單劃分版面界限，使得頁面顯得單一刻板。所謂萬變不離其宗，反復(fù)的比較、精心的安排、整體的權(quán)重是設(shè)計(jì)好網(wǎng)頁的基本要求，同時(shí)也是網(wǎng)頁設(shè)計(jì)的最

19、終選擇 301大小的對(duì)比大小的對(duì)比 大小關(guān)系為造形要素中最受重視的一項(xiàng)，幾乎可以決定意象與調(diào)和的關(guān)系。大小的差別少，給人的感覺較沉著溫和；大小的差別大，給人的感覺較鮮明，而且具有強(qiáng)力感 2.2.22.2.2構(gòu)成形式在網(wǎng)頁設(shè)計(jì)中的運(yùn)用構(gòu)成形式在網(wǎng)頁設(shè)計(jì)中的運(yùn)用312.明暗的對(duì)比明暗的對(duì)比 陰與陽、正與反、晝與夜等等，如此類的對(duì)比語句，可使人感覺到日常生活中的明暗關(guān)系。初生的嬰兒，最初在視覺上只能分出明暗，而牛、狗等動(dòng)物雖能簡(jiǎn)單識(shí)別黑白，對(duì)彩度或色相卻無法輕易識(shí)別，由此可知，明暗（黑和白）乃是色感中最基本的要素 323.粗細(xì)的對(duì)比粗細(xì)的對(duì)比 字體愈粗，愈富有男性的氣概。若代表時(shí)尚與女性，則通常以細(xì)

20、字表現(xiàn)。細(xì)字如果份量增多，粗字就應(yīng)該減少，這樣的搭配看起來比較明快。334.曲線和直線的對(duì)比曲線和直線的對(duì)比 曲線很富有柔和感、緩和感；直線則富堅(jiān)硬感、銳利感，極具男性氣概。自然界中，皆由這兩者適當(dāng)混合。平常人們并不注意這種關(guān)系，可是，當(dāng)曲線或直線強(qiáng)調(diào)某形狀時(shí)，人們便有了深刻的印象，同時(shí)也產(chǎn)生相對(duì)應(yīng)的情感。所以人們常常為加深曲線印象，而以一些直線來強(qiáng)調(diào)，也可以說，少量的直線會(huì)使曲線更引人注目。如圖2-20和2-21所示，分別是曲線性格為主和直線性格為主的網(wǎng)頁設(shè)計(jì)。345.質(zhì)感的對(duì)比質(zhì)感的對(duì)比 在一般人的日常生活中，也許很少聽到質(zhì)感這句話，但是在美術(shù)方面，質(zhì)感卻是很重要的造型要素。譬如松弛感、平

21、滑感、濕潤(rùn)感等等，皆是形容質(zhì)感。故質(zhì)感不僅只表現(xiàn)出情感，而且與這種情感融為一體。 通常畫家的作品，常會(huì)注意其色彩與圖面的構(gòu)成，其實(shí)，質(zhì)感才是決定作品風(fēng)格的主要因素，雖然色彩或?qū)ο笪飼?huì)改變，可是，作為基礎(chǔ)的質(zhì)感，是與一位畫家之本質(zhì)有著密切的關(guān)系，是不易變更的。若是外行人就容易疏忽這一點(diǎn)，其實(shí)，這才是最重要的基礎(chǔ)要素，也是對(duì)情感最強(qiáng)烈的影響力。35水墨質(zhì)感金屬質(zhì)感36厚樸感清新質(zhì)感376.位置的對(duì)比位置的對(duì)比 在畫面兩側(cè)放置某種物體，不但可以強(qiáng)調(diào)，同時(shí)也可產(chǎn)生對(duì)比。畫面的上下、左右和對(duì)角線上的四隅皆有潛在性的力點(diǎn)，而在此力點(diǎn)處配置照片、大標(biāo)題或標(biāo)志、記號(hào)等等，便可顯出隱藏的力量。因此在潛在的對(duì)立關(guān)

22、系位置上，放置鮮明的造形要素，可顯示出對(duì)比關(guān)系，并產(chǎn)生具有緊湊感的畫面。如下圖所示，畫面主體在不同位置的對(duì)比構(gòu)成。3839 7.7.主與從的對(duì)比主與從的對(duì)比 版面設(shè)計(jì)也和舞臺(tái)設(shè)計(jì)一樣，主角和配角的關(guān)系很清楚時(shí)，觀眾的心理會(huì)安定下來。明確表示主從的手法是很正統(tǒng)的構(gòu)成方法，會(huì)讓人產(chǎn)生安心感。如果兩者的關(guān)系模糊，會(huì)令人無所適從，相反，主角過強(qiáng)就失去動(dòng)感，變成庸俗畫面。 戲劇中的主角，人人一看便知。版面中若也能表現(xiàn)出何者為主角，會(huì)使讀者更加了解內(nèi)容。所以主從關(guān)系是設(shè)計(jì)配置的基本條件。如下圖所示畫面（文字）主從分明的網(wǎng)頁構(gòu)成。4041 8.動(dòng)與靜的對(duì)比動(dòng)與靜的對(duì)比 一個(gè)故事都有開端、發(fā)展、高潮、轉(zhuǎn)變和結(jié)

23、果。一座庭院有假山、池水、草木瀑布等等的配合。同樣的在網(wǎng)頁設(shè)計(jì)配置上也有激烈的動(dòng)態(tài)與靜態(tài)對(duì)比。 擴(kuò)散或流動(dòng)的形狀即為“動(dòng)”。水平或垂直性的形狀則為“靜”。把這兩者配置于相對(duì)之處，而以“動(dòng)”部分占大面積，“靜”部分占小面積，并在周邊留出適當(dāng)?shù)牧舭滓詮?qiáng)調(diào)其獨(dú)立性。這樣的安排，一般用來配置于畫面四隅的重點(diǎn)。因此，“靜”部份雖只占小面積，卻有很強(qiáng)的存在感。如下圖所示，充滿動(dòng)感的頁面、靜止的頁面、動(dòng)靜結(jié)合的頁面對(duì)比效果。4243 9多重對(duì)比多重對(duì)比 對(duì)比還有曲線與直線、垂直與水平、銳角與鈍角等種種不同的對(duì)比。如果再將前述的各種對(duì)比和這些要素加以組合搭配，即能制作富有變化的畫面。如下圖所示，包含多重構(gòu)成對(duì)

24、比的網(wǎng)頁。44 10.起與受起與受 版面全體的空間因?yàn)楦鞣N力的關(guān)系，而產(chǎn)生動(dòng)態(tài)，進(jìn)而支配空間。產(chǎn)生動(dòng)態(tài)的形狀和接受這種動(dòng)態(tài)的另一形狀，互相配合著，使空間變化更生動(dòng)。 建造假山庭園時(shí)很注重流水的出口，因?yàn)榱魉某隹谑莿?dòng)感的出發(fā)點(diǎn)，整個(gè)庭園都會(huì)因它而被影響。談到版面構(gòu)成原理也一樣，起點(diǎn)和受點(diǎn)會(huì)彼此呼應(yīng)、協(xié)調(diào)。兩者的距離愈大，效果愈顯著，而且可以利用畫面的兩端。但要特別注意起點(diǎn)和受點(diǎn)的平衡，必須有適當(dāng)?shù)膹?qiáng)弱變化才好，若有一方太軟弱無力就不能引起共鳴。如下圖所示，構(gòu)成中的起與受的呼應(yīng)。4546 11圖與地圖與地 明暗逆轉(zhuǎn)時(shí)，圖與地的關(guān)系就會(huì)互相變換。一般印刷物都是白紙印黑字，白紙稱為地，黑字稱圖。相反

25、的，有時(shí)會(huì)在黑紙上印上反白字的效果，此時(shí)黑底為地，白字則為圖，這是黑白轉(zhuǎn)換的現(xiàn)象。如圖黑底白字的網(wǎng)頁與白底黑字的網(wǎng)頁的對(duì)比效果。47 12.平衡平衡 走路踢到障礙物時(shí)，身體會(huì)因此失去平衡而跌倒，此時(shí)很自然地會(huì)迅速伸出一只手或腳，以便維持身體平衡。根據(jù)這種自然原理，如果人們改變一件好的原作品的各部分的位置，再與原作品比較分析，就能很容易理解平衡感的構(gòu)成原理。如圖平衡的網(wǎng)頁構(gòu)成效果。 4813.對(duì)稱對(duì)稱 以一點(diǎn)為起點(diǎn)，向左右同時(shí)展開的形態(tài)，稱為左右對(duì)稱形，英文名為 symmetry。應(yīng)用對(duì)稱的原理即可發(fā)展出漩渦形等等復(fù)雜狀態(tài)。如下圖對(duì)稱的網(wǎng)頁構(gòu)成。 日常生活中，常見的對(duì)稱事物確實(shí)不少，例如：佛像的

26、配置或神殿的配置等等，對(duì)稱會(huì)顯出高格調(diào)、風(fēng)格化的意象。4914.強(qiáng)調(diào)強(qiáng)調(diào) 同一格調(diào)的版面中，在不影響格調(diào)的條件下，加進(jìn)適當(dāng)?shù)淖兓?，就?huì)產(chǎn)生強(qiáng)調(diào)的效果。強(qiáng)調(diào)打破了版面的單調(diào)感，使版面變得有朝氣、生動(dòng)而富于變化。例如：版面皆為文字編排，看起來索然無味，如果加上插圖或照片，就如一顆石子丟進(jìn)平靜的水面，產(chǎn)生一波一波的漣漪。如圖起強(qiáng)調(diào)作用的圖片、文字。5015.比例比例 希臘美術(shù)的特色為“黃金比”，在設(shè)計(jì)建筑物的長(zhǎng)度、寬度、高度和柱子的型式、位置時(shí)，如果能參照“黃金比”來處理，就能產(chǎn)生希臘特有的建筑風(fēng)格，也能產(chǎn)生穩(wěn)重和適度緊張的視覺效果。長(zhǎng)度比、寬度比、面積比等等比例，能與其它造形要素產(chǎn)生同樣的功能，表

27、現(xiàn)極佳的意象，因此，使用適當(dāng)?shù)谋壤呛苤匾?。通過很有邏輯性的公式換算加上一定的數(shù)學(xué)分析，得到對(duì)網(wǎng)頁設(shè)計(jì)有建設(shè)性的概念指導(dǎo)，從一定程度上說算是一種創(chuàng)新。將其運(yùn)用到網(wǎng)頁設(shè)計(jì)來說，只要記住一個(gè)數(shù)字就可以了：“1.62”。許多設(shè)計(jì)師在設(shè)計(jì)版面的時(shí)候都是隨意制定一下寬度就開始他們的設(shè)計(jì)，往往會(huì)出現(xiàn)設(shè)置的寬度沒有考慮到要表現(xiàn)的內(nèi)容，在后期出現(xiàn)內(nèi)容問題的時(shí)候就很受限制。還有很多開發(fā)人員在實(shí)現(xiàn)頁面的時(shí)候，并沒有完全依靠視覺效果圖來實(shí)現(xiàn)，有時(shí)就大致目測(cè)一下，然后根據(jù)以往經(jīng)驗(yàn)來定制寬度，而這種寬度往往不能很好的適應(yīng)他們的內(nèi)容，所以，這時(shí)候黃金比例的使用就很重要了。515216.韻律感韻律感 具有共通印象的形狀

28、，反復(fù)排列時(shí)，就會(huì)產(chǎn)生韻律感。不一定要用同一形狀的東西，只要具有強(qiáng)烈印象就可以了。三次四次的出現(xiàn)就能產(chǎn)生輕松的韻律感。有時(shí)候，只反復(fù)使用二次具有特征的形狀，就會(huì)產(chǎn)生韻律感。如圖所示頁面具有輕松的韻律感的表現(xiàn)形式。 5317左右的重心 在人的自我感覺上，左右有微妙的相差。如果畫面的右下角有一處吸引力特別強(qiáng)的地方，則在考慮左右平衡時(shí)，如何處理這個(gè)地方就成為關(guān)鍵性問題。 人的視覺對(duì)從左上到右下的流向較為自然。編排文字時(shí)，將右下角留空來編排標(biāo)題與插畫，就會(huì)產(chǎn)生一種很自然的流向。如果把它逆轉(zhuǎn)就會(huì)失去平衡而顯得不自然。這種左右方向的平衡感，可能是和人們慣用右手有點(diǎn)關(guān)系吧！如下圖所示，分別是重心在不同位置的

29、頁面布局效果。 5455 18.18.向心與擴(kuò)散向心與擴(kuò)散 在人們的情感中，總是會(huì)首先意識(shí)事物的中心部份。雖然有時(shí)蠻不在乎地觀察事物，可是，在人們心中，總是想探測(cè)其中心部份，好像只有這樣，才有安全感一般，這就構(gòu)成了視覺的向心。一般而言，向心型看似溫柔，也是一般所喜歡采用的方式，但容易流于平凡。離心型的排版，可以稱為是一種擴(kuò)散型。如圖擴(kuò)散式的網(wǎng)頁構(gòu)成、集中式的網(wǎng)頁構(gòu)成。 5619.JUMP 率率 在版面設(shè)計(jì)上，必須根據(jù)內(nèi)容來決定標(biāo)題的大小。標(biāo)題和正文大小的比率就稱為 Jump 率。Jump 率越大，版面越活潑；Jump 率越小，版面格調(diào)越高。依照這種尺度來衡量，就很容易判斷版面的效果。標(biāo)題與本文

30、字體大小決定后，還要考慮雙方的比例關(guān)系，如何進(jìn)一步來調(diào)整，也是相當(dāng)大的學(xué)問。如下圖所示， JUMP率較低與較高的網(wǎng)頁對(duì)比效果。575820.統(tǒng)一與調(diào)和統(tǒng)一與調(diào)和 如果過分強(qiáng)調(diào)對(duì)比關(guān)系，空間預(yù)留太多或加上太多造型要素時(shí)，容易使畫面產(chǎn)生混亂。要調(diào)和這種現(xiàn)象，最好添加一些共通的造形要素，使畫面產(chǎn)生共通的格調(diào)，具有整體統(tǒng)一與調(diào)和的感覺。 反復(fù)使用同形的事物，能使版面產(chǎn)生調(diào)和感。若把同形的事物配置在一起，便能產(chǎn)生連續(xù)的感覺。兩者相互配合運(yùn)用，能創(chuàng)造出統(tǒng)一與調(diào)和的效果。如下圖所示形式統(tǒng)一的網(wǎng)站，示色調(diào)統(tǒng)一的網(wǎng)站。 59606121.視覺導(dǎo)線視覺導(dǎo)線 依眼睛所視或物體所指的方向，使版面產(chǎn)生導(dǎo)引路線，稱為視覺

31、導(dǎo)線。設(shè)計(jì)家在制作構(gòu)圖時(shí)，常利用導(dǎo)線達(dá)到整體畫面更引人注目的目的。也就是人們常說的“視覺流程”。6222.形態(tài)的意象形態(tài)的意象 一般的編排形式，皆以四角型（角版）為標(biāo)準(zhǔn)形，其它的各種形式都屬于變形。角版的四角皆成直角，給人很規(guī)律，表情少的感覺，其它的變形則呈現(xiàn)形形色色的表情。三角形的編排方式有銳利、鮮明感；近于圓形的編排方式，有溫和、柔弱之感。 相同的曲線，也有不同的表情，例如規(guī)規(guī)矩矩和用儀器畫出來的圓，有硬質(zhì)感；徒手畫出來的圓就有柔和的圓形曲線之美。如圖標(biāo)準(zhǔn)型、曲線形網(wǎng)頁、有手工繪制痕跡的網(wǎng)頁對(duì)比效果。 636423.水平線水平線 黃昏時(shí)，水平線和夕陽融合在一起，黎明時(shí)，燦爛的朝陽由水平線上

32、升起。水平線給人穩(wěn)定和平靜的感受，無論事物的開始或結(jié)束，水平線總是固定的表達(dá)靜止的時(shí)刻。如圖所示，水平方向的網(wǎng)頁有一種穩(wěn)定的效果。 6524.垂直線垂直線 垂直線的活動(dòng)感，正好和水平線相反，垂直線表示向上伸展的活動(dòng)力，具有堅(jiān)硬和理智的意象，使版面顯得冷靜又鮮明。如果不合理的強(qiáng)調(diào)垂直性，就會(huì)變得冷漠僵硬，使人難以接近。垂直方向的網(wǎng)頁有一種挺拔的效果。 將垂直線和水平線作對(duì)比的處理，可以使兩者的表現(xiàn)更生動(dòng)，不但使畫面產(chǎn)生緊湊感，也能避免冷漠僵硬的情況產(chǎn)生，相互取長(zhǎng)補(bǔ)短，使版面更完備。如圖所示，垂直線和水平線作交互使用的網(wǎng)頁效果。 6625.陽晝、陰晝陽晝、陰晝 從黑暗的洞窟內(nèi)，看外面明亮景象時(shí)，洞

33、窟內(nèi)的人物，總是只用輪廓表現(xiàn)，而外面的景色就需小心描畫了。正逆光所形成的形象剪影會(huì)顯出不可思議的空間效果。 正常的明暗狀態(tài)，叫做“陽晝”，相反的情況是“陰晝”。構(gòu)成版面時(shí)，使用這種陽晝和陰晝的明暗關(guān)系，可以描畫出日常感覺不同的新意象。如圖陽晝式的網(wǎng)頁形象、陰晝式的網(wǎng)頁形象對(duì)比效果。676826.留白量留白量 速度很快的說話方式適合夜間新聞的播報(bào)，但不適合做典禮的司儀，原因是每一句話當(dāng)中，留白量太少。談到版面設(shè)計(jì)時(shí)空白量的問題也很重要，即使同一張照片，同樣的句子也會(huì)因留白量的大小而影響表現(xiàn)的形象。無論排版的平衡感有多好，文章有多美，讀者一看版面的留白量就已給它打好分?jǐn)?shù)了。6927.版面率版面率

34、在設(shè)計(jì)用紙上，一個(gè)文檔所使用的排版面積稱為版面，而版面和整頁面積的比例稱為版面率。空白的多寡對(duì)版面的印象，有決定性的影響。如果空白部分加多，就會(huì)使格調(diào)提高，且穩(wěn)定版面；空白較少，就會(huì)使人產(chǎn)生活潑的感覺。若設(shè)計(jì)信息量很豐富的雜志版面時(shí)，采用較多的空白，顯然就不適合。如圖就是兩類不同版面率的網(wǎng)頁。 707128.屏幕上字的大小 多媒體影像通常是在計(jì)算機(jī)影像顯示器（monitor）或在電視機(jī)上呈現(xiàn)。根據(jù)分析，為了視覺的舒適感，呈現(xiàn)在計(jì)算機(jī)影像顯示器上最小且清晰的中文字型應(yīng)為 16 pixels（寬）16 pixels（高）點(diǎn)陣字型的細(xì)明體。當(dāng)使用于不能顯示中文字型名稱的系統(tǒng)時(shí)，會(huì)顯示為MingLiU

35、。至于呈現(xiàn)在電視機(jī)上最小且清晰的中文字型應(yīng)為 36 pixels（W）36 pixels（H）的點(diǎn)陣字型，這是因?yàn)殡娨暀C(jī)需要從較遠(yuǎn)的距離觀看的緣故。從閱讀習(xí)慣來看，為了配合人們橫向閱讀中文的最佳狀態(tài)是，一行最好不要超過 35 個(gè)字。如圖是字體編排合理的網(wǎng)頁。7273第第4 4章章 網(wǎng)頁中的字體設(shè)計(jì)網(wǎng)頁中的字體設(shè)計(jì) 文字，是人類思想感情交流的必然產(chǎn)物。隨著人類文明的進(jìn)步，它由簡(jiǎn)單而復(fù)雜，逐步形成了科學(xué)的完美而規(guī)范化的程式。它既具有人類思想感情的抽象意義與韻調(diào)和音響節(jié)律，又具有結(jié)構(gòu)完整，章法規(guī)范，而又變化無窮的鮮明形象。尤其是象形文字，更是抽象與具象的緊密結(jié)合，其文字的本身，也可說是一種完整的美術(shù)

36、設(shè)計(jì)。1正確正確 不同漢字或拉丁字母的構(gòu)成，筆畫都是法定的，只要有一點(diǎn)筆劃不符，就成別字，輕則字義不同，重則不成其字，無人認(rèn)得，這就完全失去了文字本身的作用。因此字形要做到確切無誤，既不能任意增加筆畫，也不能任意減少或改變，以便保證期信息傳達(dá)功能的準(zhǔn)確性。 4.1字體設(shè)計(jì)原理字體設(shè)計(jì)原理742風(fēng)格要統(tǒng)一 字母漢字，字體筆畫都必須統(tǒng)一。如寫漢字，不宜三筆隸體，二筆仿宋，寫拉丁字母也不宜把楷、小楷、花楷雜組一字，印刷體與手寫體也不能在一字中混合運(yùn)用。3表情要適應(yīng)文字內(nèi)容的精神 每一種字體，都有它自身的表情。選擇某種字體為設(shè)計(jì)美術(shù)字之基調(diào)時(shí)，應(yīng)該按文字內(nèi)容的精神而定。做到表里一致，充分發(fā)揮出文字感染

37、力的最大功能。 754字型勻稱 字與字之間看起來要大小相稱，字的筆畫有繁有簡(jiǎn)，要合理安排。5結(jié)構(gòu)嚴(yán)謹(jǐn) 字的結(jié)構(gòu)要做到多樣統(tǒng)一，均勻穩(wěn)定，疏密有致，變化有序。6對(duì)文字的形象進(jìn)行藝術(shù)處理，以增強(qiáng)文字的傳播效果。 764.2字體與版式設(shè)計(jì)字體與版式設(shè)計(jì) 文字在排版設(shè)計(jì)中，不僅僅局限于信息傳達(dá)意義上的概念，而更是一種高尚的藝術(shù)表現(xiàn)形式。文字已提升到啟迪性和宣傳性、引領(lǐng)人們的審美時(shí)尚的新視角。文字是任何版面的核心，也是視覺傳達(dá)最直接的方式，運(yùn)用經(jīng)過精心處理的文字材料，完全可以制作出效果很好的版面，而不需要任何圖形。1. 字體、字號(hào) 字體的設(shè)計(jì)、選用是排版設(shè)計(jì)的基礎(chǔ)。2.字距與行距 字距與行距的把握是設(shè)計(jì)

38、師對(duì)版面的心理感受，也是設(shè)計(jì)師設(shè)計(jì)品味的直接體現(xiàn)。773. 編排形式 文字的編排形式多種多樣4. 文字編排的特殊表現(xiàn) 文字在版式中扮演著重要的角色，同時(shí)它的形式也是靈活多變的。 784.3網(wǎng)頁中文字顏色的運(yùn)用網(wǎng)頁中文字顏色的運(yùn)用 一般來說，網(wǎng)頁的背景色應(yīng)該柔和一些、素一些、淡一些，再配上深色的文字，使人看起來自然、舒暢。而為了追求醒目的視覺效果，可以為標(biāo)題使用較深的顏色。下面是大家設(shè)計(jì)網(wǎng)頁和瀏覽的網(wǎng)頁時(shí)，對(duì)網(wǎng)頁背景色和文字色彩搭配經(jīng)常采用的色彩，這些顏色可以做正文的底色，也可以做標(biāo)題的底色，再搭配不同的字體 79 網(wǎng)站的整體風(fēng)格及其創(chuàng)意設(shè)計(jì)是站長(zhǎng)們最希望掌握，也是最難以學(xué)習(xí)的。難就難在沒有一個(gè)

39、固定的程式可以參照和模仿。當(dāng)給出一個(gè)主題，任何兩人都不可能設(shè)計(jì)出完全一樣的網(wǎng)站。當(dāng)人們說：“這個(gè)站點(diǎn)很cool，很有個(gè)性！”那么，是什么讓讀者覺得很cool呢？它到底和一般的網(wǎng)站有什么區(qū)別呢？可以從以下幾個(gè)方面討論： 第第5 5章章 網(wǎng)頁設(shè)計(jì)中的排版與布局網(wǎng)頁設(shè)計(jì)中的排版與布局5.1 網(wǎng)頁設(shè)計(jì)風(fēng)格與創(chuàng)意網(wǎng)頁設(shè)計(jì)風(fēng)格與創(chuàng)意5.1.1網(wǎng)站風(fēng)格概述網(wǎng)站風(fēng)格概述 風(fēng)格(style)是抽象的。是指站點(diǎn)的整體形象給瀏覽者的綜合感受。 風(fēng)格是獨(dú)特的，是彼此之間的區(qū)別之一?；蛘呱?，或者技術(shù)，或者是交互方式，能讓瀏覽者明確分辨出網(wǎng)站的獨(dú)有性。 風(fēng)格是有人性的。通過網(wǎng)站的外表、內(nèi)容、文字、交流可以概括出一個(gè)站點(diǎn)

40、的個(gè)性，情緒。 805.1.25.1.2樹立網(wǎng)站風(fēng)格樹立網(wǎng)站風(fēng)格 風(fēng)格(style)是抽象的。是指站點(diǎn)的整體形象給瀏覽者的綜合感受。1.如何樹立網(wǎng)站風(fēng)格 確信風(fēng)格是建立在有價(jià)值內(nèi)容之上的。一個(gè)網(wǎng)站有風(fēng)格而沒有內(nèi)容，就好比繡花枕頭一包草，好比一個(gè)性格傲慢但卻目不識(shí)丁的人。首先必須保證內(nèi)容的質(zhì)量和價(jià)值性。 需要徹底搞清楚希望站點(diǎn)給人的印象是什么。 在明確網(wǎng)站印象后，開始努力建立和加強(qiáng)這種印象 。2.運(yùn)用創(chuàng)意 創(chuàng)意(idea)是網(wǎng)站生存的關(guān)鍵。這一點(diǎn)相信大家都已經(jīng)認(rèn)同。然而作為網(wǎng)頁設(shè)計(jì)師，最苦惱的就是沒有好的創(chuàng)意來源。 81 logo是徽標(biāo)或者商標(biāo)的英文說法，起到對(duì)徽標(biāo)擁有公司的識(shí)別和推廣的作用。網(wǎng)

41、絡(luò)中的徽標(biāo)主要是各個(gè)網(wǎng)站用來與其它網(wǎng)站鏈接的圖形標(biāo)志，代表一個(gè)網(wǎng)站或網(wǎng)站的一個(gè)板塊。5.2.1作用作用 1.LOGO是與其它網(wǎng)站鏈接以及讓其它網(wǎng)站鏈接的標(biāo)志和門戶。 2. LOGO是網(wǎng)站形象的重要體現(xiàn)。 3. LOGO能使大眾便于選擇。5.2網(wǎng)頁網(wǎng)頁Logo設(shè)計(jì)設(shè)計(jì)825.2.2國(guó)際規(guī)范國(guó)際規(guī)范為了便于INTERNET上信息的傳播，一個(gè)統(tǒng)一的LOGO國(guó)際標(biāo)準(zhǔn)是需要的。實(shí)際上已經(jīng)有了這樣的一整套標(biāo)準(zhǔn)。其中關(guān)于網(wǎng)站的LOGO，目前有三種規(guī)格： 1. 88*31這是互聯(lián)網(wǎng)上最普遍的LOGO規(guī)格.2. 120*60 這種規(guī)格用于一般大小的LOGO。 3. 120*90 這種規(guī)格用于大型LOGO。 83

42、5.2.35.2.3設(shè)計(jì)流程設(shè)計(jì)流程1.調(diào)研分析 標(biāo)志不僅僅是一個(gè)圖形或文字的組合，它是依據(jù)企業(yè)的構(gòu)成結(jié)構(gòu)、行業(yè)類別、經(jīng)營(yíng)理念，并充分考慮標(biāo)志接觸的對(duì)象和應(yīng)用環(huán)境，為企業(yè)制定的標(biāo)準(zhǔn)視覺符號(hào)。 2.要素挖掘 要素挖掘是為設(shè)計(jì)開發(fā)工作做進(jìn)一步的準(zhǔn)備。3.設(shè)計(jì)開發(fā) 有了對(duì)企業(yè)的全面了解和對(duì)設(shè)計(jì)要素的充分掌握，可以從不同的角度和方向進(jìn)行設(shè)計(jì)開發(fā)工作。4.標(biāo)志修正 提案階段確定的標(biāo)志，可能在細(xì)節(jié)上還不太完善，人們經(jīng)過對(duì)標(biāo)志的標(biāo)準(zhǔn)制圖、大小修正、黑白應(yīng)用、線條應(yīng)用等不同表現(xiàn)形式的修正，使標(biāo)志使用使更加規(guī)范，同時(shí)標(biāo)志的特點(diǎn)、結(jié)構(gòu)在不同環(huán)境下使用時(shí)，也不會(huì)喪失，達(dá)到統(tǒng)一、有序、規(guī)范的傳播。 845.2.45.

43、2.4制作工具和方法制作工具和方法 目前并沒有專門制作LOGO的軟件，其實(shí)也并不需要這樣的一種軟件。平時(shí)所使用的圖像處理軟件或者加上動(dòng)畫制作軟件（如果要做一個(gè)動(dòng)畫的LOGO的話）都可以很好地勝任這份工作，如FIREWORKS、PHOTOSHOP、Easy GIF Animator等。5.2.5良好的條件 一個(gè)好的LOGO應(yīng)具備以下的幾個(gè)條件，或者具備其中的幾個(gè)條件： 1. 符合國(guó)際標(biāo)準(zhǔn) 2. 精美、獨(dú)特 3. 與網(wǎng)站的整體風(fēng)格相融 4. 能夠體現(xiàn)網(wǎng)站的類型、內(nèi)容和風(fēng)格 5. 在最小的空間盡可能的表達(dá)出整個(gè)網(wǎng)站、公司的創(chuàng)意，精神等85 LOGO的應(yīng)用一直是CIS導(dǎo)入的基礎(chǔ)和最直接的表現(xiàn)形式，其重

44、要性是不言而喻的， 通過對(duì)標(biāo)識(shí)的識(shí)別、區(qū)別、引發(fā)聯(lián)想、增強(qiáng)記憶，促進(jìn)被標(biāo)識(shí)體與其對(duì)象的溝通與交流，從而樹立并保持對(duì)被標(biāo)識(shí)體的認(rèn)知、認(rèn)同，達(dá)到高效、提高認(rèn)知度、美譽(yù)度的效果。作為時(shí)代的前衛(wèi)，網(wǎng)絡(luò)LOGO的設(shè)計(jì)，更應(yīng)遵循CIS的整體規(guī)律并有所突破。因此網(wǎng)絡(luò)標(biāo)識(shí)的設(shè)計(jì)應(yīng)具備以下要素：1.識(shí)別性 關(guān)于識(shí)別性要求必須容易識(shí)別，易記憶。這就要做到無論是從色彩還是構(gòu)圖上一定要講究簡(jiǎn)單。2.特異性 所謂特異性就是要與其他的LOGO有區(qū)別，要有自己的特性，以區(qū)別于其它LOGO。 5.2.65.2.6制作要素制作要素863.內(nèi)涵性 設(shè)計(jì)LOGO一定要有它自身的含義，否則就算做的再漂亮，再完美也只是形式上的漂亮，卻

45、沒有一點(diǎn)意義。 4.法律意識(shí) 關(guān)于LOGO的法律意識(shí)一定要注意敏感的字樣、形狀和語言。 5.整體形象規(guī)劃（結(jié)構(gòu)性） LOGO不同的結(jié)構(gòu)會(huì)給人不同的心理意識(shí)，就像水平線給人的感覺是平緩、穩(wěn)重、延續(xù)和平靜，豎線給人的感覺是高、直率、輕和浮躁感，點(diǎn)給人的感覺是擴(kuò)張或收縮，容易引起人的注意等。 875.2.7LOGO設(shè)計(jì)決定品牌命運(yùn)設(shè)計(jì)決定品牌命運(yùn)5.2.8logo5.2.8logo設(shè)計(jì)分類設(shè)計(jì)分類1.具象表現(xiàn)形式：具象表現(xiàn)形式：具象表現(xiàn)是忠實(shí)于客觀物象的自然形態(tài)，對(duì)客觀物象采用經(jīng)過高度概括與提煉的具象圖形進(jìn)行設(shè)計(jì)的一種表現(xiàn)形式。 人體造型的圖形人體造型的圖形 動(dòng)物造型的圖形動(dòng)物造型的圖形88 植物造

46、型的圖形植物造型的圖形 器物造型的圖形器物造型的圖形 自然造型的圖形自然造型的圖形892.抽象表現(xiàn)形式抽象表現(xiàn)形式 抽象表現(xiàn)形式是以抽象的圖形符號(hào)來表達(dá)標(biāo)志的含義，以理性規(guī)劃的幾何圖形或符號(hào)為表現(xiàn)形式。 圓形標(biāo)志圖形 四方形標(biāo)志圖形 90 三角形的標(biāo)志圖形 多邊形標(biāo)志圖形 方向形標(biāo)志圖形913.文字表現(xiàn)形式：文字表現(xiàn)形式： 文字表現(xiàn)是以標(biāo)志形象與字體組合而成一個(gè)整體。標(biāo)志是一種視覺圖形，但文字標(biāo)志同時(shí)具有語言特征和語音形式。 漢字標(biāo)志圖形 拉丁字母標(biāo)志圖形 數(shù)字標(biāo)志圖形925.3 導(dǎo)航欄的統(tǒng)一與變化導(dǎo)航欄的統(tǒng)一與變化5.3.15.3.1導(dǎo)航欄導(dǎo)航欄 導(dǎo)航系統(tǒng)的作用：告訴在哪里，可以去哪里，這里

47、有什么，附近有什么，指引瀏覽著下一步的行為。1.導(dǎo)航系統(tǒng)的分類 全站、區(qū)域、情境式、輔助性導(dǎo)航。2.網(wǎng)站索引： 就是將網(wǎng)站的內(nèi)容以關(guān)鍵詞、詞匯、標(biāo)簽按一定順序(字母、筆畫)排列而成。內(nèi)容之間可以沒有等級(jí)關(guān)系。3.指南: 設(shè)計(jì)指南主要依據(jù)以下原則： 指南要短。 無論何時(shí)，用戶都能離開指南。 允許用戶在指南中前進(jìn)、后退的自由移動(dòng)。 指南的設(shè)計(jì)目的是回答問題的。 截圖應(yīng)該明確，具有把重點(diǎn)功能放大的效果。 如果指南有好幾頁，要有目錄。 934.高級(jí)設(shè)計(jì)導(dǎo)航方法： 個(gè)性化就是針對(duì)個(gè)人的行為、需求、喜好提供剪裁后的網(wǎng)頁給用戶。 定制化(指用戶告訴人們想要什么，但有時(shí)候用戶自己都不知道他們要需要什么)是給用

48、戶直接控制權(quán)，可以針對(duì)展現(xiàn)格式、導(dǎo)航和內(nèi)容選項(xiàng)的組合做調(diào)整。 可視化：讓用戶可能采用可視化的方式瀏覽。(在網(wǎng)上瀏覽博物館網(wǎng)站時(shí)就像逛現(xiàn)實(shí)生活中的博物館一樣身臨其境的感覺，) 。 社會(huì)化：用戶上網(wǎng)的需求點(diǎn)、興趣點(diǎn)可以從觀察其它用戶行為中推論出來的基礎(chǔ)上。 94打開網(wǎng)頁后，促使瀏覽者繼續(xù)瀏覽，除了主頁上的內(nèi)容外，按鈕設(shè)計(jì)起著至關(guān)的作用。好的按鈕設(shè)計(jì)一定會(huì)是醒目且能“勾引”用戶眼球的。以下是好的按鈕設(shè)計(jì)必不可少的5個(gè)特征:1.顏色顏色一定要能與平靜的頁面相比更加與眾不同，因此它要更亮而且有高對(duì)比度的顏色。2.位置它們應(yīng)當(dāng)“座落于”用戶期望更容易找到它們的地方。產(chǎn)品旁邊、頁頭、導(dǎo)航的頂部右側(cè)這些都是醒

49、目且不難找到的地方。 5.3.25.3.2按鈕設(shè)計(jì)按鈕設(shè)計(jì)953.文字表達(dá) 在按鈕上使用什么文字表達(dá)給用戶是非常重要的。它應(yīng)當(dāng)簡(jiǎn)短并切中要點(diǎn)，并以動(dòng)詞開始，如：注冊(cè)、下載、創(chuàng)建、嘗試等。 4.尺寸問題 如果它是你最重要的按鈕并且你希望更多的用戶點(diǎn)擊它，那么讓它更醒目些是沒有壞處的。把這個(gè)按鈕設(shè)計(jì)的比其他按鈕更大些并讓用戶在更多的地方找到并點(diǎn)擊它。 5.可“呼吸”的空間 按鈕不能和網(wǎng)頁中的其他元素?cái)D在一起。它需要充足的margin(外邊距)才能更加突出，也需要更多的padding(內(nèi)邊距)才能讓文字更容易閱讀。 96 在網(wǎng)頁設(shè)計(jì)中，簡(jiǎn)約并不一定等同于極簡(jiǎn)主義者的設(shè)計(jì)美學(xué)。簡(jiǎn)約的網(wǎng)站只是從設(shè)計(jì)、內(nèi)

50、容、以及代碼中移除了所有不必要的元素。而極簡(jiǎn)主義的網(wǎng)站普遍符合這一標(biāo)準(zhǔn)，有許多網(wǎng)站，不管你如何想象，都不會(huì)被認(rèn)為是仍適合簡(jiǎn)單定義的“極簡(jiǎn)主義”。5.4網(wǎng)頁的簡(jiǎn)約設(shè)計(jì)網(wǎng)頁的簡(jiǎn)約設(shè)計(jì)5.4.1簡(jiǎn)約設(shè)計(jì)的特點(diǎn)簡(jiǎn)約設(shè)計(jì)的特點(diǎn) 1.簡(jiǎn)約的設(shè)計(jì)讓網(wǎng)站更容易導(dǎo)航。 2. 簡(jiǎn)約的設(shè)計(jì)讓頁面加載更快。 3. 簡(jiǎn)約的設(shè)計(jì)讓內(nèi)容更容易被“瀏覽”。 4. 簡(jiǎn)約的網(wǎng)站設(shè)計(jì)和創(chuàng)建會(huì)更快速。 5. 簡(jiǎn)約的代碼更容易避免漏洞。 6. 較小的文件意味著較少的服務(wù)器空間975.4.2怎樣使網(wǎng)站變得簡(jiǎn)約怎樣使網(wǎng)站變得簡(jiǎn)約 1.移除不必要的裝飾元素 。 2.經(jīng)常問自己“這些元素真的很重要嗎？” 3.網(wǎng)站上哪些元素是可以被合并的。 4

51、.一些頁面是否可以合并成一個(gè)頁面? 5.確保網(wǎng)站后端和前端一樣的簡(jiǎn)約 985.5網(wǎng)頁中的版式設(shè)計(jì)網(wǎng)頁中的版式設(shè)計(jì) 探討網(wǎng)頁的版式設(shè)計(jì)的藝術(shù)表現(xiàn)方法，把握網(wǎng)頁版式設(shè)計(jì)的發(fā)展趨勢(shì)，把傳統(tǒng)平面設(shè)計(jì)中美的形式規(guī)律同現(xiàn)代網(wǎng)頁設(shè)計(jì)的具體問題相結(jié)合，將平面設(shè)計(jì)中美的基本形式和元素運(yùn)用到網(wǎng)頁中去，對(duì)于提高網(wǎng)頁表現(xiàn)力、改善網(wǎng)站的運(yùn)營(yíng)效果，無疑具有重要意義。5.5.1版式設(shè)計(jì)在網(wǎng)頁中的藝術(shù)表現(xiàn) 版式設(shè)計(jì)，就是在版面上，將有限的視覺元素進(jìn)行有機(jī)的排列組合，并通過理性思維，用個(gè)性化的方式表現(xiàn)出具有個(gè)人風(fēng)格和藝術(shù)特色的視覺效果。它使得版面在傳達(dá)信息的同時(shí)，也產(chǎn)生感官上的美感。版式設(shè)計(jì)是現(xiàn)代設(shè)計(jì)藝術(shù)的重要組成部分，它不僅

52、是一種技能，更體現(xiàn)了技術(shù)與藝術(shù)的高度統(tǒng)一。隨著互聯(lián)網(wǎng)和計(jì)算機(jī)技術(shù)的不斷進(jìn)步，網(wǎng)絡(luò)以其獨(dú)特的優(yōu)勢(shì)迅速覆蓋了全球。由于它的發(fā)展融合了更多的新技術(shù)，使其藝術(shù)表現(xiàn)形式比傳統(tǒng)媒體更為多樣，并具有一些獨(dú)有特點(diǎn)。 991.高互動(dòng)性、多維性和效果多元性 互動(dòng)性是媒體的基本特征，不同媒體的互動(dòng)程度和互動(dòng)形式不同。為保持瀏覽者對(duì)網(wǎng)站的新鮮感，很多網(wǎng)站總是定期或不定期的進(jìn)行改版，內(nèi)容更是需要經(jīng)常改變甚至“時(shí)時(shí)更新”。這就需要在保持網(wǎng)站視覺形象一貫性的基礎(chǔ)上，不斷創(chuàng)作新的網(wǎng)頁設(shè)計(jì)作品，高互動(dòng)媒體特性造成網(wǎng)頁版式設(shè)計(jì)需要不斷更新并且在設(shè)計(jì)上更要注意互動(dòng)性的體現(xiàn)，否則其網(wǎng)頁作品就會(huì)淹沒在互聯(lián)網(wǎng)的汪洋之中。 1002.“不

53、可控制”的效果和“DIY”的網(wǎng)頁版式 網(wǎng)絡(luò)應(yīng)用很難制訂出統(tǒng)一的標(biāo)準(zhǔn)，這導(dǎo)致網(wǎng)頁版式設(shè)計(jì)效果的不可控制性。 網(wǎng)頁版式甚至可以根據(jù)瀏覽者的喜好自主選擇和改變，現(xiàn)在有些網(wǎng)站就為瀏覽者提供若干種排版風(fēng)格方案，以供瀏覽者“DIY” 。3.網(wǎng)絡(luò)技術(shù)與藝術(shù)創(chuàng)意的緊密結(jié)合 毋庸置疑，網(wǎng)頁制作的每一次進(jìn)步都是技術(shù)的革新帶來的，網(wǎng)頁版式設(shè)計(jì)這種藝術(shù)則對(duì)技術(shù)有著深刻的依賴性，技術(shù)的更新不斷改變著它的本質(zhì)。 101網(wǎng)絡(luò)技術(shù)日新月異的發(fā)展給網(wǎng)頁設(shè)計(jì)帶來了新的表現(xiàn)天地。在網(wǎng)絡(luò)世界里，技術(shù)始終起著先導(dǎo)作用，設(shè)計(jì)則隨著它的發(fā)展而發(fā)展，技術(shù)更新對(duì)網(wǎng)頁版式設(shè)計(jì)的影響無疑是巨大的。1.技術(shù)的更新將使網(wǎng)頁版式設(shè)計(jì)不斷增加新的設(shè)計(jì)元素

54、 表格布局將被CSS布局取代 新型瀏覽器的出現(xiàn)將使網(wǎng)頁設(shè)計(jì)更趨簡(jiǎn)約5.5.25.5.2網(wǎng)頁版式設(shè)計(jì)的發(fā)展趨勢(shì)網(wǎng)頁版式設(shè)計(jì)的發(fā)展趨勢(shì)1022. 設(shè)計(jì)方式將遵循新的要求 網(wǎng)頁像書籍一樣有文字、有圖片，像電視一樣有動(dòng)態(tài)影畫、聲音，幾乎融合了所有媒體的特性。預(yù)計(jì)在今后，網(wǎng)絡(luò)不僅會(huì)作為一個(gè)獨(dú)立的媒體而成長(zhǎng)，而且會(huì)成為聯(lián)系各大媒體的重要工具，處處顯示出極強(qiáng)的生命力。同時(shí)，經(jīng)驗(yàn)的積累和新技術(shù)的運(yùn)用也將促進(jìn)網(wǎng)頁版式設(shè)計(jì)方式遵循新的要求。 更為注重色彩搭配 巧妙運(yùn)用flash 注重頁面層次和版式細(xì)節(jié) 建立合理的“路標(biāo)”103 動(dòng)畫是一種動(dòng)態(tài)的視覺上的表達(dá)、形式和結(jié)構(gòu)，并隨時(shí)間推移而變化。動(dòng)畫十分普遍，用途不盡相

55、同，人們?cè)谟?jì)算機(jī)上、尤其是網(wǎng)頁上和在線廣告中常?？梢钥吹健Ｒ恍┰O(shè)計(jì)者使用動(dòng)畫來傳遞信息，并認(rèn)為在有限的計(jì)算機(jī)屏幕上動(dòng)畫比文本有用的多，但是人們對(duì)于動(dòng)畫的效果卻要小心謹(jǐn)慎。 多數(shù)人在多數(shù)情況下認(rèn)為網(wǎng)頁上的動(dòng)畫是令人討厭的。很多瀏覽者在瀏覽網(wǎng)頁時(shí)常常會(huì)被網(wǎng)頁上的動(dòng)畫所干擾，或者被分散了注意力，特別是當(dāng)動(dòng)畫不能給瀏覽者正在進(jìn)行的工作帶來任何信息的時(shí)候。這種動(dòng)畫被認(rèn)為是對(duì)瀏覽者的“非主要信息刺激”或者“輔助刺激”。換句話說，他們不能對(duì)瀏覽者正在進(jìn)行的查找數(shù)據(jù)任務(wù)或者當(dāng)前所需要的信息帶來任何有價(jià)值的信息。這類非主要信息刺激動(dòng)畫會(huì)引起視覺上的干擾，這種干擾影響了瀏覽者搜尋信息的能力。無關(guān)緊要的動(dòng)畫經(jīng)常出現(xiàn)

56、或者突然出現(xiàn)，往往會(huì)分散瀏覽者在有用信息上的注意力。因此，當(dāng)人們?cè)诰W(wǎng)頁上搜尋有用信息時(shí)，常常會(huì)受到這些動(dòng)畫的干擾，正確獲得所需信息的時(shí)間也隨之變長(zhǎng)，這十分令人討厭。 第第6 6章章 網(wǎng)頁動(dòng)畫網(wǎng)頁動(dòng)畫1046.1網(wǎng)絡(luò)動(dòng)畫的分類網(wǎng)絡(luò)動(dòng)畫的分類6.1.1 FLAS動(dòng)畫 FLASH動(dòng)畫是近幾年出現(xiàn)的一種新的事物，他是由美國(guó)的 MACROMEDIA 公司推出的一款多媒體動(dòng)畫制作軟件。它是一種交互式動(dòng)畫設(shè)計(jì)工具，用它可以將音樂，聲效，動(dòng)畫方便地融合在一起，以制作出高品質(zhì)的動(dòng)態(tài)效果，或者說是動(dòng)畫。6.1.2.GIF動(dòng)畫 GIF 廣泛支持 Internet 標(biāo)準(zhǔn)。支持無損耗壓縮和透明度。動(dòng)畫 GIF 很流行，

57、易于使用許多 GIF 動(dòng)畫程序創(chuàng)建。 GIF 只支持 256 色調(diào)色板，因此，詳細(xì)的圖片和寫實(shí)攝影圖像會(huì)丟失顏色信息，而看起來卻是經(jīng)過調(diào)色的。在大多數(shù)情況下，無損耗壓縮效果不如 JPEG 格式或 PNG 格式。GIF 支持有限的透明度，沒有半透明效果或褪色效果 1056.1.3三維動(dòng)畫三維動(dòng)畫 三維動(dòng)畫又稱3D動(dòng)畫，是近年來隨著計(jì)算機(jī)軟硬件技術(shù)的發(fā)展而產(chǎn)生的一新興技術(shù)。三維動(dòng)畫軟件在計(jì)算機(jī)中首先建立一個(gè)虛擬的世界，設(shè)計(jì)師在這個(gè)虛擬的三維世界中按照要表現(xiàn)的對(duì)象的形狀尺寸建立模型以及場(chǎng)景，再根據(jù)要求設(shè)定模型的運(yùn)動(dòng)軌跡、虛擬攝影機(jī)的運(yùn)動(dòng)和其它動(dòng)畫參數(shù)，最后按要求為模型賦上特定的材質(zhì)，并打上燈光。當(dāng)這

58、一切完成后就可以讓計(jì)算機(jī)自動(dòng)運(yùn)算，生成最后的畫面。 三維flash是利用計(jì)算機(jī)圖形學(xué)技術(shù)，將需要展示的產(chǎn)品在計(jì)算機(jī)中先進(jìn)行逼真的三維模擬運(yùn)行演示，然后再通過專業(yè)軟件壓縮轉(zhuǎn)換成一個(gè)完全適合在網(wǎng)頁上流暢運(yùn)行的flash文件。 三維flash在網(wǎng)頁上運(yùn)行很流暢，瀏覽者無需下載插件，打開網(wǎng)頁就可看到產(chǎn)品演示。 1066.2網(wǎng)絡(luò)動(dòng)畫的制作網(wǎng)絡(luò)動(dòng)畫的制作6.2.1常用軟件常用軟件制作動(dòng)畫的軟件包括：Maya Softimage 3Dmax LIGHTWAVE Alias 是三維動(dòng)畫制作軟件Animator、ANIMO、TOONZ、RETAS PRO 商業(yè)二維動(dòng)畫TOOB BOOM STUDIO、HARMO

59、NY、SOLO、flash 網(wǎng)頁二維動(dòng)畫制作網(wǎng)絡(luò)中常見的flash動(dòng)畫是用FLASH制作的，一些banner是由FLASH或者imageready制作的，當(dāng)然三維軟件制作的動(dòng)畫也可以通過插件轉(zhuǎn)為二維動(dòng)畫。1076.2.2傳輸速度傳輸速度 網(wǎng)絡(luò)傳輸速度是相對(duì)固定的，在此前提下，網(wǎng)站的文件量越小，傳輸?shù)男畔⑺俣染驮娇?，所以人們要盡可能的對(duì)網(wǎng)頁進(jìn)行優(yōu)化。6.2.3風(fēng)格統(tǒng)一風(fēng)格統(tǒng)一 統(tǒng)一，是指設(shè)計(jì)作品的整體性，一致性。設(shè)計(jì)作品的整體效果是至關(guān)重要的，在設(shè)計(jì)中切勿將各組成部分孤立分散，那樣會(huì)使畫面呈現(xiàn)出一種枝蔓紛雜的凌亂效果。 網(wǎng)頁上所有的圖像、文字，包括象背景顏色、區(qū)分線、字體、標(biāo)題、注腳什么的，要統(tǒng)一風(fēng)格，貫穿全站。 1086.3網(wǎng)絡(luò)動(dòng)畫的指導(dǎo)方針網(wǎng)絡(luò)動(dòng)畫的指導(dǎo)方針 研究結(jié)果表明人們必須小心地設(shè)計(jì)網(wǎng)頁動(dòng)畫以免對(duì)瀏覽者產(chǎn)生負(fù)面影響。以下列出設(shè)計(jì)網(wǎng)頁動(dòng)畫的十個(gè)原則。1不要干擾在重要信息上的注意力。2避免混亂。3設(shè)定合適的持續(xù)時(shí)間。4管理布局和組織顯示對(duì)象。5遵守顏色的慣例。6使用文本和聽覺信息來輔助動(dòng)畫。7關(guān)注對(duì)符號(hào)學(xué)的探究。8遵從合作原則。9向迪斯尼學(xué)習(xí)。10避免設(shè)計(jì)“近視”。109第第7 7章章 網(wǎng)絡(luò)形象設(shè)計(jì)網(wǎng)絡(luò)形象設(shè)計(jì)(IVIS)(IVIS)與廣告?zhèn)髅脚c廣告?zhèn)髅?.1視覺識(shí)別系統(tǒng)視覺識(shí)別系統(tǒng) VI（Visual