社区广播台
热门推荐：
查看: 1|回复: 0
H5营销干货大全！也是蛮拼的！
& 积分信息:&
& 联系方式:&
[思路网注] 终于，在2014年10月底，W3C宣布HTML5正式定稿。这个时间，不晚不早，硬件性能更强、手机OS迭代速度下降。随着HTML5标准定稿，一切纷争将告一段落，现在，属于HTML5的时代到来了。& &
& & & & & && && && &
.png (19.61 KB, 下载次数: 4)
H5营销干货大全！也是蛮拼的！
02:11 上传
在过去的一年中，《围住神经猫》、《寻找房祖名》、支付宝十年账单，还有最新出炉的微信宝马广告等等一些好玩的小游戏以及广告页面，这些是否都在你的手机屏幕中频繁出现呢？HTML5刷屏似乎在2014年的手机圈内成为了一种常态。如今，几乎每天继续有着HTML5页面的推广以及小游戏、小测试在微信上传播，用户也逐渐习惯被各种HTML5轰炸。
那么问题来了，什么是HTML5?
简单来说，H5就是一种高级网页技术，我们平时看到那些邀请函、小游戏都是H5网页，确切来说叫HTML5(国外目前没有H5的叫法)，它跟我们平时上网看到的那些网页本质上没有任何区别，只不过大家普遍接受的那个网页技术版本是HTML4，而这个版本是在1997年发布的。
2004年，&WHAT&工作组着手开发HTML5， &WHAT&的成员来自苹果Mozilla基金会和Opera等等。
2008年，HTML5规范第一版发布。专家说HTML5是一种持续进化的技术，永远不可能&完成&。
2010年，YouTube在1月和7月分别推出两款HTML5视频播放器。同年4月，针对苹果设备不支持Flash，乔布斯在一封公开信中指出&Flash是为用鼠标的电脑，而不是为触控屏设计的。&这使得更多公司转向了HTML5。
2011年：Alexa流量排名前100位的站点中有34%使用HTML5。在之后的2012年，约70%以上的研发商使用HTML5技术作为应用开发。
梳理完了HTML5的前生今世，立足当下，我们看看2014究竟有哪些HTML5技术堪称火爆，让人们的微信频频被刷屏呢?
2048：在4x4的棋盘上，用方向键选择数字移动的方向，遇到相同的数字就会合并，每次移动会增加一个数字，合并出2048就算通关。简单粗暴，被誉为&根本停不下来的游戏&。
围住神经猫：围住神经猫堪称一代流行小游戏的标本。HTML5技术在几年前就基本成熟，但一直不温不火，去年能从&二三线小明星&摇身一变成&移动营销一姐&，它必需感谢这只欠抽、贱萌的神经猫。
全民找祖名：去年8月份，柯震东、房祖名相继跳入毒坑，HTML5的技术男们也不甘落后，推出了&全民寻找房祖名&。
看你有多色：&看你有多色&是一款基于HTML5技术的小游戏，上线仅仅一天单日注册用户就突破千万。
支付宝&十年账单&：日，支付宝发布十年对账单，网购族可以查询十年来个人通过支付宝支付的金额。一时之间，微信朋友圈就立马被各种&触目惊心&、&不忍直视&的截图占据了。
国内各大领域HTML5技术运用盘点
游戏领域：HTML5小游戏7日留存仅1% 微信传播占7成
日前，业内最新数据报告显示，2014年Q4季度以来，有60%的行业从业者已投入或是准备投入H5游戏，超过半数的从业者对H5游戏前景持肯定态度。当前H5游戏类型依然以益智休闲为主，占总数的58.74%，角色扮演类的H5游戏业占据了一定的比例，达到24.66%，预计2015年，角色扮演类H5游戏份额将进一步提升。
HTML5游戏具有五大特征，其中包括：轻松实现跨终端，跨平台;无需下载即可体验;多入口，方便营销推广;及时更新游戏内容;开发周期短，试错成本低的特征。
报告中提到HTML5游戏开发方向将形成两大阵营：或着重轻度H5游戏平台开发，帮助CP商营销从而获利;又或者着重中重度H5游戏，寄希望于道具收费获利。
H5游戏已经成为未来手游行业的明星市场，2014年Q4季度以来，有60%的行业从业者已投入或是准备投入H5游戏，超过半数的从业者对H5游戏前景持肯定态度。
与传统原生市场应用差不多，当前H5游戏类型依然以益智休闲为主，占总数的58.74%，角色扮演类的H5游戏业占据了一定的比例，达到24.66%，预计2015年，角色扮演类H5游戏份额将进一步提升。
目前H5游戏大多还是以轻度休闲游戏为主，缺乏持续的可玩性和固定的入口。从游戏留存走势看，玩家对游戏粘性较低，次日留存8.58%，三日留存3.90%，七日留存1.12%。
根据GoogleAnalytics的基准平均跳出率统计，内容网站跳出率大概在40-60%之间，而H5游戏首页平均跳出率为67.54%，明显高于平均数，因此内容方面还可以更丰富;而在传播性回归分析中k系数(0~1)只有0.068，反应出对网络传播依赖程度较低，由此催生了诸多H5游戏平台。
微信在H5游戏用户会话载体分布中依旧占据了主要地位，虽然目前微信已经对H5游戏在朋友圈的传播进行了限制，但相信依托于微信公众号所建立的小游戏平台将成为日后用户进行游戏首选。
H5游戏平均每天游戏次数只有1.45次游戏，这主要是轻度游戏的粘性较低;其次游戏时长上并不比原生应用短，游戏可玩性得到玩家认可。
苹果手机用户占H5游戏终端使用设备最多，其次是小米手机，这得益于小米手机轻应用的推出。
H5游戏安卓用户使用系统最多的是4.2.2，而使用IOS系统最多的是7.1.2，这也是目前市面上的主流系统版本。
HTML5游戏用户所持屏幕分辨率与主流分辨率客户端相差不多，这也反映出在H5游戏开发中屏幕分辨率也与市面主流设备相适应。
新媒体领域：助力个性化阅读，HTML5可能被玩坏
iiMedia Research(艾媒咨询)《2014年中国手机新闻客户端用户研究报告》显示，手机网民移动端资讯获取首选方式上，手机新闻客户端最受青睐，占比为35.8%，其次为手机浏览器，占比为20.9%。手机新闻客户端这个相对传统而保守的媒体形式在过去的一年中远没有移动视频、移动电商甚至手游这样备受关注，然而，移动新闻领域的几个庞然大物正是在行业热点外围，默默着获取着海量用户与流量。
截至去年年底，腾讯、网易、搜狐三家传统门户的新闻客户端的总安装量已经超过2.5亿甚3亿，今日头条的安装量也宣布超过2亿，新浪新闻因为起初模糊不清的战略，错失了最佳时期，已经被前四家甩在后面。
新媒体变革的当下，各大媒体对HTML5运用已然盛行，但有可能被玩坏。HTML5的页面形态在微信朋友圈与新闻客户端的联合扶植下，在2014年成了相当抢眼的表现形式，很多上网不久的朋友可能并不了解H5，事实上，它在今年的火爆之前已经经历了多次战斗，最早H5视频与flash视频的抗衡、后来H5应用与原生APP的抗辩，每个时期H5都有着自己独特的标签，在2014年，它的标签是「动态新闻」。
一则「习大大夜游中南海」的HTML5动效专题去年11月火爆社交网络，出色的交互效果与资讯整合让很多本对政治毫无兴趣的用户也加入了转发大军，事实上，把内容和表现形式有机结合好并不容易，这也是为什么后来出现了太多的HTML5动效新闻不但没有传播效果，反而在跟帖中遭到了一片骂声。对于蹩脚的模仿与「为H5而H5」的策划形式，基本可以定性为：一种相当拙劣的跟风——消耗掉大量数据流量的同时，读者几乎得不到任何有效信息。
目前基于HTML5的手机页面已经越来越多，随着而来的是，垃圾的比例随着总量的提升而越来越多……对于内容制作者来说，在利用HTML5优化新闻传播形式的基础上还要注重内容质量，不能像10年前的那批所谓的flash游戏开发者一样，把HTML5玩到绝境。
在线教育：给HTML5更多可能性
据统计2014年中国的在线教育市场已经超过1000亿元，iiMedia Research(艾媒咨询)预测未来单单在K12在线教育领域就将迎来爆破式增长。预计3年后将接近800亿元。
在在线教育方面，对于HTML5技术的运用主要体现在课件制作等各方面。国外知名在线教育Udacity，他们与一批公司建立和合作，为Udacity提供课程和资金支持。像谷歌这样的公司很多都选择了HTML5网络语言课程。同时，新东方采用Cocos2d-HTML5开发的150多个互动式在线教育应用则让开发者看到了其引擎在非游戏领域的应用可能。
目前，在在线教育课件展示方面，其已经展现出来巨大的优势。首先，HTML5课件能将各种课件形式融合起来，实现文字、图片、表格、音频、视频、交互、色彩、创意的有机结合。
其次，HTML5课件能实现良好的学习交互。 相较于传统网页技术，HTML5在用户的可用性和友好体验上带来非常大的改进。在开发设计网页课件时，教学设计人员可充分发挥出这一技术优势，结合内容特点，设计一些学习交互点，提升学员的学习参与度。
此外，HTML5课件能支持跨平台学习，有助于在不同学习终端获得一致的良好学习体验。
HTML5的优势目前主要是体现在终端上，尤其是跨平台、跨分辨率、终端自适应等方面。可以说，相较于传统HTML技术，它的很多新特性，都是针对终端设备，为的就是在终端设备上有更好的体验和交互。
HTML5课件特点与移动学习需求可谓有着天然的契合。因为在移动互联网时代，用户的终端设备是各式各样的，同一个用户也可能拥有多个不同的终端设备，课件只有支持跨平台学习并能实现终端自适应才能保证学员获得良好一致的学习体验。
综合整个互联网行业来看，目前HTML5的运用主要还是集中在游戏领域，而新媒体与在线教育等分领域的试水无疑是肯定了HTML5未来的发展潜力。
HTML5黄金时代的巨头之争
对于中国的互联网巨头来说，现在在做的两件事，一是争抢移动入口的同时既布局原生应用，一是开放HTML5，并且两手都在抓且两手都硬。那么巨头们都做了什么?
全球最大的在线支付平台为企业和用户之间提供一个桥梁，而这个桥梁的应用正是基于支付宝内部的HTML5。
UC浏览器HTML5的开放也是重心。目前，UC网页应用中心的月活跃用户已经超过了6000万，收录了20大类超过数万款的轻应用。
百度，通过收购了91手机助手、安卓市场以及自家推出的百度手机卫士、百度搜索等。从百度的战略发展来看，百度更重视HTML5平台的搭建。而且百度在很早之前就已经推出了“轻应用”这个概念，百度的这个轻应用本质就是HTML5，并向开发者和企业推出了各种技术开放接口。
一方面通过360手机助手和360手机卫士在推动原生应用的发展，另一方面通过360搜索和360浏览器在加速HTML5的布局。
1月15日，在手机搜狐网3.0发布以及HTML5技术研讨会上，搜狐透露，手机搜狐网3.0就是基于HTML5技术。如今张朝阳正在推动HTML5生态圈的形成，足见张朝阳已深知HTML5大势的来临。
腾讯，作为掌控着国内最大的移动入口平台公司，正在通过微信公众平台开始构建一个强大的轻应用平台。
对于很多的企业以及移动开发者们来说，最激动人心的一件事情莫过于微信JS SDK的发布。微信JS-SDK包提供的11类接口集，开发者不仅能够在网页上使用微信本身的拍照、选图、语音、位置等基本能力，还可以直接使用微信分享、扫一扫、卡券、支付等微信特有的能力。
对用户来说，在微信中看到的HTML5不再局限于简单的页面展示，而是一个功能较全面的App，它包含更多的互动功能。
当下，对于巨头们来说，打造一个真正强大的移动入口平台，HTML5已经变得越来越重要。同样对于企业和很多开发者们来说，借助巨头的平台，开发更适合该平台的轻应用能为自己带来更多的流量和资源，实现对客户更好的对接。
对于H5这个名词想必大家已经很熟悉了，就在2014年，一项本来还不太成熟的技术在微信的社交舞台下大放异彩，让我们见识了「移动+社交」爆发的巨大能量。
然而这不是偶然，而是趋势。在具体介绍H5营销之前，我想和大家分享一份eMarketer的数据，其中显示了2012年 -2018年品牌在不同媒体渠道的预算比重：
.jpg (25.37 KB, 下载次数: 15)
H5营销干货大全！也是蛮拼的！
02:11 上传
相比电视、杂志、户外广告等传统媒体呈逐年下降的趋势，品牌营销在数字和移动方面的投入在逐年上升。而且，在所有渠道预算中移动技术的投入增长最快，远远高于其他渠道的增长。当然，这样的结论你应该不会感到惊讶，因为我们早已习惯了24小时手机陪伴的生活，而品牌最关注的就是消费者「在哪」的问题。
据美国的调查数据显示，我们每天要查看手机150次，44% 的人睡觉都把手机放在身边，9% 的美国人承认他们在嘿咻时使用手机……毫无疑问，手机是有史以来最强大的媒介，从早上醒来到临睡前的一秒，这个几英寸的屏幕都在和我们「交流」。
显然，移动营销已是大势所趋，我们可以看到已经广泛应用的签到、二维码技术，正在兴起的iBeacon、微信的Wifi连接，还有就是本文将与大家分享的H5技术。文章有点长，可能需要费些时间阅读，全文包括：H5技术简介及其特性，怎么实现、有哪些应用场景，以及如何推广等内容。
Part 1什么是H5？
经常有朋友找我咨询H5的问题，但是在和他们沟通的过程中，我发现很多人对H5的理解都是停留在用户层面，邀请函、小游戏、品牌展示、抽奖等等。其实如果上升到营销层面的话，仅在用户层面去思考是远远不够的，因为任何传播都要考虑有效性的问题，如果100w pv带来的只是刷屏效果，而对品牌带不来任何有效转化，这样的传播显然是不成功的。
对于事物的理解，如果不能从多个角度去分析，我们很难跳出原有的思考框架去看问题。因此，这篇文章我想以更原始的角度，从H5这项技术本身为出发点去阐述；事实上互联网技术的发展本质上也是需求驱动的，程序语言其实是高于应用层面的产品。以下的内容希望不会太晦涩，也希望能对你有所启发。
简单来说，H5就是一种高级网页技术，我们平时看到那些邀请函、小游戏都是H5网页，确切来说叫HTML 5（国外目前没有H5的叫法），它跟我们平时上网看到的那些网页本质上没有任何区别，只不过大家普遍接受的那个网页技术版本是HTML4，而这个版本是在1997年发布的。
什么是HTML，我这里简单解释一下——想象一下两个计算机在沟通的场景，A如果要把一个图文信息传给B的时候，交流过程中B肯定会产生这样的问题：你给了我那么多信息，哪些是网页标题、哪些是正文、哪些又是图片呢？于是，A和B商量了一个办法，用一些符号来标记不同类型的内容，而这些标记的一整套规范就是HTML。
比如当A要把图文的标题传给B的时候，最终给B的表达是这样的：
&title&品牌H5营销完全实战指南&/titile&
如果设计HTML语言的人是中国人，那表达就会是这样的：
&标题 始&品牌H5营销完全实战指南&标题 终&
所以大家可以看到，HTML其实是一项非常人性化的发明。关于HTML技术的详解有兴趣的读者可以自行查阅，这里我主要跟大家介绍几个营销人应该关注的H5特性，它能让你对H5能做成什么样有个根本的认识。
No.1绘图功能（Canvas、SVG）
这是H5一个非常重要的特性，你在很多H5中看到的动画效果就是用H5的绘图功能做的，比较典型的例子是STC风云榜分享的可口可乐的例子，有兴趣可以点击最后的「阅读原文」看一下。
为了方便理解，你可以将H5的绘图功能类比为Flash，但是唯一的决定性区别是，Flash做出来的动画无法在移动端的浏览器中浏览，因为Adobe早已在2012年就停止了对移动端flash的开发。毫无疑问，未来的移动网页游戏和动画会是H5的天下。
从技术实现的角度，H5配合JS（一种程序语言）可以做出任何二维动画，并且因为是网页元素，所有元素均可以监测到用户点击的数据，也就是说你可以知道用户在H5动画网页中的所有交互行为。但是，具体到实际应用，我们就要考虑周期、成本，和用户体验的问题，复杂的动画相应的制作周期和成本会提高，同时也有可能影响加载速度等用户体验相关的问题。
以下这个网站是H5绘图功能的典型例子，非常强大。你可以选择不同型号的毛笔、笔触半径以及墨水的颜色，整个绘图过程非常顺畅，而且还有一个模拟手握毛笔的人性化设计。
No.2三维效果（CSS3 3D）
H5的华丽效果离不开一种叫CSS的技术，形象的说，如果把HTML5比作漫画的素描稿，CSS就是上色用的，相当于word界面上方的格式工具栏，如果没有CSS我们看到的H5网页就只能以「素颜」见人了。如果你熟悉互联网技术的命名规则你应该能知道CSS3就是CSS的升级版本。
在CSS3中有个非常酷的功能是三维渲染，也就说H5中能做出3D动画甚至3D游戏。目前我们看到的H5中CSS3 3D的应用较少，这个也许会是下一个营销类H5应用的热点，建议大家持续关注。
下面这两个网页游戏就是用H5+CSS3 3D做的，第一个是俄罗斯方块的3D版，想象一下在三维的空间里玩俄罗斯方块是什么感觉，喜欢挑战空间想象力的朋友可以试一下；第二个游戏是3D版坦克大战，非常精致耐玩的游戏，一句话评价就是「根本停不下来」。
PS：以上提到这些网站都需要在PC浏览器中打开，虽然麻烦一些，但绝对是值得的。
/level/island_of_oblivion
No.3离线存储（HTML5 Web Storage）
H5的另一个重要特性就是离线存储，它能将用户的资源文件保存在本地，这样在页面加载的时候网页能使用本地资源，从而实现离线状态下访问网页应用。举个例子，通过离线存储，你可以在没有网络的情况下阅读公众号的文章（当然这只是技术上可行，微信目前没有此功能）。
当然离线存储能容纳的数据量是有限制，跟浏览器有关，目前Chrome支持5M。大家或多或少都知道cookie这个东西，它也是记录用户浏览数据的，比如百度那些根据你的搜索习惯给你推荐的广告就是这种技术实现的，不过它的容量是4k。
技术细节大家可以忽略，但是关于离线存储这个功能，大家可以发挥想象——假设离线存储的容量是100个G甚至更多，浏览器就变成了一个超级应用入口，所有网页应用都具备离线存储和在线浏览的功能，这时候在线Office、在线记事本甚至在线PhotoShop都可以实现，我们的电脑只需要装一个程序——浏览器。在这个假设中，浏览器将干掉Windows，一切用户操作都在云端进行！稍微有点难理解，大家可以仔细体会。
以下是运用离线存储的一个例子，这个提供在线便签功能的网站无论有没有网络都可以访问，并且你记录的所有便签都会保存下来，很实用的网站，有兴趣可以试一下。
http://www.webkit.org/demos/sticky-notes/
科普先告一段落，虽然H5有很多特性，但因为篇幅有限，本文只能介绍跟营销有关的内容，其他的特性很多是程序猿的事，如果大家反馈还要了解更多，我可以再写一篇具体介绍。
Part 2H5能怎么玩？
在了解完H5的一些基础知识后，相信大家最关心的还是应用层面的问题——H5能做什么，有哪些玩法？接下来我将列举一些典型的例子和大家探讨：
1、幻灯片式玩法
以下这个特斯拉的例子相信很多人都看过，精美的图片设计+简单的翻页效果，在我的印象中大概3、4月份看到特斯拉这个H5的时候，大家还不知道原来微信营销可以这么玩，记得那时候我们看到之后就在一周内做了一个类似的H5，用于STC的品牌展示。当然，在这之后H5就千树万树梨花开了。
这是H5最早期也是最典型的玩法，因为简单、实用，所以至今还很流行。其效果就是简单的图片展示&翻页交互，最终整体的表现很像幻灯片展示。
其实幻灯片式的H5现在已经出现了很多在线制作软件供大家使用，所以制作成本在现在看来几乎是等于零的，而在之前这样一个应用的开发可能要将近一万（再一次见证了互联网思维的破坏力）。当然啦，这对于品牌主来说是一个好事，因为很多时候这种简单的展示已经能满足需求了，不需要花不必要的钱。
★ 应用场景
由于制作简单，周期短，这种H5展现形式适用于频繁、小型的需求。用在线编辑器的话，不需要任何开发，你只需要要配备一名设计和文案。
总结得不全，幻灯片式H5可能有以下的应用场景：
1、定期发布的内容，几乎零预算。这些内容相对而言比较常规，但是有时微信图文又无法达到理想的效果，通过H5的形式会更易于传播，当然前提是要有好的设计。比如数据报告、频繁上线的新产品或功能、小型线下活动邀请、活动相册等等。
2、结合热点的营销，周期极短。这种情况下，时效性是非常重要的，如果开发一个H5用了半个月，热点想必也结冰了。所以，应该以最快的速度推出才是明智的选择，而这时候引起广泛传播的关键就在于文案和设计。
此外，大家不要轻视这种短频快的传播，有时候它要比很多大投入的传播来得有效。没有人能完全掌握受众的兴趣点，所以一次大投入的传播不一定就能出效果，但是多次热点传播出效果的概率从统计学的角度也要高一些。如上文所述，我们可以实现用户在H5中所有交互行为的监测，因此，如果短频快的传播能配合有效的数据监测，便可以进行持续优化，降低不确定性。
2、交互式动画
可口可乐这个案例在之前的风云榜中推荐过，是运用H5绘图功能的典型例子。当然这里面的交互还是比较简单的，只不过它基本体现了交互式动画的感觉。整个可口可乐的时间轴是随着用户向上滑动页面「绘制」出来的。
其实除了这种叙事型的H5动画，我们能看到的大多数H5游戏也都都属于这一类，比如神经猫、打企鹅、2048等等。最近也有一个比较火的H5游戏叫「财务包子铺」，在这个游戏中用户扮演包子铺的创业老板，在事业发展的不同阶段做出经营决策，最终登上人生巅峰。虽然游戏中植入了赤裸裸的产品推广（知乎的一本新书），但最后还是取得了3天破300万PV的成绩。
这些类型各异的H5应用，本质上都是基于H5的动画技术做的。它们所涉及的相关动画技术主要有H5的Canvas/SVG，以及JS、CSS3，目前大部分H5的动画效果还是用JS实现的，实现的效果类似PPT中的动画功能，只能实现元素的平移、旋转、隐现等等。事实上通过JS+Canvas/SVG+CSS3可以实现非常复杂的交互式动画，最直观的就是H5游戏，比如神经猫，还有上文提到的3D版坦克大战。
那么，H5到底能实现什么样的动画效果呢？我想这应该是大家在做H5时最头疼的问题，因为不知道能做成什么样，你也就不知道从何下手。所以下面我给大家介绍一个网站：/，在这个网站中，你几乎能看到所有H5能够实现的动画效果，下次如果需要做H5的时候就可以跟开发说「你看，就是这个效果」。
以下是该网站上几个示例的截图：
抓绵羊：你可以在奔跑的羊群中随意抓取并放到任意位置。
种树：在屏幕任意地方点击都会在相应的地方种一颗树，你可以看到树的生长过程。
3D罐头：CSS3 3D的完美展示，你可以看到三维罐头的任意角度。
照片处理：你可以把照片艺术化，图示为处理过程截图。
★ 应用场景
交互式动画类型的H5制作周期和成本比较高，需要提前规划。除了创意、文案、设计这些以外，开发周期较长，优质的H5大约在两周到4周左右，也有可能更长。
这种类型的H5要找靠谱的供应商，因为复杂交互做出来的效果，在用户看来只有完美和垃圾两种层次，所以慎重。当然如果你自己要花血本自建团队也不是不行——产品经理、设计师、前端工程师、PHP工程师（涉及表单、登录、评论等元素的时候需要），各一枚就够了。
以下是总结的应用场景：
1、中小型活动/品牌事件的传播，预算不多、周期较短。这种情况一般就是某些新品发布、企业招聘、公关事件、中型会议等的传播。此时你需要权衡周期和成本的因素。
一般来说一周以内的时间不太可能做出优质的H5，这时候你可能要考虑幻灯片式的简易开发或者参考已有的作品，然后着重从设计和文案上下功夫。如果有一到两周的时间可以尝试做一些轻交互的H5，除了常见的那些平移、缩放、淡入淡出的动效以外，在这里我比较建议大家尝试一下CSS3 3D的效果，这是一个趋势，当然成本也会相应的上升一个量级。
2、大型活动/品牌事件的传播，预算充足、计划性强、周期较长。一般大家看到的那些美轮美奂并且极具传播性的H5基本上都属于这一类，比如上文提到的可口可乐「分享快乐128年」，以及我们之前分享过的潘婷「一封来自1947年的明信片」。像这一类在美学、交互和故事性上都表现突出的案例，都不是一两周的功夫能做出来的，不计算创意、设计和文案的时间，光是开发和调试也要小一个月。
因此大家看到好的作品要理性看待，不能觉得很牛或者老板说好就想着也做一个，其实像这种交互与故事一体的应用，如果时间不够只完成一半，整个H5基本是没法用的，也就是所有之前的投入都是无用功。这也是为什么有很多供应商无法在指定时间交付的原因，可能一开始就在做一个完不成的任务。
3、功能型H5
看一下以下的两个例子，第一个是百度针对地铁涨价做的H5，它可以计算你每天坐地铁要多少钱并且实时显示大家的评论；第二个是STC的社交移动风云榜，很简单，就是精品H5的展示：
这两个H5都有一个特点，除了针对受众的热点内容传播以外，它们很像一个「供用户重复使用」的产品，这就是所谓的功能型H5。其实大家看到风云榜可能会觉得它只是一个再简单不过的网页，但如果从它满足用户需求并产生重复「使用」行为的角度，它其实是一个产品，事实上我们从一开始就是把它当产品来运营的，关注Social Talent的朋友可能会有所感受——每周更新、定期群发推荐H5的图文、栏目更新通知等等。
功能型H5的独特价值在于，除了具备传播性以外，它通过用户的重复使用行为使得H5的传播是一个持续不断的过程，这一点是一般的H5所不具备的。风云榜首次发布时转发6w+ 多，目前每月的访问量都在10w左右，不算多，但是给我们带来的流量转化都是精准的，关注我们的大多还是从事营销相关职业的朋友。
个人觉得web应用肯定是未来发展的方向，就像上文所说的，很有可能未来的操作系统将被浏览器所取代，服务和应用将进入完全的云世界。当然距离这种假设还比较远，但唯一大家可以放心遵守的原则，就是聚焦于用户需求。
我所说的功能型H5，是同时聚焦于用户需求并且注重传播性的H5轻应用，也就是在设计H5的时候除了考虑传播的问题以外，也要思考如何把它变成一个持续运营的产品。这里面其实是思考角度的问题，从「我要传播什么」到「我希望用户传播什么」的转变。
★ 应用场景
轻交互重功能的功能型H5制作周期较短、成本也不高，成功的关键不在于酷炫的交互，而在于用户需求的把握以及后续的运营。
因此，这一类H5需要的是一名高水平的的产品经理，而以设计、开发为辅。功能型H5目前没有太多成熟的例子，不过我认为离线存储的技术可能会是功能型H5的应用重点，大家可以关注一下。
以下是总结的应用场景：
1、品牌账号的粉丝运营。功能型H5由于具备一定的产品特性，其最大的价值就是提高粉丝活跃度和忠诚度。我们需要根据本身品牌的形象定位以及受众的特性设计功能型H5，要将品牌或产品的功能性特征抽象到生活方式或者精神追求的层次。
举个例子，卖洗手液的可以抽象为健康生活方式，设计一个改善生活健康状态的功能型H5；服装品牌可以抽象为追求时尚前沿，设计一个定期更新时尚潮流资讯的功能型H5。事实上，以粉丝需求为中心的功能型H5将潜移默化的提升品牌影响力，在提升忠诚度的同时带来持续的口碑传播。
2、结合热点内容的品牌传播。这种类型的传播是最常见的，但是往往很多结合热点的H5传播都是一次性娱乐消费，大家看过就忘了。其实如果能从用户需求挖掘和产品运营的角度去思考，许多针对热点的H5传播都有很大提升的空间。
Part 3H5如何推广？
实际上H5可以推广的渠道有限，不像App的推广有各类应用商店的流量。关于这个问题可以说的不多，我仅针对性的提出几点建议：
1、从用户角度挖掘H5的价值点，写一篇软文。通过图文群发来推广H5无疑是最重要的方式，但是如果只是简单硬性推广，比如宣布今天我们上线了一个高大上云云的H5，然后就让用户点击「阅读原文」自己看，显然这种新闻通稿式的推广不会有太好的效果。
一个好的H5一定具备打动用户的价值点，从一个角度切入写一篇软文，无论通过投稿的方式还是大号转发都能给你带来意想不到的传播效果。投入再大再精彩的H5，如果没有好的推广就只能孤芳自赏，所以哪怕是留点推广预算也是值得的。
2、尽你所能利用所有能推广H5的渠道。目前比较常用的方式：通过公众号的图文群发推广、微信群推广、线下二维码推广，以及前面提到的KOL转发和投稿等。这里主要说一下有关微信群的几点建议。
首先，你需要列出所有你能用到的资源，并发动内部人员转发，当然前提是H5做得很棒。值得注意的一点是，每个微信群其实都有自己的定位——工作、生活或者闲聊扯淡，所以为了提升打开率可以适当的为不同的微信群定制转发的文案，比如以上文的STC风云榜为例，对于工作学习为主的群可以是「品牌H5做成这样也是蛮拼的！」，如果是更加生活化的群就可以是「史上最好玩的H5应用，根本停不下来」之类的，但是如果H5的调性实在和微信群的定位不搭，建议不要造成打扰。
3、充分利用「阅读原文」和自定义菜单。由于微信的限制，图文中唯一能跳转的链接就是「阅读原文」。关于如何利用好「阅读原文」有三点小tips：
不要浪费每一篇图文的「阅读原文」，可能的话对于每一篇图文用不同的文案引导点击；
如果你的目的是推广H5，不要在阅读原文的提示之后或者阅读原文引导和正文之间插播公众号的广告；
通过字体或者颜色的视觉跳跃引起读者的注意，而且不要长期使用同一个格式，因为当用户习惯了固定的格式之后会不自觉的忽略这些内容。
此外，自定义菜单也是需要充分利用的功能，一般来说新增粉丝都会浏览一遍公众号的菜单，根据我们的数据监测，平均每个菜单项会有20%的新增粉丝点击。假如你的账号每天能有500个粉丝增长，就会有100个人以上点击了菜单的某一项，因为这是持续进行的主动行为，由此为H5带来的浏览量可能比图文群发还要高。
.png (40.89 KB, 下载次数: 10)
H5营销干货大全！也是蛮拼的！
02:11 上传
既然神经猫和找祖名们都这么火了，品牌们又怎么会想不到开发专属的小游戏呢？自己动手得来的高级定制，首先肯定合身，然后款式也多选——既可以根据品牌特性开发原创游戏，也可以选择在经典游戏中融入品牌元素。
在微博上大名鼎鼎的“小杜杜”就是游戏“高定”的疯狂爱好者，推出过《我要持久》、《杜杜line一发》《一夜N次郎》等多款作品。（#瞅瞅这些香艳的名 字，我都不忍直视勒#）以“N次郎”为例，其实是经典游戏“别踩白块儿”的山寨版，然后把黑白块替换为五颜六色的杜蕾斯套套，玩家只要努力踩TT就够 了，别的什么禁区都没有。
.gif (586 KB, 下载次数: 4)
H5营销干货大全！也是蛮拼的！
02:11 上传
.png (5.08 KB, 下载次数: 10)
H5营销干货大全！也是蛮拼的！
02:11 上传
HTML5三年内颠覆手机原生APP?
HTML5对开发者的7大优势
在多屏年代，开发者的痛苦指数非常高，人人都期盼HTML5能扮演救星。多套代码、不同技术工种、业务逻辑同步，这是折磨人的过程。有点类似个人电脑早期世界，那个时候的每家电脑都有自己的操作系统和编程语言，开发者疲于做不同版本，其实DOS的盛行也很大程度是因为开发者实在没精力给其他电脑写程序。跨平台技术在早期大多因为性能问题夭折，但中后期硬件能力增强后又会占据主流，因为跨平台确实是刚需。
快速迭代：
移动互联网是一个快鱼吃慢鱼的时代，谁对用户的需求满足的更快，谁的试错成本更低，谁就拥有巨大的优势。互联网产品大多免费、且有网络效应，后入者抢夺用户的难度非常大。使用原生开发，从招聘、开发、上线各个环节的效率都慢一倍以上，而且参与的人越多，沟通效率往往拖慢不止一倍。
持续交付：
很多人有这样的体会，一个原生应用上线Appstore，突然有一个大bug，只好连夜加班修复，然后静静等待2周或更长时间的Apple审核，这2个星期被用户的涂抹淹死，市场上一片差评，用户大量流失。等新应用被审核上线了，用户已经卸载了。但是，HTML5没有这些问题，你可以实时更新，有问题立即响应。
大幅下降成本：
创业者融资并不容易，如何花钱更高效非常重要。如果你使用原生开发的App和竞争对手使用HTML5开发的App没什么区别，但你的开发成本高出一倍，我相信没有投资人会喜欢给你投钱。
开源生态系统发达：
HTML5前端是开放的正反馈循环生态系统，大量的开源库可以使用，开发应用变得更轻松、更敏捷，当然这也体现在了快速迭代和成本下降上。不过更重要的是，这种开放的正反馈循环生态系统未来的生命力是比原生生态系统更强劲的。
开放的数据交换：
HTML是以page为单元开放代码的，它无需专门开发SDK，只要不混淆，就能与其他应用交互数据。开发者可以让手机搜索引擎很容易检索到自己的数据， 也更容易通过跨应用协作来满足最终用户需求。
更容易推广、更容易爆发：
导流入口多：HTML5应用导流非常容易，超级App(如微信朋友圈)、搜索引擎、应用市场、浏览器，到处都是HTML5的流量入口。而原生App的流量入口只有应用市场。聪明的HTML5开发者当然会玩转各种流量入口从而取得更强的优势。
流量大：前段时间微信朋友圈风靡一时《神经猫》，这个游戏如果放到Appstore，绝对没有那么多流量，超级App带来的流量，远大于原生应用市场。假如微信允许游戏在桌面创建快捷方式、假如游戏后续升级解决持续娱乐问题，未来不可想象。
导流效率高：除了入口多、流量大，导流效率高也不可忽视，谁都知道：页游和端游打同样的广告，广告变用户的转化率，页游远远高于端游。
HTML5对最终用户的3大优势
大幅降低使用门槛
为什么流媒体会替代下载视频成为主流?为什么页游会如此火爆?只因用户太“懒”。让用户更方便的满足需求，有时效果好于更多的满足需求。
用户眼睛看到一个兴趣点，点击后，就应该立即开始满足用户需求。比如流媒体可以立即看，页游可以立即玩。而目前的原生应用市场，用户需要这样操作：选一个应用、等待下载、确认权限、等待安装，然后点击打开。这样糟糕的体验迟早要被颠覆。
不管是App、游戏还是音视频，未来都将即点即用。谁先满足用户这个需求，谁就制胜。
实时更新、差量更新的优秀体验
HTML5应用可以绕开应用市场的限制进行自主实时更新，用户可以快速享受新服务。
而且这种更新完全可以是差量更新，比如某个HTML页面或某个js文件有问题，只更新这个几k的小文件就可以了，这比原生应用的更新体验好太多。
跨应用的使用体验
目前手机应用切换是以桌面或任务管理器为中心的，但事实上这些中心很影响效率和体验。用户想出差三亚，先打开去哪App订票，然后切回桌面，再找到并打开天气App，搜索输入三亚，再切到桌面，找到并打开航旅纵横App，输入航班号值机，哦对了，航班号多少来着，再切到桌面，找到并打开去哪App看航班号，最后找到并打开租车App，输入租车地点，然后再切回桌面。
在原生应用体系下，用户只能这样。但在HTML5体系下，他不需要切回桌面，他可以在App间方便的直接跳来跳去，而不是使用一个一个孤岛A他更不用重复录入数据，应用间可以方便的互相传递数据。
这种模式需要一点想象力，但未来迟早会来。
分析至此，我们可以明显的看出，不管是站在最终用户角度、还是站在开发者角度，HTML5必将取代原生应用当前的位置。并由此引发一系列颠覆。
还有什么会被改变?
HTML5的爆发，原生App生态系统的颠覆，是一场产业革命，很多角色都会受到影响，我们来预测一番。
新型HTML5引擎战火将烧起
标准的HTML5引擎并不能解决HTML5的所有问题，拥有大流量入口的互联网巨头，莫不在思考内嵌更优秀的增强引擎。腾讯推出了X5浏览器引擎，就是看中这个机会。目前各路浏览器厂商、应用市场厂商、甚至rom厂商，都在努力整合更优质的浏览器引擎。假使微信内嵌的Webview可以运行更优秀的canvas游戏、假使360手机助手可以发行即点即用的HTML5应用并且能力体验与原生一致、假使小米rom内置更强大的webview使得所有HTML5应用在小米手机上运行的更流畅。
一个巨头开始行动，所有巨头都会闻风而动，没错，这场战役会是移动互联网世界的二次世界大战。
应用发行市场将洗牌
由于超级App的巨大流量能轻易成为HTML5应用的入口，并且会形成大者更大的效应，传统的应用商店、甚至线下预装，这些流量不足和效率偏低的发行模式将被挤出市场主流。本身也是超级App的大流量应用商店，如果转型得当，也将以发行HTML5应用为主。
广告和统计市场
原生的广告和统计SDK提供商会面临尬尴，Google、百度等基于网页的广告和统计服务会取得更大的优势。开发者不再需要打包SDK，引入一个Script即可。
开源技术将在移动互联网领域更加流行
HTML的开放性造就了大量的开源产品，也反向促进了HTML的繁荣。在Github上有大量的JS框架，而原生的开源代码数量相比甚少。而未来移动互联网世界将因为开源而发展的更迅速，这里也同样存在类Github厂商的机遇。
开发工具的变化
早期HTML只需要记事本写几个Tag，中期的HTML、JS、CSS比较复杂，需要更高级的文本编辑器，但HTML5到来后，它的代码量、复杂度、开发模型将与原生开发看齐，需要类似XCode、Eclipse等专业的IDE工具来解决开发、调试的问题。一些以会使用记事本写代码为荣的开发者，将面临思路转换甚至被更高效的开发者淘汰。
性能分析调优
目前很多针对原生应用的性能分析调优工具或服务，未来也面临转型，HTML5应用的性能分析调优是另一个世界。
混淆与产权保护
HTML5是开放代码的，好处也带来弊端，有些东西开发者希望暴露，但有些东西开发者希望保护。混淆技术就变得更有商业机会。PC Web上Gmail的混淆就做的不错。除了JS混淆，离线数据加密相信也有不少空间。
安全厂商的新机会
HTML5的强大会引发很多安全问题，并且解决思路与原生不一样，业内有可能会出现新的安全厂商领导者。
HTML5这回真的来了
终于，在2014年10月底，W3C宣布HTML5正式定稿。这个时间，不晚不早，硬件性能更强、手机OS迭代速度下降。
随着HTML5标准定稿，一切纷争将告一段落，现在，属于HTML5的时代到来了。
有人说，光标准定稿没用啊，配套起来了吗?HTML5做的应用究竟能否匹敌原生App?答案是，HTML5不但可以匹敌原生App，甚至它天然的很多特性超越了原生App。
教你奌整手机屏幕保护膜!保护膜成日"痴&