1.4 H5的应用类型

随着H5应用的火热，以H5传播信息的方式越来越受到年轻人的追捧，也得到了越来越多的企业的青睐。H5的应用类型多种多样，下面将对其进行简要介绍。

1.4.1 展示类

展示类H5是最常见的移动H5网页，因其交互形式简单（翻页）、制作快捷，所以应用非常广泛，如邀请函、多媒体新闻、相册、动态海报等，如图1-16所示。

1.4.2 全景/VR类

随着H5技术的发展与成熟，全景/VR类H5的应用已经成为行业流行趋势之一。全景是指借助手机的重力感应，用户可以滑动手机屏幕或移动手机，查看上下左右720°或360°的画面。这种互动让用户可以看到的视角更大，更有身临其境的体验。这类H5很考验设计师的设计能力，需要绘制很多的图片素材，才能形成层次感。

例如，北京日报联合快手出品的《40年大美时光》、华为荣耀出品的《我的荣耀5G世界》均为全景类H5，用户在旋转过程中点击画面中的提示按钮，就会显示相应的说明，如图1-17所示。

1.4.3 视频类

视频类H5大多以全屏视频的形式存在，能够减少其他因素对用户的干扰，用户对H5的体验不会轻易被中断，而且用视频能够展现出一些H5实现不了的特效，结合音乐和音效使用户全身心沉浸。例如，LEXUS出品的《这是个说不出来的故事》、百度和小度商城联合出品的《全国家长崩溃实录》均为视频类H5，如图1-18所示。

1.4.4 动画类

动画类H5以全屏动画为主，大多通过讲述故事来吸引用户的注意力，整个动画几乎没有交互（类似动画类视频），或者只使用简单的交互（如点击按钮后继续播放），当故事进入尾声时一般会出现一屏广告画面。例如，腾讯追梦计划联合腾讯游戏出品的助盲公益活动《让爱看得见，宇宙即吾心》、腾讯电竞出品的《都到最好的时刻，你还不上》均为动画类H5，如图1-19所示。

1.4.5 交互动画类

交互动画类H5与动画类H5最大的区别就是交互动画类H5增加了交互功能，动画的播放是用户进行控制的。例如，一汽大众联合网易新闻联合出品的《下一站，有面儿生活！》、OPPO出品的《巴斯克维尔的传说》均为交互动画类的H5，如图1-20所示。

1.4.6 模拟类

模拟类H5曾经很火，主要形式是对各种设备的模拟，如模拟来电、短信、微信聊天界面、微信朋友圈、手机界面、各类App等。例如，凯迪拉克出品的《一份特别的中秋礼物，等待接收！》、有道精品课出品的《我提前查到了我的高考分数》均为模拟类H5，如图1-21所示。

1.4.7 合成类

合成类H5一般以恶搞、幽默、新奇等形式居多，用户上传图片合成与明星的合影，或者填写名字生成新闻头条、合成海报、合成证件等。例如，苏宁易购出品的《穿越70年，见证大国崛起》、有道精品课和《经典咏流传》节目联合出品的《生成你的专属印章》均为合成类H5，如图1-22所示。

1.4.8 数据应用类

数据应用类H5是用于数据统计、收集或展示的H5，其应用场景很丰富，包括抽奖、测试、投票等，创作上的空间很大，但也比较考验设计者的逻辑。例如，网易新闻联合乐敦滴眼液出品的《乐敦护眼工程，开启移动验眼新时代》、腾讯出品的《QQ个人轨迹》均为数据应用类H5，如图1-23所示。

1.4.9 游戏类

游戏类H5按照用途可以分为两类，一类是纯游戏，如棋牌游戏、吃豆人、钢珠迷宫游戏等；另一类是营销游戏，会在游戏的基础上增加排名设定，在游戏结束时显示导流页。例如，腾讯新闻出品的《垃圾分类大挑战》、京东出品的《你妈来你家》均为游戏类H5，如图1-24所示。

1.4.10 跨屏类

跨屏类H5的互动不仅包括用户与H5内容的互动，还包括人与人、商家与消费者的互动。它可以是双屏互动，也可以是线下活动互动利器，如大屏投票、评论上墙等。例如，第一个人打开H5后，第二个人通过扫描第一个人手机屏幕上的专属二维码，进入H5互动场景，如图1-25所示。

1.4.11 综合类

一个优秀的H5作品往往综合了多种不同的技术，除了翻页以外，还有点击、输入文字、擦除屏幕、滑动屏幕、重力感应、摇一摇等，玩法非常丰富。例如，腾讯出品的暗室解密游戏H5《记忆重构》，以真人电影片段作为背景介绍、线索提示和答案揭晓，穿插各种互动效果，让用户达到身临其境的体验感受，如图1-26左图所示。

又如，36氪出品的《没想到明日城》，就是线上问答测试类型的H5作品，用户在H5中穿梭于“明日城”，对遇到的多个事件进行结果选择，最后生成海报，抽取优惠券，如图1-26右图所示。

课后习题

1. 简述H5是什么。

2. 简述H5营销的优势。

3. 简述H5有哪些应用类型。