热点资讯


最新最热黑科技资讯

向下滚动

如何玩转H5

发布时间:2017-08-31 16:31:30
文章来源:优设网

        在2014年,一项本来还不太成熟的技术在微信的社交舞台下大放异彩,让我们见识了“移动+社交”爆发的巨大能量。
     然而这不是偶然,而是趋势。
    相比电视、杂志、户外广告等传统媒体呈逐年下降的趋势,品牌营销在数字和移动方面的投入在逐年上升。而且,在所有渠道预算中移动技术的投入增长最快,远远高于其他渠道的增长。当然,这样的结论你应该不会感到惊讶,因为我们早已习惯了24小时手机陪伴的生活,而品牌最关注的就是消费者“在哪”的问题。
据美国的调查数据显示,我们每天要查看手机150次,44%的人睡觉都把手机放在身边……毫无疑问,手机是有史以来最强大的媒介,从早上醒来到临睡前的一秒,这个几英寸的屏幕都在和我们“交流”。
显然,移动营销已是大势所趋,我们可以看到已经广泛应用的签到、二维码技术,正在兴起的iBeacon、微信的Wifi连接,还有就是H5技术。那些百万PV的H5都是怎么做的?H5能做什么,有哪些玩法?精心打造的H5要如何推广?H5技术将如何发展?
   H5能怎么玩?
1. 幻灯片式玩法
以下这个特斯拉的例子相信很多人都看过,精美的图片设计+简单的翻页效果,在我的印象中大概3、4月份看到特斯拉这个H5的时候,大家还不知道原来微信营销可以这么玩,记得那时候我们看到之后就在一周内做了一个类似的H5,用于STC的品牌展示。当然,在这之后H5就千树万树梨花开了。

       这是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时最头疼的问题,因为不知道能做成什么样,你也就不知道从何下手。所以下面我给大家介绍一个网站:http://fff.cmiscm.com,在这个网站中,你几乎能看到所有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传播都有很大提升的空间。
近来大家都喜欢报道习大大和彭麻麻的“私生活”或者非正式领导会晤之类的,如果有人能做一个类似微博“学习粉丝团”那样,定期更新“学习资讯”的功能型H5,想来必火。