前段时间：创意H5相关内容，引流获客、营销变现、分享传播

fanny

前段时间，在《以考拉海外代购为例，拆解活动策划流程&创新玩法》一文中提到，我将分享“策划流程，吸引客户，变现营销，分享传播，通过活动提升活跃度”系列文章”。,  H5 ” 我的产品营销案例研究。

本篇主要分享“创意H5”相关的内容，至此本系列文章告一段落。欢迎读者朋友查看我的历史文章。

不知道大家有没有和我一样，发现这两年微信上传播的H5作品已经很少了？更多的是一些短视频，还有电商直播的兴起。事实上，相比于短视频和电商直播，H5一直是富文本内容传播、创意营销和人机交互的好工具。说到这里，就会有些留恋。

第一次接触 H5 大概是在 2014 年左右。

先科普一下：什么是H5？

H5，第 5 代 HTML（HTML 是“超文本标记语言”的首字母缩写）。从技术上讲，它是指所有用H5语言制作的数码产品。例如，我们在  上看到的大多数网页都是用 HTML 编写的。“超文本”是指页面可以包含图片、链接，甚至是音乐和程序等非文本元素。

从广告或者营销的角度来说，H5就是把广告信息做成一个场景，通过二维码或者转发链接让用户更直观的交流或者互动。场景往往包括图片、音频、视频、地图、会议注册、产品链接等多个模块。是移动互联网时代流行的移动广告模式。

这次的内容是分享广告或营销性质的H5作品。

H5给我的印象是，当时我在PC端H5官网后台的编辑界面中自定义了一些图片、音乐、字幕等元素，然后就可以实现和视频一样的视觉效果了在手机界面上，这显然是太酷了。，这个新奇让我着迷。

新奇的事物总是让人跃跃欲试。随着社交APP微信的普及，不少创业者看中了H5的开发市场，纷纷成立，如：MAKA、楚佩奇、兔展、一派360、iH5、微信微页逐渐为大家所熟知，后来我们经常看到H5在微信上传播。

我认为主要原因之一是它可以让原本静态的富文本动起来，通过越来越灵活的交互来丰富用户体验。听觉、触觉等综合交互体验更强烈。

随着近年来H5技术的成熟，H5本身的表现形式也在不断创新。从传单到页面，从点击到多点交互，从文字到音视频，H5被赋予了更多的商业能力。逐步渗透到企业会议营销宣传、品牌/IP宣传等各种业务场景，甚至新品发布、小游戏吸引新流量、提升活力，为企业实现产品营销和品牌传播提供新的运营方式场景。

根据之前的实践经验和笔记，从用户心理需求模型的角度，整理分析了一些比较经典的H5，以及这些案例成功的原因。

先看一下前面的表格：

（图中的“用户心理需求模型”是“用户心理需求表”的迭代版本。旧版本请参考历史文章《了解用户，你需要这张“用户心理需求表”》心理需要模型”的过程，我会在后续文章中分享给大家~）

一、网易1.网易云音乐

主题：您的用户手册

玩法：让你听5-6首音乐，然后选择听完后的感受，确定你是一个什么样的人。

亮点：用音乐来测试用户的个性。与单纯的选择题测试相比，这种在音乐上与用户互动的方式更能激发用户的好奇心，同时也是一种模仿用户自己的方式。向朋友表达自己降低了分享可爱的门槛，结果全是好评，极大地激发了人们的分享欲望。

之所以能疯狂刷屏，主要是三个方面：有趣有趣的交互体验、愉悦舒适的内容和H5本身满足用户窥探自己的好奇心、分享标签增加个性、表达应有的心理特征尊重。在“用户心理需求模型”中满足用户动机和情绪的内外部触发因素，大大提高了用户的决策意愿。

（注：接下来的几个案例，根据上表已经解释清楚，基本符合用户心理需求模型中的三个成因，下面不再详细分析。）

H5体验链接：（移动端）

2. 网易云音乐

主题：你的荣格原型

玩法：分为两部分，告诉用户荣格测试是关于什么的，然后主体部分将跟随一个类似于冒险的场景故事。冒险过程中遇到了多个场景，每个场景的出现都是测试题目。埋葬。测试完成后，结果将发送给您。

亮点：在整个表现方式上，采用了冒险故事的主线，整个测试过程以对话的方式呈现，让人感觉像是在讲一个故事，引人入胜又亲切。

这次荣格测试有十二种原型，但这么多类型的描述并不矛盾，而且都是用肯定的词。哪一种适用于自己，就会给人一种豁然开朗的感觉：好像我确实是这样，优秀。

事实上h5短视频源码，我们经常错误地认为对人格进行宽泛、笼统的描述特别适合我们，这种现象被称为巴纳姆效应。

在测试的最后还补充了一句“这样的性​​格组合只占世界的9%”，直接给人一种美丽而独特的感觉。

关于“只占”这个词，他向我们传达了一个信息：我是独一无二的，我是与众不同的。在心理学中，这被称为虚假唯一性。它让我们对自己感觉良好，这就是为什么心理测试是如此“讨人喜欢”的地方。

话虽如此，虽然没有科学依据，但不得不佩服网易对用户心理的洞察，动不动就有一些刷屏活动。不得不佩服养猪场（俗称网易）的脑洞大开。洞。

3. 网易考拉

题目：《入职第一天，网易爸爸教我做人》

H5体验链接：（移动端）

玩法：以职场为背景，用夸张的手法描述职场新人刚入职时所面临的各种场景，比如对公司福利的好奇、同事和领导的变幻莫测、忙碌而激动人心的工作任务，以及过程中的尴尬和成功完成工作的喜悦。

通过各种梗，以有趣的方式呈现职场新人的故事。就在你对这部剧着迷的时候，这部剧也快结束了，终于开始进入正题——一个小请求，“帮猪你Y转正”，直接跳转到网易考拉首页。

亮点：选择“新员工入职活动”非常亲民，因为大部分用户都体验过或正在体验；而剧集精英的表现力特点更能吸引用户。

最终，本次H5也取得了上线3天、500万屏幕浏览量、相关微博话题数突破2000万、活动转化销量达到百万的好成绩。想要评测这款多玩H5，也可以扫码试一试~

二、腾讯1.腾讯新闻

话题：吴亦凡要入伍了吗？

玩法：看页面是《腾讯娱乐》的报道，标题和内容都表明吴亦凡已经照顾好自己，似乎正在为入伍做准备。

继续下拉，有视频：

顿时画风一变，版面严重乱了。吴亦凡从屏幕一侧出现，吓了他一跳：他转身，像扯窗帘一样扯掉腾讯新闻页面，扯掉！！！

演播室的绿色背景墙出现，吴亦凡声称稍后打电话，然后发了一段视频聊天：

点击回答。

最后，让知道真相的网友们泪流满面。

原来这是腾讯枪战手游的广告，不就是要入伍吗？? ?

亮点：2015年之前，大多数H5以简单的图形和富媒体的形式存在。H5“吴亦凡要入伍了？” “利用吴亦凡的明星虹吸效应，一开始的新闻页面非常混乱，与用户“玩”的整个过程毫无违和感。

在技​​术+技能方面，整个H5就是两个视频的互动。对于这样的想法，除了看热闹的吃瓜群众，设计师和开发者也在议论纷纷。

不得不佩服，腾讯真会玩！我觉得这可以称为鼻祖级视频交互H5。

2.腾讯动画

题目：“薛之谦2个月不写笑话，大招收手”

怎么玩：这个玩法比较简单。用户只需向上拖动屏幕（就像正常滑动手机屏幕一样）即可触发视频播放。

前面的背景是介绍薛之谦本人是漫画迷天外神坛源码网，然后还直接说要代言腾讯动画，手指向上滑动，进入视频活动，内容主要是通过各种梗，各种动画相关的自娱自乐场景吸引用户，直到最后直接切入转换部分——“看了这么久，该下载了。” （很遗憾，此作品已过期，无法查看）

亮点：我认为这款H5有3个亮点值得讨论。一是灵魂人物的选择。那个时候的薛之谦是当时非常火的明星，经常因为笑话的梗而走红；二是视频互动。交互方式让用户在操作和感官上耳目一新。三是用与“腾讯动漫”主题密切相关的内容来表达剧集的精髓。

这个自带流量的H5也拿到了。微信发帖3小时后，PV超过120W。

三、百度1. 慈善事业：地球日

主题：寻找濒危足迹 H5【4月22日：地球日（公益）】

玩法：在H5中寻找不同濒危动物的脚印，引导用户拍照组合成“五人同盟”✋。详细玩法可以扫码体验~

H5体验链接：（移动端）

亮点：人类经常用击掌作为联盟和誓言的象征。掌心相对，但简单的动作却有举重的意思。百度推出了

人与动物的“高五联盟”希望能号召更多的人参与到保护濒危动物的道路上来。

其实我上面分享的几个H5，基本都是为了营销转型。值得一提的是，百度这次采取了独特的做法。在H5中，它引导用户了解可爱的动物并寻找足迹，但实际上他们主张不打扰它们的栖息地是对濒危动物的最大保护。

为了让更多的人参与进来，百度联合明星携手萌宠打造联盟，让公益达到最好的声音。以公益为主题，当然最终还是获得了很多用户的赞赏。也有很多网友反应非常强烈，给粉丝刷黑！！！

四、其他优秀作品集

在这里我随机挑选了3个我喜欢并且优秀的H5作品，大家可以复制链接查看。

1. “今年我最喜欢的 H5 广告”

H5体验链接：（移动端）

2.《7.19魅族MX6玩陌陌真好啊》

H5体验链接：（移动端）

3.《你，你有什么资格睡觉？》

H5体验链接：（移动端）

总结

通过以上案例，你可能会觉得经典作品从发行时间算起是三五年前的作品，但我从不认为这些作品已经过时。

或许和我一样，你会发现近两年微信上的H5作品已经很少了。毕竟绝大多数中小型企业仅仅局限于应用H5工具来传播内容。随着近两年短视频浪潮的兴起，以及短视频制作和通讯信号等基础设施的完善和普及，被A短视频所取代；在营销方面，也被电商直播所取代。

相信用过H5的运营商都会质疑——H5真的落后了吗？

我们从下表看一下H5与短视频电商直播的区别：

2018年春节以来，短视频席卷了整个移动互联网。到目前为止，短视频仍然是最流行的短内容&核心内容的表达方式；2020年一季度，电商直播开始兴起，以薇娅、李佳琦、辛巴为首的一线电商直播主播被网友熟知，然后是网红罗永浩，各界名流，甚至格力董事长董明珠、搜狐创始人张朝阳等企业大佬也开始通过电商直播卖货；几个月后，二季度，新媒体开始频频披露各种直播销量翻车事件。

从替代的角度来看，短视频确实是一种很好的内容传播方式，而电商直播销售的本质只是一种新的推广场景。在促销方面，折扣肯定会有下限，所以不会推出。核心问题是，当这种直播场景（明星/IP+直播）不再能诱导用户产生购买动机和情绪时，“翻车”就是注定的结局。

短视频直播电商的本质是通过提供价值（内容价值和商品价值）来培养忠诚度，提高产品经济性。

作为一种工具，使用H5的本质是通过创意增强品牌传播，从而培养用户忠诚度，或者通过创意增加用户信任度，从而提高产品转化率。它们本质上是不同的，直接比较是没有意义的。

总的来说，H5是一款移动互联网工具，不仅可以传播内容，还可以进行与用户的创意互动、产品营销和品牌传播。现在判断它被淘汰还为时过早。我个人认为，只要移动端是主流，H5的交互方式还是可以更好的为我们使用。

他们之间没有好坏之分，但短视频和电商直播的趋势已经到来。大多数人在面临两种选择时，都会选择更妥协的方式，也就是更容易操作的短视频。& 电商直播。

只是感叹，创意真的太稀缺了！

附：H5交互手势

随着H5技术的发展，如今H5的玩法有了质的突破。不仅互动形式很多，形式和内容也可以紧密结合，产生1+1大于2的效果。接下来给大家分享一下最流行的H5互动手势。

1. 点击互动

单击是最常见的手势之一，可用于页面转换。这种交互手势一般需要设置点击引导。指导可以作为评论帮助用户了解H5，让用户跟随H5的思路，推动剧情的发展。与主题相匹配的个性化引导设计，可以快速将用户带入情境。

点击手势在测试H5上也很常用。用户点击屏幕以选择不同的选项并生成独家测试结果。

2. 组合交互

Combo交互主要用于游戏H5。连续点击画面节奏感强，点击量和积分排名具有竞争力，可以激发分享，吸引更多人参与。这种单一的交互方式操作起来比较简单，所以会搭配限时、限时等玩法。

网易《漫威电影十周年》H5设计了“击败”灭霸的链接。用户需要在 10 秒内点击屏幕记录灭霸的“节拍”次数。10秒后，用户可以看到连击数和全网排名。

3. 长按交互

长按需要用户按照提示长按H5页面上的一个按键，保证画面的连续播放和流畅过渡。

由于需要用户的手指保持静止以进行长按的暂停，用户可能会感到无聊和乏味。设计时最好能提示H5的播放进度，时长给用户一个参考。

长按交互在H5中经常以镜像的形式使用到底。它经常测试故事的联系和镜头的转换。适当的应用可以给用户带来良好的体验，让用户更加专注，从而提高完成率。

“一分钟漫游珠港澳大桥”也通过按住不放的方式向前推进，展现了港珠澳大桥的风光。为了不让用户感到无聊，H5会每隔一段时间显示“行驶”的公里数，以指示播放进度。

4. 远景视差交互

长图视差交互通常通过滑动手势来驱动H5连贯播放。

视差动画由于与主视觉画面的移动速率不同，空间层次感更加明显。这样可以增加画面的新鲜度，缓解高密度内容带来的视觉疲劳。减少阅读长图文时的无聊感，辅助H5从画面效果平滑过渡。

《童话里遇见你的时光》使用了长图，滑动时会有一些小元素穿插在过渡中，让整个H5看起来又酷又丰富。

5. 拖放交互

拖放与滑动不同。您需要按住屏幕不放手，并从一个点拖动到另一个点。移动速度由用户控制，适用于策划图片展示或叙事等话题。

网易达达的“睡姿大赛”H5采用骨骼动画技术，用户可以拖动小人的四肢在床上DIY自己的睡姿。

除了选择场景和人物外型，H5还提供床上的小物件进行搭配，可以放大或缩小来装饰卧室。

6. 捏缩放交互

双指交互需要用户用两根手指同时触摸屏幕，比如滑动屏幕放大或缩小某物，也常用于屏幕切换。

这种交互方式需要对手势进行微操作h5短视频源码，玩法有些复杂。但这种互动比单指点击和滑动更强大、更有趣。

在H5中，还有一种比较常见的答题方式，也是采用拖拽和捏缩放交互手势相结合的方式。

7. 录制交互

除了触觉交互，还有听觉交互。语音交互比较少见，大多与录音有关。按照H5指南录制一段，DIY生成专属音频。

8. 编写交互

写作互动是一种自由度很高的互动方式。用户可以根据提示自由创建文字和图片。

绘画创造的图像具有鲜明的个性，也反映了用户的情绪。面对自己画的人物，用户也可以将更多的注意力放在H5上，而且翻盘率往往不高。

虽然这些画面的线条有些粗犷，动作与背景形成鲜明对比，但由于是原创人物，用户对画面的包容度更高。

网易新闻H5《以你的名义，守护汉字》让你输入自己的名字，找到需要守护的濒危汉字。

H5测试生成在日常生活中很少使用的稀有字符。主题“守护”汉字不仅可以让用户认识这些濒临灭绝的汉字，还可以给用户一种积极分享和传播汉字的使命感。

9. 重力相互作用

模拟现有的物理规律可以大大降低理解的门槛，增加规划的兴趣。

手机在硬件上赋予了很多技术上的可能性。重力感应器、陀螺仪、加速器等硬件设备的使用，可以创新H5的玩法，增加代入感。摇动手机时，H5会自动判断手机的倾斜角度。

由于其强大的技术性质，重力交互通常用于特定页面。

网易新闻《时空恋办公室》利用手机重力感应摇晃手机唤醒主角，开启剧情。

10. 3D空间交互

3D交互主要利用3D技术构建立体场景，突破纯平的限制，强调层次感，还原用户的临场感，H5玩起来更逼真。

但是，这种交互方式在开发设计过程中难度较大。考虑到用户的使用习惯，3D交互方式比较简单，往往结合点击、滑动等基本手势操作，3D作为H5的亮点出现。

11.全景交互

在360°全景形式下，用户可以上下左右滑动。

这种H5以类似VR的形式承载了全屏交互，更注重H5场景的设计。

但由于加载的内容量大，加上H5体积较大，播放时可能会出现卡屏等问题。

好啦，H5营销、品牌、互动相关的内容就分享到这里啦~

你对这些类型的H5有什么深刻的记忆吗？或者你如何看待当下流行的短视频直播和电商直播？欢迎留言交流，共同进步。

一波预览：我会在下一期分享产品用户社区的相关内容~~

素材来源：以上案例素材来源于网络和网易达达团队，仅供交流学习。