续上一期的H5新玩法~~~
02
基于触摸屏的操作
触摸屏上的操作也有很多的玩法。如单屏滚动、手势操作、全景交互及多屏互动。在触摸屏上的操作要符合用户的正常习惯,例如滑动屏幕可以翻页、移动场景,双指拉开表示放大操作,默认提供操作示范。
手势操作
上一期我们讲到了单屏操作,本期我们讲一讲手势操作。我们和屏幕交互,除了有点击、滑动外,还有很多的手势操作,如拖拽、放大、所辖、旋转、画图。切水果和愤怒的小鸟都是不错的手势操作的典型案例。
案例:
脑洞大过天,月饼究竟能做啥?
月饼究竟能做啥,打开看到白熊和冰皮月饼,通过点选和拖拽的方式将冰皮月饼放在白熊头上做耳朵(你的第一反应真的是耳朵吗?哈哈)进入下一个环节,将月饼放在礼盒即可送心意,并有脑洞指数,最后附有相应的月饼购买链接。
03
基于画面呈现
这类玩法一般就是展现比较酷炫有趣的画面内容,如动画、视频、特效、给用户带来视觉上的感官享受,用户也可以通过与画面内容互动,看自己想看的内容。
视频/动画展示
这类H5会播放一段时间较长但有趣生动的视频或动画来吸引用户关注其宣传内容。视频/动画生动炫酷有趣,以及常常有明星参与演出,用户一般不会太抗拒这样的广告,反而会喜欢点赞,甚至主动地向朋友分享。这个玩法适合用于产品、节目、游戏、电影等宣传场景及叙述内容比较多的场景。这个玩法的主要制作方式有:
1.视频。只要用AE实现,能制作出很炫的效果,但成本较高,业内都是按秒计算。
2.使用canvas制作。这种方式客人已制作出像以前的flash一样的动画,效果没视频酷炫,但这类动画既可以看,又可以在播放途中自然地添加交互,用原生代码来写,难度非常大,推荐使用createjs/egret/layabox/cocos引擎工具。
3.使用H5+css3制作,这种方式也能像方式2一样制作出动画,但制作难度和复杂度都比方式2大,而且受限于手机硬件问题,暂不推荐这种方式。
案例:
一镜到底,一刀未剪的大剧发布
跟随视线的深入,在色彩斑斓的画面中回顾那些很火热的剧集和综艺,轻松愉快的BGM,个性分明的大咖,光彩夺目的荧屏巨星逐一呈现在画面中。在屏幕下方戳一戳优酷图标,画面就会变换为万花筒,在H5的最后呈现YOUKU会员推广的界面。
劳斯莱斯BlackBadge化身黑暗骑士
这是一个目前来看非主流的快闪类型,提供给大家以启发思路。本H5案例采用快闪加图文切换的形式来展现,黑色的主色调以大气和高贵唯美的存在整个案例中 ,配合诸多经典黑色美学电影的精彩片段,既体现了对黑色美学的致敬又突出了新车型BlackBadge也融入了黑色美学的特质。
全景交互
全景交互指的是用户置于一个360度环绕的图片/视频环境中进行沉浸式的体验,用户可以通过传动手机或滑动屏幕来看这个环境里不同角度的内容并进行交互。如果将内容分成左右两个屏,带上VR眼睛,则可以进行VR体验。此玩法比较适合的场景有虚拟全景展示、身临其境的实景展示或活动现场展示,用户拖动商品即可看到不同角度下商品的样子。相关技术主要是3D旋转操作,陀螺仪方面的技术,全景图插件有造物节使用的css3-engine,全景视频组件有Valiant360,还有一些收费组件如krapano.
案例:
我们i音乐
进入页面是宣传海报,提示框内滚动显示品牌相关信息,点击进入3D场景,360度旋转手机可以全景观看,按照场景提示操作,4个不同场景会播放不同的音乐,在场景中的很多元素上设置了品牌LOGO,实现宣传推广,点击“查看详情”跳转到官方微博。
肯德基VR虚拟公益艺术体验馆
进入页面选择体验KFC公益艺术虚拟体验馆的方式:360度全景模式或者VR眼睛模式,进入体验馆之后点击地面上的展厅地图可以知道体验馆主要分为四个区:体验大厅,我的微信好友厅,公益艺术画作展,在线好友区,点击进入画展上的画作即可更好的欣赏画作,点击画作右上角的按钮,可了解画作详细信息。
多屏互动
多屏互动指在多个屏幕上体验活动,各自的操作会同时反应到其他屏幕上,一般以双屏互动为主。玩法有多人合作或竞技、你画我猜、一问一答、情侣互动、线下与现场观众互动、多个屏幕拼起来看视频等,也可以把手机作为遥控手柄,用大屏幕来显示。制作此类活动时,切记注意场景,上百人的大场和十几个人的中场和几个人的小场是不同的,策划上完全不同,大屏只有一个,人一多就要考虑到展示的问题,要么只实时展示战绩,要么只展示一瞬间的头像(主区域,视动作而定,比如一次击杀、一次抢赢,夜店霸屏也是不错的参考)。十几人和几人的场基本展示上不用担心,可以全部展示。接下来就是形式,其实很多都可以借鉴其他实体游戏或现有的游戏,比如贪吃蛇大战。信步互动是国内最早尝试多屏互动的公司之一,很多案例做的也不错。
案例:
七夕节“梅赛德斯奔驰”
以鹊桥会为主题,扫码进入页面,摇动手机,画面开始展现,一台奔驰汽车试过桥面,到达红色的爱心交汇的地方,画面最后是一台红色奔驰车朝着画面外,打开了明亮的车灯。
微信线下多人飞机游戏
微信无现金日的活动现场提供了一个可以让多人同时玩的飞机游戏。游客用手机操作飞机射击,当达到了一定分数就可换取礼物。在大屏幕上会显示多人一起玩的游戏画面。这种方式增强了主办方与游客、游客之间的互动,也减少了游客的排队时间。飞机游戏的设计,也让人想起了第一款微信游戏就是飞机游戏,有一种回归初心的感觉。
信步互动投篮球小游戏
用手机控制篮球的方向和速度,瞄准篮框投球,最后15秒,篮框会移动,增加了游戏难度,游戏还可以与公众号进行关联,典型的线下吸粉神器。
总结
H5在未来十年都会是web的主流形式,现在很多APP、VR、AR与H5都有结合点,对于营销而言,移动端的富媒体广告形式,H5更是不二人选。了解H5带来的新能力及其带来的玩法,多看案例,在构思策划活动时也可以翻看一下这篇文章,你就找到灵感了,然后就是升职加薪,走向人生巅峰!