2030783《融媒体设计与制作》教学大纲

课程名称

（中文）融媒体设计与制作

（英文）Design And Production Of Convergent Media

课程代码

2030783

课程学分

4

课程学时

64

理论学时

32

实践学时

32

开课学院

新闻传播学院

适用专业与年级

时尚传播专业三年级

课程类别与性质

专业必修课

考核方式

考查

选用教材

《移动UI交互设计与动效制作（微课版）》刘伦 王璞主编，人民邮电出版社，2023年4月第1版，ISBN号：9787115609854

是否为

马工程教材

否

先修课程

大学信息技术 平面设计

课程简介

本课程培养学生制作可视化的H5页面，掌握图文配对、预置动画、元件、轮播图片、帧行为交互、帧动画设计、运动镜头帧动画、特型动画、虚拟现实、微信定制、图表工具、表单工具等H5页面设计与制作技术，使学生具备制作H5商业展示类广告的能力。

同时，本课程对移动UI交互设计与动效制作的相关知识进行讲解，向学生介绍UI交互设计的基础知识，使学生对移动UI交互设计的概念、基本内容和基本流程等有全面、深入的理解。向学生介绍移动UI交互设计的细节与表现方式，使学生理解并掌握界面中不同UI元素的交互表现形式，从而有效地提升界面的交互表现效果。向学生介绍不同UI元素交互动效的表现方式，界面交互动效的相关知识，并通过案例的讲解，使学生掌握UI元素交互动效、界面交互动效的制作方法和表现方法。用户与作品交互过程中加入动效设计，可有效提升用户的交互体验。

选课建议与学习要求

本课程适合时尚传播专业学生大学三年级学习，本课程前应开设《大学信息技术》《平面设计》等课程，以使学生有相应的计算机基础知识以及初步图形图像编辑能力。

大纲编写人

制/修订时间

2024.05

专业负责人

审定时间

2024.06

学院负责人

批准时间

2024.06

LO1品德修养：拥护中国共产党的领导，坚定理想信念，自觉涵养和积极弘扬社会主义核心价值观，增强政治认同、厚植家国情怀、遵守法律法规、传承雷锋精神，践行“感恩、回报、爱心、责任”八字校训，积极服务他人、服务社会、诚信尽责、爱岗敬业。

⑤爱岗敬业，热爱所学专业，勤学多练，锤炼技能。熟悉本专业相关的法律法规，在实习

实践中自觉遵守职业规范，具备职业道德操守。

LO2专业能力：具有人文科学素养，具备从事时尚传播工作或专业的理论知识、实践能力。

③具备专业实务操作技能。具备时尚传播的采写编评、时尚摄影与摄像、时尚广告与时尚品牌营销、新媒体及设计软件技术、大数据分析等实操能力。

LO4自主学习：能根据环境需要确定自己的学习目标，并主动地通过搜集信息、分析信息、

讨论、实践、质疑、创造等方法来实现学习目标。

②能搜集、获取达到目标所需要的学习资源，实施学习计划、反思学习计划、持续改进，

达到学习目标。

LO6协同创新：同群体保持良好的合作关系，做集体中的积极成员，善于自我管理和团队管理；善于从多个维度思考问题，利用自己的知识与实践来提出新设想。

①在集体活动中能主动担任自己的角色，与其他成员密切合作，善于自我管理和团队管理，共同完成任务。

LO7信息应用：具备一定的信息素养，并能在工作中应用信息技术和工具解决问题。

③熟练使用计算机，掌握常用办公软件。

第一章 可视化的H5页面制作平台Mugeda

教学内容：

1.1 H5简介

1.1.1 H5是什么

1.1.2 H5的基本特征

1.1.3 H5编辑工具

1.1.4 H5案例展示与体验

1.2 Mugeda的基本功能与应用

1.2.1 Mugeda的基本功能

1.2.2 Mugeda的基本应用

1.3 体验H5页面制作过程

1.3.1 Mugeda基本操作流程与账号注册

1.3.2 数字账号操作

1.3.3 新建H5作品

1.3.4 编辑、删除和发布作品

1.3.5课堂实训——制作“自我介绍”H5

1.4 Mugeda的编辑界面及其操作

1.4.1 菜单栏

1.4.2 工具栏

1.4.3 页面栏、页面编辑区和舞台

1.4.4 工具箱

1.4.5 属性面板

1.4.6 课堂实训——图形变形练习

预期学习成果：  

通过本章教学，让学生了解H5的基础知识，熟悉Mugeda操作界面，掌握Mugeda基本操作流程。

重点难点：

【本章重点】

1.熟练掌握Mugeda操作界面。

2.掌握Mugeda基本操作流程。

【本章难点】    

Mugeda编辑界面属性面板的使用。

第二章 属性与基本的H5创作

教学内容：

2.1 工作台页面、作品管理页面的主要功能与操作

2.1.1工作台页面的基本结构及操作

2.1.2作品管理页面的主要功能及操作

2.2 舞台的属性与操作

2.2.1 操作任务——设置舞台的属性

2.2.2 课堂实训——新建作品练习

2.3 H5页面的基本设计与制作

2.3.1 页面的属性与操作

2.3.2 操作任务——“图文配对”游戏

2.3.3 课堂实训——“填字”游戏

2.4 预置动画

2.4.1 操作任务——“护眼台灯”产品广告

2.4.2 课堂实训——“公益宣传”广告

2.5 元件

2.5.1 操作任务——制作壁纸

2.5.2 课堂实训——“制作产品介绍H5作品

2.6 组与长页面

2.6.1 操作任务——制作轮播图片效果

2.6.2 课堂实训——制作照片轮播效果

2.7 模板的使用

2.7.1 模板的类型

2.7.2 操作任务——使用邀请函模板

2.7.3 课堂实训——制作母亲节贺卡

2.8 加载页的设置

2.8.1 加载页的设置操作

2.8.2 课堂实训——设计加载页

预期学习成果：

通过本章教学，让学生掌握使用Mugeda平台快速制作H5作品的方法和技巧。包括舞台、页面、预置动画、元件、长图及模板的使用。

重点难点：

【本章重点】

1.H5页面的基本设计与制作

2.组与长页面

3.模板的使用

【本章难点】  

1.预置动画

2.元件

第三章 行为、触发条件与交互

教学内容：

3.1 行为与触发条件

3.1.1 “醒一醒”动画制作与音乐控制分析

3.1.2 行为与触发条件介绍

3.2 时间线、图层和帧的概念与基本操作

3.2.1基本概念

3.2.2图层和帧的基本操作

3.3 帧行为交互设计与制作

3.3.1 操作任务——“看图猜成语”游戏

3.3.2 操作任务——“定时看图抢答”游戏

3.3.3 课堂实训——制作交互影集和交互游戏

预期学习成果：

通过本章的教学，让学生掌握行为与触发条件的设置方法，创作高质量、高水平H5作品。

重点难点：

【本章重点】

1.行为与触发条件

2.图层和帧的基本操作

【本章难点】

帧行为交互设计与制作

第四章 帧动画设计与应用

教学内容：

4.1 帧动画制作基础

4.1.1 制作帧动画的基本方法和过程

4.1.2 操作任务——“放气球”帧动画

4.2 动画帧的操作与动画中物体运动状态的变化

4.2.1 插入帧——将动画运动速度调慢

4.2.2 删除帧——将动画运动速度调快

4.2.3 复制帧——将动画重复播放

4.2.4 移动帧——调整动画中物体的运动时间

4.2.5 复制图层与复制帧

4.3 运动镜头帧动画制作

4.3.1 “街景”移镜头帧动画

4.3.2 “飞机飞行”跟镜头帧动画

4.3.3 “通道”推镜头帧动画

4.3.4 “共享单车”摇镜头帧动画

4.4 运动镜头帧动画设计制作案例

4.4.1操作任务——“倒霉的猫”帧动画

4.4.2课堂实训——运动镜头帧动画制作与应用

预期学习成果：  

通过本章的教学，让学生掌握利用帧动画技术创作出更细致、更复杂、更丰富多样的动画效果作品。

重点难点：

【本章重点】

1.动画帧的操作与动画中物体运动状态的变化

2.运动镜头帧动画制作

【本章难点】

运动镜头帧动画制作 

第五章 特型动画

教学内容：

5.1 进度动画

5.1.1 操作任务——“制作小房子”进度动画

5.1.2 课堂实训——制作“保护动物”动画广告

5.2 路径动画

5.2.1 操作任务——“UFO来了”路径动画

5.2.2 课堂实训——制作汽车动画广告

5.3 变形动画

5.3.1操作任务——“五角星变小汽车”变形动画

5.3.2课堂实训——制作LED灯的H5动画广告

5.4 遮罩动画

5.4.1 操作任务——“走光”动画效果

5.4.2 课堂实训——制作“走光”动画效果

5.5 元件动画

5.5.1 操作任务——“飞机群飞”动画

5.5.2 课堂实训——制作禁烟广告动画元件及作品

5.6 动画控制

5.6.1 操作任务——双按钮动画控制

5.6.2 操作任务——单按钮动画控制

预期学习成果：

通过本章教学，让学生掌握制作进度动画、路径动画、变形动画、遮罩动画、元件动画等特型动画的技巧和方法。

重点难点

【本章重点】

1.变形动画

2.遮罩动画

3.元件动画

【本章难点】

遮罩动画

第六章 实用工具及其应用

教学内容：

6.1 虚拟现实工具

6.1.1 制作虚拟场景

6.1.2 添加热点和编辑热点参数

6.1.3 播放控制设置

6.1.4 添加更多场景

6.1.5 课堂实训——制作室内虚拟现实场景

6.2 微信定制工具

6.2.1 微信头像

6.2.2 微信昵称

6.2.3 定制图片

6.2.4发布与使用

6.2.5 课堂实训——制作个性化微信页面

6.3 图表工具

6.3.1图表的制作方法

6.3.2 课堂实训——制作学生成绩图表

6.4 表单工具和数据统计

6.4.1操作任务——“城市人口爱好”调查表

6.4.2 数据统计

6.4.3 编辑表单

6.4.4 课堂实训——制作“最受游客欢迎的景区”调查表

6.5 预置考题工具

6.5.1操作任务——制作模拟练习题

6.5.2 课堂实训——制作练习题

6.6 陀螺仪工具

6.6.1陀螺仪工具的使用方法

6.6.2 课堂实训——制作“放孔明灯”交互页面

6.7 其他实用工具

6.7.1幻灯片工具

6.7.2 擦玻璃工具

6.7.3 点赞工具

6.7.4 绘画板工具

6.7.5 随机数工具

预期学习成果：

通过本章教学，让学生掌握Mugeda提供的实用工具使用技巧和方法来增强作品的交互性。如虚拟现实、图表、表单、预置考题、陀螺仪、幻灯片、擦玻璃、点赞、绘画板等。

重点难点

【本章重点】

1.虚拟现实工具

2.图表工具

3.表单工具和数据统计

4.陀螺仪工具

【本章难点】  

1.虚拟现实工具

2.表单工具和数据统计

第七章 移动UI交互设计基础

教学内容

7.1 了解UI设计

7.1.1　什么是UI设计

7.1.2　移动UI设计

7.1.3　移动UI设计的特点

7.2 了解移动UI交互设计

7.2.1　什么是交互

7.2.2　什么是交互设计

7.2.3　移动UI交互的特点

7.2.4　了解交互设计师

7.3 移动UI交互设计的内容和习惯

7.3.1　需要考虑的内容

7.3.2　需要遵循的习惯

7.3.3　用户体验与交互设计

7.4 移动UI交互设计的基本流程

7.5 需求分析

7.5.1　主动需求与被动需求

7.5.2　需求分析的流程

7.6 操作流程设计

7.6.1　操作流程的分类

7.6.2　操作流程的设计原则

7.7 信息架构设计

7.7.1　信息架构概述

7.7.2　信息架构设计的方法

7.8 原型设计

7.8.1　原型设计概述

7.8.2　原型设计的流程

预期学习成果：

通过本章的教学，让学生对移动UI交互设计的概念、基本内容和基本流程等有一个全面、深入的了解。

重点难点

【本章重点】

1．移动UI交互设计的需求分析；

2．移动UI交互的操作流程设计；

【本章难点】

理解移动UI交互的信息架构设计

第八章 UI元素交互设计

教学内容：

8.1　UI交互元素——文字

8.1.1　关于文字交互

8.1.2　UI中的字体应用

8.1.3　控制字体数量

8.1.4　体现文字层次感

8.1.5　文字排版方式

8.2　UI交互元素——图标

8.2.1　图标的作用

8.2.2　图标的表现形式及适用场景

8.2.3　实战——设计相机应用图标

8.3　图标交互的意义

8.3.1　预见性

8.3.2　美观性

8.3.3　统一性

8.3.4　如何保持图标的统一性

8.3.5　实战——设计线框功能图标

8.4　UI交互元素——按钮

8.4.1　 真实按钮与伪按钮

8.4.2　常见交互按钮样式与应用

8.4.3　如何设计出色的交互按钮

8.4.4　实战——设计微渐变按钮

8.5　UI交互元素——图片

8.5.1　UI中常用图片比例

8.5.2　UI中常见图片排版方式

8.5.3　实战——设计图片展示界面

8.6　UI交互元素——导航

8.6.1　底部标签导航

8.6.2　舵式导航

8.6.3　选项卡式导航

8.6.4　侧边式导航

8.6.5　实战——设计侧边交互导航界面

8.7　UI交互元素——表单

8.7.1　文本输入表单元素

8.7.2　搜索表单的常见表现形式

8.7.3　搜索表单的不同交互状态

8.7.4　实战——设计登录界面

预期学习成果：

通过本章学习，让学生理解并掌握界面设计中不同UI元素的交互表现形式，从而有效提升界面的交互表现。

重点难点

【本章重点】

1.图标元素的交互设计

2.导航元素的交互设计

3.表单元素的交互设计

【本章难点】

图标元素的交互设计

第九章 交互设计与用户体验

教学内容：

9.1　UI交互设计与用户体验

9.1.1　用户体验概述

9.1.2　基础体验类型

9.1.3　交互设计的作用

9.1.4　交互设计的5要素

9.2　界面交互设计

9.2.1　交互设计模式

9.2.2　合理的交互设计提升转化率

9.2.3　独特的UI交互技巧

9.3　可用性设计

9.3.1　什么是可用性

9.3.2　可用性的表现

9.3.3　实战——使用Adobe XD设计影视App界面

9.4　沉浸感设计

9.4.1　什么是沉浸感

9.4.2　沉浸感设计原则

9.4.3　实战——使用Adobe XD设计美食App界面

9.5　情感化设计

9.5.1　什么是情感化设计

9.5.2　互联网产品的情感化设计

9.5.3　UI情感化设计细节

9.5.4　实战——使用Adobe XD设计音乐App界面

9.6　优秀的UI界面交互具有哪些特点

9.6.1　明确系统状态

9.6.2　让按钮和操控拥有触感

9.6.3　有意义的转场动效

9.6.4　帮助用户开始

9.6.5　强调界面的变化

9.6.6　需要注意的细节

9.7　移动UI与网站UI的交互差异

9.7.1　设备尺寸不同

9.7.2　交互方式不同

9.7.3　使用环境不同

9.7.4　网络环境不同

9.7.5　基于位置服务的精细度不同

9.7.6　实战——使用Adobe XD设计家具App界面

预期学习成果：

通过本章的教学，让学生理解交互设计与用户体验之间的关系，并掌握如何通过出色的交互设计来提升产品的用户体验。

重点难点

【本章重点】

1.界面交互设计

2.可用性设计

3.情感化设计

【本章难点】

优秀的UI界面交互所具有的特点

第十章UI元素交互动效

教学内容：

10.1　交互动效与UI设计

10.1.1　UI动效概述

10.1.2　优秀的交互动效具有哪些特点

10.1.3　交互动效的优势是什么

10.1.4　功能型动效与展示型动效

10.2　使用动效表现UI交互

10.2.1　转场过渡

10.2.2　层级展示

10.2.3　空间扩展

10.2.4　关注聚焦

10.2.5　内容呈现

10.2.6　操作反馈

10.3　开关按钮交互动效

10.3.1　开关按钮的功能与特点

10.3.2　实战——制作开关按钮交互动效

10.4　加载进度交互动效

10.4.1　了解加载等待动效

10.4.2　常见加载进度动效表现形式

10.4.3　实战——制作加载等待动效

10.5　文字交互动效

10.5.1　文字动效的表现优势

10.5.2　常见文字动效表现形式

10.5.3　实战——制作动感遮罩文字动效

10.6　图标交互动效

10.6.1　常见图标动效表现形式

10.6.2　实战——制作相机图标动效

10.6.3　实战——制作线框图标动效

10.7　导航菜单交互动效

10.7.1　交互导航菜单的优势

10.7.2　交互导航菜单的设计要点

10.7.3　实战——制作测滑导航菜单交互动效

预期学习成果：　

通过本章学习，让学生了解不同UI元素交互动效的表现方式以及制作要点，掌握UI元素交互动效的制作方法和表现方法。

重点难点

【本章重点】

1.开关按钮交互动效

2.加载进度交互动效

3.文字交互动效

4.图标交互动效

5.导航菜单交互动效

【本章难点】

使用动效表现UI交互

第十一章 界面交互动效

教学内容：

11.1　如何设计界面交互动效

11.1.1　首先需要有一个创意想法

11.1.2　根据想法进行丰满实现

11.1.3　实战——制作智能家居App界面转场动效

11.2　界面交互动效表现形式

11.2.1　常见界面动效表现形式

11.2.2　实战——制作界面功能展开动效

11.3　界面转场交互动效

11.3.1　常见的界面转场动效形式

11.3.2　界面转场交互动效设计要求

11.3.3　实战——制作登录转场交互动效

11.4　界面交互动效设计规范

11.4.1　界面动效设计要点

11.4.2　通过交互动效设计提升界面用户体验

11.4.3　实战——制作界面图片翻页交互动效

预期学习成果：　

通过本章学习，让学生了解界面交互动效的相关知识，掌握界面交互动效的制作方法。

重点难点

【本章重点】

1.界面交互动效表现形式

2.界面转场交互动效

【本章难点】

界面交互动效的制作

1.讲授法：通过课堂讲授，使学生掌握H5及UI设计理论基础与技能。教授学生设计与社会发展的关系；引导学生在融媒体作品设计时，传承中国传统文化与创新结合。

2.实践法：组织学生进行融媒体作品设计实践，通过不同练习方法，提高技能水平。培养学生正确的审美观念和文化自信。

3.讨论法：围绕融媒体设计作品的社会价值与文化内涵，引导学生展开讨论，培养学生的思辨能力，提升学生的社会责任感和道德情操。

4.案例分析法：通过分析优秀融媒体设计作品，让学生感受艺术的魅力与社会价值。引导学生关注社会问题，通过设计作品传递正能量；

总之，课堂案例以及练习案例多结合时尚传播专业培养目标以及结合中国传统文化和革命历史，帮助学生热爱本专业，更好地学习中国传统文化知识，构建爱党爱国的理想信念，课程思政与教学内容相结合，激发学生的民族自豪感和责任感。

总评构成

占比

考核方式

课程目标

合计

1

2

3

4

5

6

X1

15%

课堂参与+作品汇报演示

20

20

30

30

100

X2

30%

课堂操作练习

40

40

10

10

100

X3

20%

课后操作练习

40

40

10

10

100

X4

35%

期末考查

10

10

30

30

10

10

100

无