第1章
H5初识
本章介绍
随着移动互联网的兴起，H5逐渐成为了互联网传播领域的一个重要传播形式，因此学习和掌握H5成为了广大互联网从业人员的重要技能之一。本章对H5的定义、发展、特点、应用以及类型进行系统讲解。通过对本章的学习，读者可以对H5有一个宏观的认识，有助于高效熟练地进行后续的H5设计制作。
学习目标
·掌握H5的定义
·了解H5的发展
·了解H5的特点
·熟悉H5的应用
·熟悉H5的类型
H5初识
1.1
H5的定义
H5指的是移动端上基于HTML5技术的交互动态网页，是用于移动互联网的一种新型营销工具，通过移动平台（如微信）传播，如图1-1所示。
图1-1
1.2
H5的发展
H5的发展可分为开始阶段、引爆阶段、绽放阶段以及成熟阶段。
1. 开始阶段
H5的开始可以追溯到2014年，其最初的呈现状态和PPT类似，将经过简单设计的静态页面设置成滑动翻页效果，常用于婚礼邀请、企业招聘等，图1-2所示为免费婚礼邀请函模版。
图1-2
扫码观看本案例
2. 引爆阶段
2014年下半年，一款名为“围住神经猫”的H5小游戏，如图1-3所示，引爆了微信朋友圈，最后页面浏览量达数亿级。随后相继产生的“看你有多色”等小游戏，让H5真正地开启了引爆。
图1-3
3. 绽放阶段
2015年—2016年是H5的全面绽放阶段。在这一阶段中的H5交互设计酷炫、表现形式新颖，以最大限度加强用户参与感，提高用户分享H5的意愿，如图1-4所示。
图1-4
4. 成熟阶段
2017年后，H5慢慢褪去了一些复杂酷炫的交互效果，开始走向成熟。这一阶段的H5轻互动，重内容，传播量最大的主要有两种形式，一种是纯视频类H5，另一种是测试类H5，如图1-5所示。
图1-5
1.3
H5的特点
H5具有跨平台、多媒体、强互动以及易传播的特点，如图1-6所示。
图1-6
1.4
H5的应用
H5的应用形式多样，常见的应用有品牌宣传、产品展示、活动推广、知识分享、新闻热点、会议邀请、企业招聘、培训招生等，如图1-7所示。
图1-7
1.5
H5的类型
H5的类型可分为营销宣传、知识新闻、游戏互动以及网站应用这四类。
1. 营销宣传类
营销宣传类H5是最常见的，它通常是为产品、品牌以及活动做宣传推广而设计的，如图1-8所示。
图1-8
2. 知识新闻类
知识新闻类H5同样比较普遍，它通常是根据社会重大事件进行新闻宣传、知识普及的，如图1-9所示。
图1-9
3. 游戏互动类
游戏互动类H5中的游戏一般比较简单，在微信中点开就可以直接玩，不用安装卸载，这类H5通常为娱乐或引流而制作，如图1-10所示。
图1-10
4. 网站应用类
网站应用类H5在产品设计领域中常被称为“H5网站”，可以直接在浏览器中观看和操作，不像App那样需要安装，它通常带有大量信息及App中的部分功能，如图1-11所示。
图1-11
第2章
H5的设计与制作
本章介绍
从0到1开始打造一款H5，这是策划、交互设计、设计制作以及制作开发相互配合的综合过程。本章对H5设计与制作的项目流程、常用软件、基本规范、注意事项以及创意方法进行系统讲解。通过对本章的学习，读者可以对H5的整体设计与制作有一个基本的认识，有助于高效熟练地进行后续的H5设计和制作。
学习目标
·了解设计与制作H5的项目流程
·熟悉设计与制作H5的常用软件
·掌握设计与制作H5的基本规范
·掌握设计与制作H5的注意事项
·熟悉设计与制作H5的创意方法
H5的设计与制作
内容提要
本书全面系统地介绍了H5技术的相关知识点和基本制作方法，包括H5初识、H5的设计与制作、互动游戏H5制作、活动抽奖H5制作、测试问答H5制作、滑动翻页H5制作、长页滑动H5制作、画中画H5制作、3D/全景H5制作以及视频动画H5制作等内容。案例涉及易企秀、凡科、iH5等主流平台与Photoshop软件的综合应用。