3.1 刷屏级的超级H5创意设计

如今，H5中应用的技术越来越多，从而增加了H5的可玩性，这也是吸引用户参与、分享的动力所在。火热的H5刷爆了朋友圈，创意无限、玩法新颖、层出不穷。轻量化的H5更容易被大众所接受，吸引用户的眼球，从而形成病毒式传播。

因此，H5营销人员需要掌控时下流行的核心技术，为H5作品注入更多前沿玩法和创意设计，先声夺人，制作出刷屏级的超级H5作品，抢占市场营销高地。

3.1.1 展示型H5场景

静态展示级的H5页面主要用来展示各种信息，其效果与PPT类似，这种H5的制作成本低，加载速度快，可以用来进行产品推广或品牌宣传。

如图3-1所示，就是一家餐厅七夕活动的静态展示级H5页面，以喜庆的红色作为主色调，展示各种优惠促销活动信息，可以增强火热、浪漫的活动气氛。

对于技术人员来说，制作这种类型的H5页面比较简单，通常可以先制作好一个个静态的页面，然后再考虑整个画面的动态切换展示效果即可。也就是说，每一个页面虽然是静态的，但各种元素的显示效果，以及页面与页面之间的切换，还是可以添加一些动态效果，让H5看上去简约而不简单。

3.1.2 交互型H5场景

交互型的H5场景应用主要是通过各种视频、动画元素来加强画面的交互性，具有传播速度快的特点，而且可以通过分享和邀请好友来进行互动，形成病毒式的传播，使更多的用户了解到活动详情并参与其中。例如，Mugeda就是一个H5交互融媒体内容制作与管理平台，其主要功能和特色如图3-2所示。

例如，《情人节模板——爱在四季》是Mugeda平台上的一个动画交互型H5页面，如图3-3所示，它运用动画对白的形式，将图文很好地结合在一起，图片简单但很有故事情节，仿佛是看漫画，同时充满情感的文案内容也很容易引起大家的共鸣。

又如，《纪念碑谷2安卓上线》是由纪念碑谷官方推出的一个运用简单交互视频的H5页面，如图3-4所示。打开H5后，用户可以通过点击和滑动等操作来探索剧情内容，交互体验做得很不错。

3.1.3 游戏型H5场景

前面两种H5虽然都有一些简单的互动性，但其展示作用还是占了大部分。这里要介绍的游戏型H5场景则具有很强的互动性，支持用户的互动参与。H5游戏可以说是五花八门，如连连看、大转盘、抓蝴蝶以及捉迷藏等，通过将品牌或产品植入H5游戏中，让用户自发地在社交网络中进行转发传播，从而扩大品牌或产品的知名度。H5游戏的主要特点如图3-5所示。

例如，《豌豆荚：像素世界通行证》是由豌豆荚推出的一个H5小游戏，如图3-6所示。打开后，可以点击中间的相机按钮上传照片。

选择照片并确认取景范围后，点击“确定”按钮，还可以在照片上添加各种有趣的小道具，设计属于你专属的“像素世界通行证”，如图3-7所示。从这里开始就体现出H5游戏的互动性了，通过使用不同的道具，以及不同的摆放位置，可制作出不同的照片效果。

制作完成后，点击“马上生成”按钮，即可生成一张“像素世界通行证”。非常有趣吧，用户也可以点击“告诉好友”按钮，根据操作提示分享给其他好友玩，如图3-8所示。游戏H5讲究的要点就是“玩”，一定要和用户多做互动，让他们来参与、来规划，调动用户的积极性。

通过游戏化的H5活动营销，将品牌元素融入H5游戏，不但可以打造极致的用户体验，而且可以带来更高的转化率。游戏化营销是时下的潮流趋势，通过H5游戏与微信强强联合，可以产生良好的“化学反应”，其作用如图3-9所示。因此，企业可以选择一个好的H5游戏制作平台，来进行游戏化营销，不但省时省力省钱，而且更加有趣有效。

1. 高参与

游戏化营销主要通过休闲有趣的方式，让品牌与用户实现互动，更加容易被用户接受。例如，《我健康 更出彩》是由老百姓大药房推出的一个H5产品宣传，采用游戏形式，具有很好的互动性，在游戏过程中，随着颜色的变化会出现相关的药品信息，如图3-10所示。

2. 易连接

利用H5实现互联网游戏化营销，比较鲜明的特点就是容易连接，用户通过扫描二维码，或者点击链接的形式，即可参与游戏。

同时，游戏化营销可以非常方便地与抽奖、优惠券、表单、排行榜以及第三方发奖等多种H5营销方式相结合，带来更强的用户黏性。

3. 强分享

游戏营销具有一定的挑战性，同时会显示用户分数和微信排行榜，可以满足用户的炫耀心理。另外，大部分H5游戏都带有奖励机制，可以激发用户主动去传播。

制作完H5游戏后，通常会自动生成二维码和活动链接，用户可以将其添加到微信公众号菜单、公众号文章、文章阅读原文链接等渠道，也可以通过微信群、微信朋友圈、QQ、微博等进行传播推广。

4. 低成本

很多平台都提供了高度灵活的H5游戏模板，即使你没有任何技术开发经验，也可以快速套用模板制作一个游戏营销活动，如图3-11所示，对于开发时间和制作成本来说，都能有效地降低。另外，品牌与促销信息可以软性植入H5游戏中，用户的接受程度更高，有利于销售转化。

5. 易转化

相关数据统计显示，图片和公众号营销的转化率只有1%，而H5游戏化营销的转化率则高达17%，远远高于传统的微信营销方式。由于H5游戏化营销易于转化，企业一旦制作好了一款H5游戏，其边际成本也会越来越低。边际成本指的是每一单位新增生产的产品带来的总成本的增量。

《奔跑吧外卖小哥！》是果子奶茶利用凡科互动推出的一次现金券H5营销活动，如图3-12所示。果子奶茶通过跑酷游戏这种既有趣又有效的营销方式，可以很好地实现二次引流，是餐饮行业引导二次消费的很好案例。

在H5游戏中，将各种游戏元素替换为自家的品牌元素，可加强用户的记忆。同时，在线下运用二维码来引流，将二维码贴在饮料杯子上，并注明“玩游戏，赢大奖”的字样，顾客扫码后即可玩游戏抽奖。当顾客通过H5游戏中奖后，通常会将兑奖券收藏起来，可以在下次继续点外卖或现场消费时使用。

据悉，这个活动持续了3周半，参与《奔跑吧外卖小哥！》H5游戏的人数达到2万多，而且奶茶店日均外卖单也增加了500单。

将AR、VR等新技能与H5相结合，可以给用户带来一种全新的移动营销体验，产生极强的现场体验感，让用户完全沉浸在H5的虚拟世界中，享受满满的创意感。

3.1.4 技术型H5场景

技术型的H5场景应用主要是运用各种炫酷的技术作为卖点，吸引人们关注和使用，如图3-13所示。

【专家提醒】

SVG是一种使用XML技术描述二维图形的语言，是一种矢量图。在H5中，开发者能够将SVG元素直接嵌入HTML页面中。另外，与JPEG和GIF等图像格式比起来，SVG的尺寸更小，而且具有更强的压缩性。

不同的技术可以实现不同的H5动态效果，而且这种类型的H5看上去要更具档次，除了需要美工设计参与外，还需要掌握专业技术的人员来开发，搭建出更高层次的H5营销场景。

例如，《狗年大吉 摇一摇抽签》是一个利用陀螺仪和摇一摇技术制作的H5页面，我们通过摇一摇手机，即可抽取新年福签，如图3-14所示。在制作H5营销活动时，也可以将这种技术运用其中，增加H5的交互性。

3.1.5 模拟型H5场景

那些优秀的H5营销案例，通常都具有一定的亮点，如精致的创意策划、精美的视觉设计以及精彩的互动体验等，可以让用户快速地联想到具体的情景或者回忆某个场景。因此，很多H5营销都开始借鉴各种模拟手机或微信的趣味营销方式，来让H5快速刷爆朋友圈。

场景模拟型H5主要通过真实地营造某种特定场景，如来电、朋友圈以及微信消息等，让用户置身于这些场景中，给他们带来亲临现场的感觉，从而实现H5的交互和传播效果，如图3-15所示。

如今，随着H5技术的发展，很多H5开发平台都提供了多种模拟场景的H5模板，我们可以快速打造出以假乱真的情景，如图3-16所示。

在H5中你可以随意模拟出各种各样的场景，当然还要学会将品牌、产品和这些创意的模拟场景相结合。如果你找不到很好的场景，那么也可以尝试将实现生活中的各种场景添加到H5中，去深度挖掘更多的创意。

1. 朋友圈场景模拟

朋友圈营销是如今最火爆的营销方式，无论是大型企业还是小型企业，都会利用朋友圈进行营销，朋友圈已经成为企业实现销售目标的一个重要入口。

基于朋友圈强大的社交分享属性，不论是什么类型的企业，在朋友圈中营销都不能引起微信好友的反感，因此，不仅要打造和建立企业品牌及产品的良好形象，还需要有足够多的人流来进行推广和营销。

那么，企业要怎样通过微信朋友圈这种强黏性来进行营销呢？如果在朋友圈刷屏，可能会被好友屏蔽、拉黑；如果直接在朋友圈发广告，高昂的价格又无法承受。此时，如果我们可以自己做一个模拟朋友圈进行宣传，那就很完美了。

例如，“模拟朋友圈”是人人秀推出的一个H5插件，可以帮助我们快速模拟一个虚拟的朋友圈，不但制作成本较低，而且还不会被好友屏蔽。如图3-17所示，《八娃诞生记》就是使用“模拟朋友圈”插件制作的H5页面。

在这个朋友圈中，除了你自己的昵称外，其他用户的昵称和评论都是虚拟的，而且这一切你都可以自己控制，同时还可以模仿各种名人朋友圈，而且还能将自己或者好友的微信头像加入到这个朋友圈中，使其看上去更加真实，从而达到立体化宣传营销的效果。当然，模拟朋友圈只是一个引子，我们将它加入到H5的主要目的就是吸引用户去点击。

2. 微信群聊场景模拟

通过人人秀的微信群聊功能，可以快速地在H5页面中模拟出一个微信群的社交圈，同时可以自定义聊天记录、自定义参与人员、设置聊天间隔和样式等，营造出人意料的有趣画面，迅速打响产品名号。

我们可以通过H5来模拟有趣的微信群聊画面，自导自演一场社交盛宴。例如，在《趣味企业宣传微信对话，大圣大闹天宫》这个H5页面中，模拟出非常真实有趣的微信群聊画面，并且将用户本人的头像置入其中，还可以对参与人数和每个人的头像、昵称进行设置，使群成员更加立体，如图3-18所示。

3. 指纹开屏场景模拟

指纹开屏是一种比较有创意的H5趣味营销方式，可以模拟用指纹解锁开屏的过程，让H5页面的互动性和趣味性得到增强。使用MAKA和人人秀都可以实现指纹开屏效果，其中人人秀还能设置指纹的样式，如图3-19所示。

如图3-20所示，为人人秀推出的一个企业《年会邀请函》H5场景，当用户使用手指长按屏幕时，会自动模拟扫描过程，当扫描条达到顶端时，即可自动解锁。

实际上，《年会邀请函》这个H5运用了人人秀的指纹开屏插件，当然，只是对指纹开屏的过程进行了模拟，并不是真正识别用户的指纹才能打开。指纹开屏一般可用于H5页面首页，吸引用户点击查看里面的内容，如图3-21所示，为《年会邀请函》H5的内容页面。