上海营销型网站制作_高端网站制作_APP原生态开发_H5开发_微信开发_上海通搜网络科技有限公司

对于H5这个名词想必大家已经很熟悉了,就在2014年,一项本来还不太成熟的技术在微信的社交舞台下大放异彩,让我们见识了“移动+社交”爆发的巨大能量。

 
 

什么是H5?

No.1 绘图功能(Canvas、SVG)

这是H5一个非常重要的特性,你在很多H5中看到的动画效果就是用H5的绘图功能做的,比较典型的例子是STC风云榜分享的可口可乐的例子。 可口可乐的例子参见:《如此风骚!2014年刷爆朋友圈的十大 HTML5 技术案例》 为了方便理解,你可以将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浏览器中打开,虽然麻烦一些,但绝对是值得的。(建议谷歌/火狐 )


No.3 离线存储(HTML5 Web Storage)

H5的另一个重要特性就是离线存储,它能将用户的资源文件保存在本地,这样在页面加载的时候网页能使用本地资源,从而实现离线状态下访问网页应用。举个例子,通过离线存储,你可以在没有网络的情况下阅读公众号的文章(当然这只是技术上可行,微信目前没有此功能)。 当然离线存储能容纳的数据量是有限制,跟浏览器有关,目前Chrome支持5M。大家或多或少都知道Cookie这个东西,它也是记录用户浏览数据的,比如百度那些根据你的搜索习惯给你推荐的广告就是这种技术实现的,不过它的容量是4k。 技术细节大家可以忽略,但是关于离线存储这个功能,大家可以发挥想象——假设离线存储的容量是100个G甚至更多,浏览器就变成了一个超级应用入口,所有网页应用都具备离线存储和在线浏览的功能,这时候在线Office、在线记事本甚至在线PhotoShop都可以实现,我们的电脑只需要装一个程序——浏览器。在这个假设中,浏览器将干掉Windows,一切用户操作都在云端进行!稍微有点难理解,大家可以仔细体会。 以下是运用离线存储的一个例子,这个提供在线便签功能的网站无论有没有网络都可以访问,并且你记录的所有便签都会保存下来,很实用的网站,有兴趣可以试一下。


H5能怎么玩?

01.幻灯片式玩法

以下这个特斯拉的例子相信很多人都看过,精美的图片设计+简单的翻页效果,在我的印象中大概3、4月份看到特斯拉这个H5的时候,大家还不知道原来微信营销可以这么玩,记得那时候我们看到之后就在一周内做了一个类似的H5,用于STC的品牌展示。当然,在这之后H5就千树万树梨花开了。


幻灯片式H5可能有以下的应用场景:
1、定期发布内容。这些内容相对而言比较常规,但是有时微信图文又无法达到理想的效果,通过H5的形式会更易于传播,当然前提是要有好的设计。比如数据报告、频繁上线的新产品或功能、小型线下活动邀请、活动相册等等。
2、结合热点的营销,周期极短。这种情况下,时效性是非常重要的,如果开发一个H5用了半个月,热点想必也结冰了。所以,应该以最快的速度推出才是明智的选择,而这时候引起广泛传播的关键就在于文案和设计。 此外,大家不要轻视这种短频快的传播,有时候它要比很多大投入的传播来得有效。没有人能完全掌握受众的兴趣点,所以一次大投入的传播不一定就能出效果,但是多次热点传播出效果的概率从统计学的角度也要高一些。如上文所述,我们可以实现用户在H5中所有交互行为的监测,因此,如果短频快的传播能配合有效的数据监测,便可以进行持续优化,降低不确定性。


02.交互式动画

可口可乐这个案例在之前的风云榜中推荐过,是运用H5绘图功能的典型例子。当然这里面的交互还是比较简单的,只不过它基本体现了交互式动画的感觉。整个可口可乐的时间轴是随着用户向上滑动页面“绘制”出来的。


其实除了这种叙事型的H5动画,我们能看到的大多数H5游戏也都都属于这一类,比如神经猫、打企鹅、2048等等。最近也有一个比较火的H5游戏叫“财务包子铺”,在这个游戏中用户扮演包子铺的创业老板,在事业发展的不同阶段做出经营决策,最终登上人生巅峰。虽然游戏中植入了赤裸裸的产品推广(知乎的一本新书),但最后还是取得了3天破300万PV的成绩。


应用场景
 1、中小型活动/品牌事件的传播,预算不多、周期较短。这种情况一般就是某些新品发布、企业招聘、公关事件、中型会议等的传播。
2、大型活动/品牌事件的传播,预算充足、计划性强、周期较长。一般大家看到的那些美轮美奂并且极具传播性的H5基本上都属于这一类,比如上文提到的可口可乐“分享快乐128年”.
 

No.3 功能型H5

看一下以下的两个例子,第一个是百度针对地铁涨价做的H5,它可以计算你每天坐地铁要多少钱并且实时显示大家的评论;第二个是STC的社交移动风云榜,很简单,就是精品H5的展示:



这两个H5都有一个特点,除了针对受众的热点内容传播以外,它们很像一个“供用户重复使用”的产品,这就是所谓的功能型H5。其实大家看到风云榜可能会觉得它只是一个再简单不过的网页,但如果从它满足用户需求并产生重复“使用”行为的角度,它其实是一个产品,事实上我们从一开始就是把它当产品来运营的,关注Social Talent的朋友可能会有所感受——每周更新、定期群发推荐H5的图文、栏目更新通知等等。 功能型H5的独特价值在于,除了具备传播性以外,它通过用户的重复使用行为使得H5的传播是一个持续不断的过程,这一点是一般的H5所不具备的。风云榜首次发布时转发6w+多,目前每月的访问量都在10w左右,不算多,但是给我们带来的流量转化都是精准的,关注我们的大多还是从事营销相关职业的朋友。 个人觉得web应用肯定是未来发展的方向,就像上文所说的,很有可能未来的操作系统将被浏览器所取代,服务和应用将进入完全的云世界。当然距离这种假设还比较远,但唯一大家可以放心遵守的原则,就是聚焦于用户需求。 我所说的功能型H5,是同时聚焦于用户需求并且注重传播性的H5轻应用,也就是在设计H5的时候除了考虑传播的问题以外,也要思考如何把它变成一个持续运营的产品。这里面其实是思考角度的问题,从“我要传播什么”到“我希望用户传播什么”的转变。

应用场景
轻交互重功能的功能型H5制作周期较短、成本也不高,成功的关键不在于酷炫的交互,而在于用户需求的把握以及后续的运营。 因此,这一类H5需要的是一名高水平的的产品经理,而以设计、开发为辅。
以下是总结的应用场景: 1、品牌账号的粉丝运营。功能型H5由于具备一定的产品特性,其最大的价值就是提高粉丝活跃度和忠诚度。我们需要根据本身品牌的形象定位以及受众的特性设计功能型H5,要将品牌或产品的功能性特征抽象到生活方式或者精神追求的层次。 举个例子,卖洗手液的可以抽象为健康生活方式,设计一个改善生活健康状态的功能型H5;服装品牌可以抽象为追求时尚前沿,设计一个定期更新时尚潮流资讯的功能型H5。事实上,以粉丝需求为中心的功能型H5将潜移默化的提升品牌影响力,在提升忠诚度的同时带来持续的口碑传播。

2、结合热点内容的品牌传播。这种类型的传播是最常见的,但是往往很多结合热点的H5传播都是一次性娱乐消费,大家看过就忘了。其实如果能从用户需求挖掘和产品运营的角度去思考,许多针对热点的H5传播都有很大提升的空间。