盘点2017上半年,那些画风精奇的爆款H5

业界 2018-11-02 12:08:23 阅读459

现在微信用户量如此之高,在微信做线上推广便成了不可少的途径。伴随着一只神经猫和几次品牌内容的朋友圈疯转,H5逐渐占据了自己的营销地位,越来越多的品牌开始制作H5。

而互动性和用户体验效果是用户对一个产品好坏的重要评判标准,同样这2点也是H5营销传播内容好坏的决定因素。画面精美、体验新奇、操作流畅的H5才会让用户给品牌加分。

人是视觉动物,那么烧脑君今天给大家整理了十个画风精奇的H5(排名不分先后),都非常有意思,一起来看看吧!

1

费玉清又火了!快听2017年洗脑神曲!

出品:滴滴出行

技术实现: Video

视频类,模拟费玉清专辑,浓浓80年代海报设计感,文字画面设计感强,滑动屏幕开始播放视频,小哥骑车从1里之外一直唱到6里之外,每一里的设定都有电影海报的既视感,最后可以进进入滴滴打车叫车界面,十分有趣。

扫描二维码体验 ▽

2

一分钟看懂单身狗

出品:艺龙

技术实现: Video

以简笔画动画讲述了一个男主狗剩“因下载APP网速慢而无法去酒店开房看夜光手表导致的悲惨分手”,扫地大妈为安慰狗剩,在说唱和扫地中不漏痕迹的把“微信钱包订酒店”的信息表现出来,最后可以奔走相告,分享给好友以及领取520专享红包!

画风简洁,音乐魔性。体验上,整个案例轻松,幽默。

扫描二维码体验 ▽

3

转完这个H5,就去陪老妈过节

出品:统帅电器

技术实现: Video

情景类。在母亲节来临之际, 该H5将妈妈的形象进行了差异化,以一个年轻人做事的方式来呈现妈妈“逃离不孝子女““妈妈集体去火星”这样的表现方式,突破常规思维;同时描绘妈妈走后,年轻人生活的囧态——房间脏乱差,衣服八周一洗,阐释妈妈的重要性。

扫描二维码体验 ▽

4

端午节拒做单身狗!

出品:网易

技术实现:Canvas + Egret(白鹭引擎)

测试答题类,端午来了,有几道给你测试一下自己撩人本事的题。

你的另一半想吃粽子了,需要你根据TA的描述,猜测TA喜欢吃甜粽还是咸粽, 十道题全部猜完后,即可看到你猜对了几次,并根据你的战绩给出你能追到的男神or女神的名字, 最后点击结果页“领端午礼物”,登录网易新闻客户端即可有一次抽奖机会。鬼畜风格,视觉效果强烈…一言难尽…!

扫描二维码体验 ▽

5

飞越淘宝奇市

出品:淘宝

技术实现:JavaScript+3D+Video

通过一支风筝穿越的时空的方式,进行展现造物节的丰富,进行活动宣传。

利用交互动画+3D建模视频来完成,一共四个场景,每个场景串场动画为一只风筝穿梭于五彩斑斓的时光隧道,利用重力感应+ThreeJS来完成交互,然后播放东、西、南、北四个方位进入的3D视角视频。背景音乐轻快悦耳,新颖的H5形式让人印象深刻。

扫描二维码体验 ▽

6

穿越未来来看你

出品:腾讯

技术实现:Zepto + Video

插画风格,画风极致细腻,一面承载着中国的传统文化,另一面象征未来的大场景,不仅打造了腾讯NEXT IDEA的标志性;中间部分中国风和科技相结合,在不可思议中将传统美与未来科技融合!后面的画面又有一种科幻风,想象力十足。

音乐上,混拼音乐,从曲调独特的京剧、古典乐转为节奏动感的RAP,分分钟将未来与传统相结合。

扫描二维码体验 ▽

7

关于我的故事,全在这里了

出品:冈本

技术实现:

CreateJS + TweenMax + Zepto + Video

视频将这幅“极乐飞升图”作为切入点,讲述了冈本产品,从设计,到“原料加工”,到“产品成型”,再到“安全检测”等全部过程。

画面风格很像浮世绘,淡黄色的背景,与整体给人的“污”感完美结合在了一起。男声配音充满吸引力,情绪也恰到好处,配合着画面,将故事讲述的超级生动形象,一点都不枯燥。

扫描二维码体验 ▽

8

上手机QQ 贴表情

出品:腾讯

技术实现: CreateJS+Zepto+video

画馆从“戴珍珠耳环的少女”开始,各种世界名画、圣经里的人物,都趁夜出来斗图逗表情,最后推出“上手机QQ贴表情”的主题,且底部露出动图拖拽演示效果。

用夜晚美术馆中的“世界名画”为手机QQ的贴图表情代言,让大家在欢乐中感受手机QQ的贴图表情的魅力,诱导App更新和安装。

扫描二维码体验 ▽

9

你学到的有多少已还给老师

出品:海宁日报

技术实现:jQuery

游戏类,共有十道小学题,每题都是小学学过的的知识,题目主要采用图文结合的形式,每题答完,在选项上会有对错图标提示,题目上方的大图上会出现吐槽文字;全部答完后即可看到自己的得分,扫描二维码即可下载app。

插画风格,采用绿色作为主色调,瞬间让人回到小学看课本的节奏中去。

扫描二维码体验 ▽

10 

ofo小黄车研发车间 

出品:ofo

技术实现: Canvas + JavaScript

图文类。一共五个场景展示“ofo小黄车研发车间”。点击小黄人,启动工厂设备,小黄人对车辆驱动系统进行检测;进行车辆组装车间,摇一摇手机,纠正图纸方向;进入染色车间,向下滑动屏幕,将车辆进入小黄人澡池进行染色;进入测试车间,点击黄豆喂给小黄人,两个屁就可催动车辆。随后摇一摇为发布会揭幕,大boss与小黄人代表接受采访,表示小黄人车间拳头产品-小黄车荣耀上市。

案例整体以3D模型展示,空间感十足,小细节满满,十分精致。颜色方面以小黄人与ofo共有黄色为主色调,增强产品辨识度。多种方式的交互方式,配合有趣的音效,给人一愉快的体验。

扫描二维码体验 ▽

·END·