| 第一章 可视化的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.界面转场交互动效 【本章难点】 界面交互动效的制作 | 
