互动媒体设计A 15-16-2

1、 互动媒体设计 A 授课教师：张青荣 一、认识三个概念一、认识三个概念 二、认识网页设计二、认识网页设计 课程导论：互动媒体设计概论课程导论：互动媒体设计概论 l 媒体媒体 l 互动媒体互动媒体 l 互动媒体前景互动媒体前景 课程导论：互动媒体设计概论课程导论：互动媒体设计概论 一、认识三个概念一、认识三个概念 （一）、认识媒体（一）、认识媒体 l所谓媒体，是指传播信息的介质，通俗说就是宣传平台。所谓媒体，是指传播信息的介质，通俗说就是宣传平台。 l传统的四大媒体传统的四大媒体: 1、报纸杂志；、报纸杂志；2、通信；、通信；3、广播；、广播；4、电视。、电视。 l现代媒体按其形式划分为三大类：

2、现代媒体按其形式划分为三大类： 1、平面媒体、平面媒体 2、电波媒体、电波媒体 3、网络媒体、网络媒体 （二）、认识互动媒体（二）、认识互动媒体 l概念：概念：指用户能积极参与指用户能积极参与, 既能传递信息既能传递信息,同时也可以反馈信息的传同时也可以反馈信息的传 播媒体。用户可以根据自己的需要随意地跳跃选择适合自己的内容播媒体。用户可以根据自己的需要随意地跳跃选择适合自己的内容 观看观看 、阅读，传达自己的信息。、阅读，传达自己的信息。 l分类：分类： 1、按内容载体分为：网站、按内容载体分为：网站、 IPTV、导航系统、游戏、多媒体教学导航系统、游戏、多媒体教学 课件、电子图书、交互动画

3、、交互投影媒体等课件、电子图书、交互动画、交互投影媒体等 2、按事件方式分为：点击互动、触摸互动、影像感应互动等、按事件方式分为：点击互动、触摸互动、影像感应互动等 （三（三 ）、认识互动媒体设计专业及前景）、认识互动媒体设计专业及前景 l各大美术学院的动画均开设了互动媒体设计专业方向各大美术学院的动画均开设了互动媒体设计专业方向 l各大专院校的数字媒体艺术、计算机专业纷纷开设此专业方向或课程各大专院校的数字媒体艺术、计算机专业纷纷开设此专业方向或课程 多媒体已经极大的改变了设计世界，这个具有创意性的产业一直在找寻能够把多媒体已经极大的改变了设计世界，这个具有创意性的产业一直在找寻能够把 创意

4、与优秀的编程能力相融合的多媒体设计者。创意与优秀的编程能力相融合的多媒体设计者。 若想在这个飞速变化的多媒体世界里占有一席之地，学习这门课程将是一个若想在这个飞速变化的多媒体世界里占有一席之地，学习这门课程将是一个 很好的开端，是信息时代发展、信息传播的多元化艺术化、提升综合素质与能力、很好的开端，是信息时代发展、信息传播的多元化艺术化、提升综合素质与能力、 未来就业等需要。未来就业等需要。 互动媒体设计专业简介 l职业前景职业前景 网络艺术总监网络艺术总监 多媒体设计者多媒体设计者 网站设计者开发者网站设计者开发者 动画设计者动画设计者 三维平面设计者与动画设计者三维平面设计者与动画设计者

5、影视制作与后期制作影视制作与后期制作 互动媒体设计作品欣赏互动媒体设计作品欣赏 l 短片短片 l MTVMTV l 网站网站 互动媒体设计概论互动媒体设计概论 二、认识网页设计二、认识网页设计 1998年举行的联合国新闻委员会年会上，安年举行的联合国新闻委员会年会上，安 南指出：在加强传统的文子和声像传播手段的同南指出：在加强传统的文子和声像传播手段的同 时，应利用最先进的第四媒体时，应利用最先进的第四媒体Internet（互联（互联 网络），以加强新闻传播工作。从此，网络成为网络），以加强新闻传播工作。从此，网络成为 一种大众传播媒体被人们接受。一种大众传播媒体被人们接受。 网页从最早的以文

6、字为主的页面，发展到今网页从最早的以文字为主的页面，发展到今 天图、文、声、像、多媒体并茂的页面，从以静天图、文、声、像、多媒体并茂的页面，从以静 态网页为主，发展到要求功能与艺术视觉审美兼态网页为主，发展到要求功能与艺术视觉审美兼 得的动态页面。艺术与技术结合，正成为如今网得的动态页面。艺术与技术结合，正成为如今网 页设计领域研究的时尚内容。页设计领域研究的时尚内容。 （一）、网页媒介信息分类（一）、网页媒介信息分类 1、 文文 字字 2、 图图 像像 3、 声声 音音 4、 视视 频频 5、 动动 画画 （二）、网页结构基本形式：（二）、网页结构基本形式： 1、分栏结构形式、分栏结构形式

7、运用最广泛的页面结构形式，是一种规范、理性的页面空间分割方法，运用最广泛的页面结构形式，是一种规范、理性的页面空间分割方法， 为网页发展最初阶段页面形态。利用表格布局大框架进行制作，从横向或纵为网页发展最初阶段页面形态。利用表格布局大框架进行制作，从横向或纵 向上分为通栏、双栏、三栏或四栏，类似于报刊的版式，适合信息量大的网向上分为通栏、双栏、三栏或四栏，类似于报刊的版式，适合信息量大的网 站。站。 2、框架结构形式、框架结构形式 利用辅助线、插图、色彩等元素，使页面划分按规则或不规则的框架结利用辅助线、插图、色彩等元素，使页面划分按规则或不规则的框架结 构形成若干主题区域。一般根据信息内容特

8、点，以视觉元素进行区域安排和构形成若干主题区域。一般根据信息内容特点，以视觉元素进行区域安排和 界定。界定。 3、开放结构形式、开放结构形式 大胆地综合运用平面构成原来和形式法则进行图文布局，布局自由活泼、大胆地综合运用平面构成原来和形式法则进行图文布局，布局自由活泼、 形式灵活多变、时尚个性，适合形象容量不大、主题较为单一、注重形象创形式灵活多变、时尚个性，适合形象容量不大、主题较为单一、注重形象创 意的网站。意的网站。 4、综合式、综合式 综合以上特点，表现为网站整体策划。综合以上特点，表现为网站整体策划。 * 范例分析范例分析 二、网页结构基本形式： l分栏结构形式 l框架结构形式 l开

9、放结构形式 （二）、网页结构基本形式：（二）、网页结构基本形式： 1、分栏结构形式、分栏结构形式 运用最广泛的页面结构形式，是一种规范、理性的页运用最广泛的页面结构形式，是一种规范、理性的页 面空间分割方法，为网页发展最初阶段页面形态。利用表格面空间分割方法，为网页发展最初阶段页面形态。利用表格 布局大框架进行制作，从横向或纵向上分为通栏、双栏、三布局大框架进行制作，从横向或纵向上分为通栏、双栏、三 栏或四栏，类似于报刊的版式，适合信息量大的网站。栏或四栏，类似于报刊的版式，适合信息量大的网站。 2、框架结构形式、框架结构形式 利用辅助线、插图、色彩等元素，使页面划分按规则利用辅助线、插图、色

10、彩等元素，使页面划分按规则 或不规则的框架结构形成若干主题区域。一般根据信息内容或不规则的框架结构形成若干主题区域。一般根据信息内容 特点，以视觉元素进行区域安排和界定。特点，以视觉元素进行区域安排和界定。 * 范例分析范例分析 （二）、网页结构基本形式：（二）、网页结构基本形式： 1、分栏结构形式、分栏结构形式 2、框架结构形式、框架结构形式 3、开放结构形式、开放结构形式 大胆地综合运用平面构成原来和形式法则进行图文布大胆地综合运用平面构成原来和形式法则进行图文布 局，布局自由活泼、形式灵活多变、时尚个性，适合形象局，布局自由活泼、形式灵活多变、时尚个性，适合形象 容量不大、主题较为单一、

11、注重形象创意的网站。容量不大、主题较为单一、注重形象创意的网站。 * 范例分析范例分析 （二）、网页结构基本形式：（二）、网页结构基本形式： 1、分栏结构形式、分栏结构形式 2、框架结构形式、框架结构形式 3、开放结构形式、开放结构形式 大胆地综合运用平面构成原来和形式法则进行图文布大胆地综合运用平面构成原来和形式法则进行图文布 局，布局自由活泼、形式灵活多变、时尚个性，适合形象局，布局自由活泼、形式灵活多变、时尚个性，适合形象 容量不大、主题较为单一、注重形象创意的网站。容量不大、主题较为单一、注重形象创意的网站。 4、综合式、综合式 综合以上特点，表现为网站整体策划。综合以上特点，表现为网

12、站整体策划。 * 范例分析范例分析 （三）、网页设计制作（三）、网页设计制作程序程序 前期创作前期创作 中期制作中期制作 后期处理后期处理 策划、资料的收集整理、主题定位、栏目结构规划、策划、资料的收集整理、主题定位、栏目结构规划、 logologo设计、整体视觉创意、背景设计、页面排版布设计、整体视觉创意、背景设计、页面排版布 局与色彩设计、局与色彩设计、bannerbanner动画设计、按钮与链接设计、动画设计、按钮与链接设计、 声音设计等，画面分页设计稿；声音设计等，画面分页设计稿； 排版布局细化、背景绘制、造型制作、动画制作、排版布局细化、背景绘制、造型制作、动画制作、 按钮制作、声音

13、添加按钮制作、声音添加等；等； 动作语言的添加、交互链接、作品的测试、优化动作语言的添加、交互链接、作品的测试、优化 与发布与发布等等. . （四）、网页艺术设计常用软件（四）、网页艺术设计常用软件 早期：早期：Frontpage Adobe Golive JavaScriptFrontpage Adobe Golive JavaScript等等 目前：网页三剑客：目前：网页三剑客：FlashFlash、DreamweaverDreamweaver、Fireworks Fireworks 现在一般用现在一般用PSPS代替代替 FireworksFireworks JavaScript JavaScript等专业级网站编程等专业级网站编程 l创意网站作品欣赏创意网站作品欣赏 第一周课后采集分析实践第一周课后采集分析实践: : 1 1、请在自己的电脑上完成、请在自己的电脑上完成flash cs6软件的安装；软件的安装； 2 2、搜集创意型网站范例作品、搜集创意型网站范例作品1-21-2