互動(dòng)媒體設(shè)計(jì)A 15-16-2講述

1、 互動(dòng)媒體設(shè)計(jì) A授課教師：張青榮一、認(rèn)識(shí)三個(gè)概念一、認(rèn)識(shí)三個(gè)概念二、認(rèn)識(shí)網(wǎng)頁設(shè)計(jì)二、認(rèn)識(shí)網(wǎng)頁設(shè)計(jì)課程導(dǎo)論：互動(dòng)媒體設(shè)計(jì)概論課程導(dǎo)論：互動(dòng)媒體設(shè)計(jì)概論 l 媒體媒體l 互動(dòng)媒體互動(dòng)媒體l 互動(dòng)媒體前景互動(dòng)媒體前景課程導(dǎo)論：互動(dòng)媒體設(shè)計(jì)概論課程導(dǎo)論：互動(dòng)媒體設(shè)計(jì)概論一、認(rèn)識(shí)三個(gè)概念一、認(rèn)識(shí)三個(gè)概念（一）、認(rèn)識(shí)媒體（一）、認(rèn)識(shí)媒體l所謂媒體，是指傳播信息的介質(zhì)，通俗說就是宣傳平臺(tái)。所謂媒體，是指傳播信息的介質(zhì)，通俗說就是宣傳平臺(tái)。l傳統(tǒng)的四大媒體傳統(tǒng)的四大媒體:1、報(bào)紙雜志；、報(bào)紙雜志；2、通信；、通信；3、廣播；、廣播；4、電視。、電視。l現(xiàn)代媒體按其形式劃分為三大類：現(xiàn)代媒體按其形式劃分為三大

2、類： 1、平面媒體、平面媒體 2、電波媒體、電波媒體 3、網(wǎng)絡(luò)媒體、網(wǎng)絡(luò)媒體（二）、認(rèn)識(shí)互動(dòng)媒體（二）、認(rèn)識(shí)互動(dòng)媒體l概念：概念：指用戶能積極參與指用戶能積極參與, 既能傳遞信息既能傳遞信息,同時(shí)也可以反饋信息的傳同時(shí)也可以反饋信息的傳播媒體。用戶可以根據(jù)自己的需要隨意地跳躍選擇適合自己的內(nèi)容播媒體。用戶可以根據(jù)自己的需要隨意地跳躍選擇適合自己的內(nèi)容觀看觀看 、閱讀，傳達(dá)自己的信息。、閱讀，傳達(dá)自己的信息。l分類：分類： 1、按內(nèi)容載體分為：網(wǎng)站、按內(nèi)容載體分為：網(wǎng)站、 IPTV、導(dǎo)航系統(tǒng)、游戲、多媒體教學(xué)導(dǎo)航系統(tǒng)、游戲、多媒體教學(xué) 課件、電子圖書、交互動(dòng)畫、交互投影媒體等課件、電子圖書、交互

3、動(dòng)畫、交互投影媒體等 2、按事件方式分為：點(diǎn)擊互動(dòng)、觸摸互動(dòng)、影像感應(yīng)互動(dòng)等、按事件方式分為：點(diǎn)擊互動(dòng)、觸摸互動(dòng)、影像感應(yīng)互動(dòng)等（三（三 ）、認(rèn)識(shí)互動(dòng)媒體設(shè)計(jì)專業(yè)及前景）、認(rèn)識(shí)互動(dòng)媒體設(shè)計(jì)專業(yè)及前景l(fā)各大美術(shù)學(xué)院的動(dòng)畫均開設(shè)了互動(dòng)媒體設(shè)計(jì)專業(yè)方向各大美術(shù)學(xué)院的動(dòng)畫均開設(shè)了互動(dòng)媒體設(shè)計(jì)專業(yè)方向l各大專院校的數(shù)字媒體藝術(shù)、計(jì)算機(jī)專業(yè)紛紛開設(shè)此專業(yè)方向或課程各大專院校的數(shù)字媒體藝術(shù)、計(jì)算機(jī)專業(yè)紛紛開設(shè)此專業(yè)方向或課程 多媒體已經(jīng)極大的改變了設(shè)計(jì)世界，這個(gè)具有創(chuàng)意性的產(chǎn)業(yè)一直在找尋能夠把多媒體已經(jīng)極大的改變了設(shè)計(jì)世界，這個(gè)具有創(chuàng)意性的產(chǎn)業(yè)一直在找尋能夠把創(chuàng)意與優(yōu)秀的編程能力相融合的多媒體設(shè)計(jì)者。創(chuàng)意與

4、優(yōu)秀的編程能力相融合的多媒體設(shè)計(jì)者。 若想在這個(gè)飛速變化的多媒體世界里占有一席之地，學(xué)習(xí)這門課程將是一個(gè)若想在這個(gè)飛速變化的多媒體世界里占有一席之地，學(xué)習(xí)這門課程將是一個(gè)很好的開端，是信息時(shí)代發(fā)展、信息傳播的多元化藝術(shù)化、提升綜合素質(zhì)與能力、很好的開端，是信息時(shí)代發(fā)展、信息傳播的多元化藝術(shù)化、提升綜合素質(zhì)與能力、未來就業(yè)等需要。未來就業(yè)等需要?；?dòng)媒體設(shè)計(jì)專業(yè)簡介 l職業(yè)前景職業(yè)前景 網(wǎng)絡(luò)藝術(shù)總監(jiān)網(wǎng)絡(luò)藝術(shù)總監(jiān) 多媒體設(shè)計(jì)者多媒體設(shè)計(jì)者 網(wǎng)站設(shè)計(jì)者開發(fā)者網(wǎng)站設(shè)計(jì)者開發(fā)者 動(dòng)畫設(shè)計(jì)者動(dòng)畫設(shè)計(jì)者 三維平面設(shè)計(jì)者與動(dòng)畫設(shè)計(jì)者三維平面設(shè)計(jì)者與動(dòng)畫設(shè)計(jì)者 影視制作與后期制作影視制作與后期制作 互動(dòng)媒體設(shè)計(jì)

5、作品欣賞互動(dòng)媒體設(shè)計(jì)作品欣賞l 短片短片l MTVMTVl 網(wǎng)站網(wǎng)站 互動(dòng)媒體設(shè)計(jì)概論互動(dòng)媒體設(shè)計(jì)概論 二、認(rèn)識(shí)網(wǎng)頁設(shè)計(jì)二、認(rèn)識(shí)網(wǎng)頁設(shè)計(jì) 1998年舉行的聯(lián)合國新聞委員會(huì)年會(huì)上，安年舉行的聯(lián)合國新聞委員會(huì)年會(huì)上，安南指出：在加強(qiáng)傳統(tǒng)的文子和聲像傳播手段的同南指出：在加強(qiáng)傳統(tǒng)的文子和聲像傳播手段的同時(shí)，應(yīng)利用最先進(jìn)的第四媒體時(shí)，應(yīng)利用最先進(jìn)的第四媒體Internet（互聯(lián)（互聯(lián)網(wǎng)絡(luò)），以加強(qiáng)新聞傳播工作。從此，網(wǎng)絡(luò)成為網(wǎng)絡(luò)），以加強(qiáng)新聞傳播工作。從此，網(wǎng)絡(luò)成為一種大眾傳播媒體被人們接受。一種大眾傳播媒體被人們接受。 網(wǎng)頁從最早的以文字為主的頁面，發(fā)展到今網(wǎng)頁從最早的以文字為主的頁面，發(fā)展到今天圖

6、、文、聲、像、多媒體并茂的頁面，從以靜天圖、文、聲、像、多媒體并茂的頁面，從以靜態(tài)網(wǎng)頁為主，發(fā)展到要求功能與藝術(shù)視覺審美兼態(tài)網(wǎng)頁為主，發(fā)展到要求功能與藝術(shù)視覺審美兼得的動(dòng)態(tài)頁面。藝術(shù)與技術(shù)結(jié)合，正成為如今網(wǎng)得的動(dòng)態(tài)頁面。藝術(shù)與技術(shù)結(jié)合，正成為如今網(wǎng)頁設(shè)計(jì)領(lǐng)域研究的時(shí)尚內(nèi)容。頁設(shè)計(jì)領(lǐng)域研究的時(shí)尚內(nèi)容。 （一）、網(wǎng)頁媒介信息分類（一）、網(wǎng)頁媒介信息分類1、 文文 字字2、 圖圖 像像3、 聲聲 音音4、 視視 頻頻5、 動(dòng)動(dòng) 畫畫（二）、網(wǎng)頁結(jié)構(gòu)基本形式：（二）、網(wǎng)頁結(jié)構(gòu)基本形式：1、分欄結(jié)構(gòu)形式、分欄結(jié)構(gòu)形式 運(yùn)用最廣泛的頁面結(jié)構(gòu)形式，是一種規(guī)范、理性的頁面空間分割方法，運(yùn)用最廣泛的頁面結(jié)構(gòu)形式

7、，是一種規(guī)范、理性的頁面空間分割方法，為網(wǎng)頁發(fā)展最初階段頁面形態(tài)。利用表格布局大框架進(jìn)行制作，從橫向或縱為網(wǎng)頁發(fā)展最初階段頁面形態(tài)。利用表格布局大框架進(jìn)行制作，從橫向或縱向上分為通欄、雙欄、三欄或四欄，類似于報(bào)刊的版式，適合信息量大的網(wǎng)向上分為通欄、雙欄、三欄或四欄，類似于報(bào)刊的版式，適合信息量大的網(wǎng)站。站。2、框架結(jié)構(gòu)形式、框架結(jié)構(gòu)形式 利用輔助線、插圖、色彩等元素，使頁面劃分按規(guī)則或不規(guī)則的框架結(jié)利用輔助線、插圖、色彩等元素，使頁面劃分按規(guī)則或不規(guī)則的框架結(jié)構(gòu)形成若干主題區(qū)域。一般根據(jù)信息內(nèi)容特點(diǎn)，以視覺元素進(jìn)行區(qū)域安排和構(gòu)形成若干主題區(qū)域。一般根據(jù)信息內(nèi)容特點(diǎn)，以視覺元素進(jìn)行區(qū)域安排和界

8、定。界定。3、開放結(jié)構(gòu)形式、開放結(jié)構(gòu)形式 大膽地綜合運(yùn)用平面構(gòu)成原來和形式法則進(jìn)行圖文布局，布局自由活潑、大膽地綜合運(yùn)用平面構(gòu)成原來和形式法則進(jìn)行圖文布局，布局自由活潑、形式靈活多變、時(shí)尚個(gè)性，適合形象容量不大、主題較為單一、注重形象創(chuàng)形式靈活多變、時(shí)尚個(gè)性，適合形象容量不大、主題較為單一、注重形象創(chuàng)意的網(wǎng)站。意的網(wǎng)站。4、綜合式、綜合式 綜合以上特點(diǎn)，表現(xiàn)為網(wǎng)站整體策劃。綜合以上特點(diǎn)，表現(xiàn)為網(wǎng)站整體策劃。 * 范例分析范例分析二、網(wǎng)頁結(jié)構(gòu)基本形式：1.分欄結(jié)構(gòu)形式2.框架結(jié)構(gòu)形式3.開放結(jié)構(gòu)形式（二）、網(wǎng)頁結(jié)構(gòu)基本形式：（二）、網(wǎng)頁結(jié)構(gòu)基本形式：1、分欄結(jié)構(gòu)形式、分欄結(jié)構(gòu)形式 運(yùn)用最廣泛的頁

9、面結(jié)構(gòu)形式，是一種規(guī)范、理性的頁運(yùn)用最廣泛的頁面結(jié)構(gòu)形式，是一種規(guī)范、理性的頁面空間分割方法，為網(wǎng)頁發(fā)展最初階段頁面形態(tài)。利用表格面空間分割方法，為網(wǎng)頁發(fā)展最初階段頁面形態(tài)。利用表格布局大框架進(jìn)行制作，從橫向或縱向上分為通欄、雙欄、三布局大框架進(jìn)行制作，從橫向或縱向上分為通欄、雙欄、三欄或四欄，類似于報(bào)刊的版式，適合信息量大的網(wǎng)站。欄或四欄，類似于報(bào)刊的版式，適合信息量大的網(wǎng)站。2、框架結(jié)構(gòu)形式、框架結(jié)構(gòu)形式 利用輔助線、插圖、色彩等元素，使頁面劃分按規(guī)則利用輔助線、插圖、色彩等元素，使頁面劃分按規(guī)則或不規(guī)則的框架結(jié)構(gòu)形成若干主題區(qū)域。一般根據(jù)信息內(nèi)容或不規(guī)則的框架結(jié)構(gòu)形成若干主題區(qū)域。一般根

10、據(jù)信息內(nèi)容特點(diǎn)，以視覺元素進(jìn)行區(qū)域安排和界定。特點(diǎn)，以視覺元素進(jìn)行區(qū)域安排和界定。* 范例分析范例分析 （二）、網(wǎng)頁結(jié)構(gòu)基本形式：（二）、網(wǎng)頁結(jié)構(gòu)基本形式：1、分欄結(jié)構(gòu)形式、分欄結(jié)構(gòu)形式2、框架結(jié)構(gòu)形式、框架結(jié)構(gòu)形式3、開放結(jié)構(gòu)形式、開放結(jié)構(gòu)形式 大膽地綜合運(yùn)用平面構(gòu)成原來和形式法則進(jìn)行圖文布大膽地綜合運(yùn)用平面構(gòu)成原來和形式法則進(jìn)行圖文布局，布局自由活潑、形式靈活多變、時(shí)尚個(gè)性，適合形象局，布局自由活潑、形式靈活多變、時(shí)尚個(gè)性，適合形象容量不大、主題較為單一、注重形象創(chuàng)意的網(wǎng)站。容量不大、主題較為單一、注重形象創(chuàng)意的網(wǎng)站。* 范例分析范例分析（二）、網(wǎng)頁結(jié)構(gòu)基本形式：（二）、網(wǎng)頁結(jié)構(gòu)基本形式：

11、1、分欄結(jié)構(gòu)形式、分欄結(jié)構(gòu)形式2、框架結(jié)構(gòu)形式、框架結(jié)構(gòu)形式3、開放結(jié)構(gòu)形式、開放結(jié)構(gòu)形式 大膽地綜合運(yùn)用平面構(gòu)成原來和形式法則進(jìn)行圖文布大膽地綜合運(yùn)用平面構(gòu)成原來和形式法則進(jìn)行圖文布局，布局自由活潑、形式靈活多變、時(shí)尚個(gè)性，適合形象局，布局自由活潑、形式靈活多變、時(shí)尚個(gè)性，適合形象容量不大、主題較為單一、注重形象創(chuàng)意的網(wǎng)站。容量不大、主題較為單一、注重形象創(chuàng)意的網(wǎng)站。4、綜合式、綜合式 綜合以上特點(diǎn)，表現(xiàn)為網(wǎng)站整體策劃。綜合以上特點(diǎn)，表現(xiàn)為網(wǎng)站整體策劃。 * 范例分析范例分析（三）、網(wǎng)頁設(shè)計(jì)制作（三）、網(wǎng)頁設(shè)計(jì)制作程序程序前期創(chuàng)作前期創(chuàng)作中期制作中期制作后期處理后期處理策劃、資料的收集整理、

12、主題定位、欄目結(jié)構(gòu)規(guī)劃、策劃、資料的收集整理、主題定位、欄目結(jié)構(gòu)規(guī)劃、logologo設(shè)計(jì)、整體視覺創(chuàng)意、背景設(shè)計(jì)、頁面排版布設(shè)計(jì)、整體視覺創(chuàng)意、背景設(shè)計(jì)、頁面排版布局與色彩設(shè)計(jì)、局與色彩設(shè)計(jì)、bannerbanner動(dòng)畫設(shè)計(jì)、按鈕與鏈接設(shè)計(jì)、動(dòng)畫設(shè)計(jì)、按鈕與鏈接設(shè)計(jì)、聲音設(shè)計(jì)等，畫面分頁設(shè)計(jì)稿；聲音設(shè)計(jì)等，畫面分頁設(shè)計(jì)稿； 排版布局細(xì)化、背景繪制、造型制作、動(dòng)畫制作、排版布局細(xì)化、背景繪制、造型制作、動(dòng)畫制作、按鈕制作、聲音添加按鈕制作、聲音添加等；等； 動(dòng)作語言的添加、交互鏈接、作品的測試、優(yōu)化動(dòng)作語言的添加、交互鏈接、作品的測試、優(yōu)化與發(fā)布與發(fā)布等等. . （四）、網(wǎng)頁藝術(shù)設(shè)計(jì)常用軟件（

13、四）、網(wǎng)頁藝術(shù)設(shè)計(jì)常用軟件早期：早期：Frontpage Adobe Golive JavaScriptFrontpage Adobe Golive JavaScript等等目前：網(wǎng)頁三劍客：目前：網(wǎng)頁三劍客：FlashFlash、DreamweaverDreamweaver、Fireworks Fireworks 現(xiàn)在一般用現(xiàn)在一般用PSPS代替代替 FireworksFireworks JavaScript JavaScript等專業(yè)級(jí)網(wǎng)站編程等專業(yè)級(jí)網(wǎng)站編程l創(chuàng)意網(wǎng)站作品欣賞創(chuàng)意網(wǎng)站作品欣賞第一周課后采集分析實(shí)踐第一周課后采集分析實(shí)踐: : 1 1、請?jiān)谧约旱碾娔X上完成、請?jiān)谧约旱碾娔X上完成flash cs6軟件的安裝；軟件的安裝；2 2、搜集創(chuàng)意型網(wǎng)站范例作品、搜集創(chuàng)意型網(wǎng)站范例作品1-21-2件，