H5+交互融媒体设计

伴随着5G的发展，大数据、云计算等信息技术为媒体融合及更深层次的创新提供了更有力的支撑，融媒体产品的形式更丰富、技术更优选、传播面更广了。H5在对娱乐、营销、公益等各领域全方位渗透的同时，在党政类主流媒体领域迎来了爆发期。广播电视、纸媒日渐衰微的数字媒体时代，H5将传统媒体与新媒体的优势发挥到很好，使单一媒体的竞争力变为多媒体共同的竞争力。拥有跨终端、跨平台、无须本地下载等众多优势的H5移动端交互产品，传播迅速、用户体验新颖、容易吸引大众的注意力，对于新政策的解读、重大新闻事件的报道、节日庆典的展示、思想教育的引领都有良好的传播作用。为了加强和大众更好地沟通，H5在党政官媒中的地位逐渐上升。尤其是2020年疫情期间，腾讯新闻、丁香医生等媒体平台相继推出的疫情追踪类H5，精准定位到身处疫情中的人们的需求痛点，再次将H5引向高度。

李戈，女，教授，就职于杭州电子科技大学，杭州电子科技大学数字媒体与艺术设计学院数字媒体艺术系

第1章 认识H5交互融媒体
1.1 什么是H5
1.2 为什么要做H5
1.3 H5的应用领域
1.4 APP、H5、小程序有什么不同
1.5 H5设计工具有哪些
1.6 去哪里找H5案例和素材
第2章 H5设计流程
2.1 产品化设计思路
2.1.1 H5的设计目标
2.1.2 什么是优秀的H5
2.2 H5的创作流程
2.2.1 确立设计目标
2.2.2 讲一个好故事
2.2.3 选择与项目对应的形式
2.2.4 H5交互原型设计
2.2.5 分页设计
2.2.6 H5平台选用
2.2.7 发布推广
2.2.8 数据总结分析
2.3 设计中需要注意的事项
第3章 H5视觉设计技巧
3.1 H5页面设计规范
3.1.1 H5页面设计尺寸
3.1.2 H5的响应式特征
3.1.3 页面的安全区
3.2 H5的色彩选择
3.2.1 色彩是决定H5氛围的关键
3.2.2 色彩的情感
3.2.3 色彩的配色法
3.2.4 配色工具推荐
3.3 页面版式设计技巧
3.3.1 创造画面焦点
3.3.2 页面中的图版率
3.3.3 制造画面的层次感
3.3.4 H5页面的节奏感
3.4 文字设计
3.4.1 标题设计
3.4.2 正文设计
第4章 交互、动效、动画与声音的设计
4.1 产品中的交互设计
4.1.1 H5中的交互设计
4.1.2 H5交互方式
4.1.3 H5交互设计注意事项
4.2 何为动效
4.2.1 动效的分类
4.2.2 动效设计原则
4.2.3 动效设计中要注意的事项
4.3 动画与视频的融合
4.3.1 H5中动画形式
4.3.2 视频动画注意事项
4.4 背景音效
4.4.1 H5音效设计技巧
4.3.2 音画对位关系
4.4.3 H5音效注意事项
第5章 木疙瘩平台基础功能及详解
5.1 界面
5.1.1 舞台
5.1.2 时间轴
5.1.3 工具栏
5.1.4 属性栏
5.1.5 发布
5.1.6 数据统计
5.2 动画基础功能
5.2.1 时间轴是什么
5.2.2 通过时间轴制作简单的动画
5.2.3 元件的概念及运用
5.2.4 预置动画
5.3 交互的基础功能
5.3.1 行为
5.3.2 条件
5.4 基础工具
5.4.1 多媒体内容的导入与控制
5.4.2 绘制工具的运用
5.5 高级工具
5.5.1 表单
5.5.2 预设控件的使用
5.5.3 预设交互工具
第6章 案例示范
6.1 学生H5作品设计分享
6.1.1 案例《有一种青春叫周杰伦》
6.1.2 案例《我们真的是您最差的一届吗？》
6.1.3 案例《十八洞村开播了》
6.1.4 案例《归途》
6.2 常用课件案例示范
6.2.1 点击选择类交互习题
6.2.2 拖动类交互习题
6.2.3 连线类交互习题
6.2.4 手绘类交互习题
6.3 H5融媒产品在教育领域发展趋势
6.4 H5融媒产品在新闻媒体领域发展趋势