互動媒體設(shè)計A 15-16-2

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

2、類： 1、平面媒體、平面媒體 2、電波媒體、電波媒體 3、網(wǎng)絡(luò)媒體、網(wǎng)絡(luò)媒體（二）、認(rèn)識互動媒體（二）、認(rèn)識互動媒體l概念：概念：指用戶能積極參與指用戶能積極參與, 既能傳遞信息既能傳遞信息,同時也可以反饋信息的傳同時也可以反饋信息的傳播媒體。用戶可以根據(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é) 課件、電子圖書、交互動畫、交互投影媒體等課件、電子圖書、交互

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

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

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

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

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

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

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

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

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

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

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