摘 要

 

在当今移动互联网时代，由于HTML5 技术的发展，促进了广告行业的发展，由原始的文字广告、视频广告、语音广告、图片广告等转向新式的移动多媒体交互广告，HTML5 技术可以让网站拥有流畅的动画效果以及形式多样的交互效果，HTML5  的网页广告易于人们在微信等社交软件中传播。HTML5 技术可以实现文字、图片、音乐、视频以及交互集于一体， 简单明了的语法和丰富的媒体交互形式受到了开发者和使用者的喜爱。HTML5 交互广告将会成为一种流行，但是 HTML5 交互广告应用中存在模板套用、创意抄袭等问题。本文根据用户需求设计开发了用于一款智能家居“健康魔镜”概念品宣传的 HTML5 交互广告。设计开发过程从分析“健康魔镜”的广告设计需求和功能需求入手，然后根据需求设计广告的整体流程、表达内容、表现形式和用户交互，再根据设计进行交互广告的开发和实现，为了保证广告的可用性和正确性，对交互广告进行了测试，不断完善成品并给出改进建议。本文最后完成的基于 HTML5 Canvas 的交互广告具有故事创意独特、交互方式多样、交互环境体验立体化、交互数据显示实时化等特点，达到了毕业设计的选题要求。

 

关键词：HTML5，交互广告，多媒体，移动端开发

 

目 录

 

第 1 章 绪论 1

1.1研究背景及意义 1

1.2国内外研究现状 1

1.3研究内容及方法 2

1.3.1研究内容 2

1.3.2研究方法 3

1.4论文结构安排 3

第 2 章 HTML5 交互广告 4

2.1HTML5 技术概述 4

2.2HTML5 交互广告的历史和发展现状 4

2.2.1HTML5 交互广告的历史 4

2.2.2HTML5 交互广告的发展现状 4

2.3HTML5 交互广告分类 5

2.3.1游戏型HTML5 交互广告 5

2.3.2活动型HTML5 交互广告 5

2.3.3图文展示型HTML5 交互广告 6

2.3.4技术型HTML5 交互广告 7

2.4HTML5 交互广告的特点和优势 7

2.4.1开发的便捷性 7

2.4.2交互类型丰富 7

2.4.3多媒体形式 7

2.4.4传播途径的多维性 8

2.5HTML5 交互广告的设计原则 8

2.5.1用户为中心原则 8

2.5.2内容优先原则 8

2.5.3创新设计原则 8

2.5.4简单易用性原则 8

2.6HTML5 交互广告的设计步骤 8

2.6.1设定广告目标 8

2.6.2用户需求调研分析 8

2.6.3创意构思 9

2.6.4设计制作 9

2.6.5技术实现 9

第 3 章 用于健康魔镜宣传的交互广告的需求和设计 10

3.1用于健康魔镜宣传的交互广告的需求 10

3.1.1广告设计需求 10

3.1.2广告功能需求 10

3.1.3广告性能需求 10

3.2整体流程设计 10

3.3广告内容的设计 10

3.4广告表现形式的设计 14

3.5用户交互的设计 14

第 4 章 用于健康魔镜宣传的交互广告的开发 19

4.1开发工具的选择 19

4.2调用摄像头模拟魔镜的实现 19

4.3音乐控制的实现 19

4.4视频交互的实现 20

4.5运动小游戏的实现 21

4.5.1人物运动动画的实现 22

4.5.2动态数据的实现 24

第 5 章 用于健康魔镜宣传的交互广告的测试 26

5.1交互功能测试 26

5.2微信推广测试 28

5.3测试总结 28

第 6 章 总结与展望 29

6.1总结 29

6.2展望 29

参考文献 30

致 谢 32