一大波优秀的海外 H5,让你感受到逼格满满!

举报 2016-10-20

说实话,现在H5在国内那么风靡,殊不知国外H5也是逼格满满,歪果仁超级会玩,不是技术派就是艺术家,10个案例,双手奉上!

注:部分 H5 载入较慢,建议翻墙以获得更流畅完整的体验。

原标题:『国外H5』打起精神,看歪果仁如何做出逼格满分的「H5」!
数英网用户原创文章,转载请联系本人


国外 x 创意H5 x 互动营销

国外优秀H5 1

Because Music:十周年音乐纪念网站

亮点:2015FWA“年度最佳网站”

Because Music:十周年音乐纪念网站

小编有话说:the Favourite Website Awards 这个网站,每年都会评选“最佳网站”,也是不少创意人士的灵感源地。这个作品就是去年的大奖,网站用非常无厘头的方式展现了Because Music旗下音乐人的专辑及音乐。“有趣的互动体验”、“内容充实但不花哨”,是小编体验后的感受。进入网站,长按按钮随机出现歌手,例如上面这个图,你需要互动才能播放音乐,这里的互动方式污污,需要你不停拿掉男神下半身的“遮羞布”,同时在互动页面,你还可以下载音乐,也可以跳到歌手主页。

扫描二维码,立即体验!
(数英网 App 用户需点击放大二维码后,长按识别)


国外优秀H5 2

Way to Go:纸片人冒险之旅

亮点:2015FWA“人民选择奖”

一大波优秀的海外 H5,让你感受到逼格满满!

一大波优秀的海外 H5,让你感受到逼格满满!

URL: http://a-way-to-go.com

小编有话说:这个作品则是去年FWA的“人民选择奖”,同“年度最佳网站”是全场的最大奖项。这个网站类似创意者的聚合地,你可以写博客、搜寻创意人、看新闻、看图片……首页的交互体验更是酷到炸,你瞬间变成第一视角的纸片人,用鼠标控制方位,在森林里行走、在高空滑行,可以全景729度观察周遭的一切,这种逼真的VR体验让人仿佛真在原始森林一样。



国外优秀H5 3

belVita:Morning Win小游戏合集

亮点:15个晨间小游戏

belVita:Morning Win小游戏合集

小编有话说:烘朗作为一款早餐饼,不仅想在早餐时占据用户的胃,还想占据用户的手眼脑耳,野心真够大的!这款叫Morning Win的游戏合集由15个小游戏组成,play yoga、play dog、play card……都是轻量级不烧脑的小游戏,而且和晨间场景很搭,适合吃早餐或者通勤在路上玩,合集的设置也让用户暂时不会抛弃,在时间持续度上有保证,再配合社交媒体上的campaign策略,刷个屏也不是难事。品牌软性植入在游戏的各个场景中,用户不知觉的就接受了产品和品牌,一举两得的事情哪个品牌主会不爱呢?

扫描二维码,立即体验!
(数英网 App 用户需点击放大二维码后,长按识别)


国外优秀H5 4

Silik:家居产品移动展示

亮点:分段加载技术

Silik:家居产品移动展示

小编有话说:这个H5作品品牌主来源于Silik,一个高端意大利家居品牌。整个H5围绕Silik三个系列的产品展示,刚开始的动画着实惊艳,飞鸟的效果应用了粒子动画技术,视觉感超强,播放流畅。值得一提的是,由于H5文件过大,作品采用了分段加载的技术,进入首页时在用户未选择系列章节时,动画并没有加载,当用户选择时,被选择的章节才会加载播放,这就节约了等待时间,提高了用户体验,减少了跳失率。在产品展示环节,动画也做的相当细腻,滑动手指,在观看产品的同时,还有烘托场景的小动画在周围渲染,这里应用的是关联动画技术。


扫描二维码,立即体验!

(数英网 App 用户需点击放大二维码后,长按识别)


国外优秀H5 5

In Pieces:保护濒危物种

亮点:极简的折纸风格

In Pieces:保护濒危物种

小编有话说:这个H5是一个倡导保护濒危动物的公益作品,用棱角分明,极具视觉冲击感的折纸风格构建30个濒危物种,狮子、鱼、鸟……,这种设计风格透露着急迫的情绪:保护濒危动物刻不容缓,整体画面给人以干净、简洁之感,而且画面整体动物居中,焦点明显,主题十分鲜明。交互上,点击右上方的按钮可以前后切换,点击左上方的圆形按钮可以浏览30个物种的具体名称;动画上全程采用CSS3完成,转场过渡用粒子动画完成,评估工作量很大,设计团队真是下了苦功。

扫描二维码,立即体验!
(数英网 App 用户需点击放大二维码后,长按识别)


国外优秀H5 6

标致:Peugeot Catch the Dragon

亮点:3D立体模拟实境

标致:Peugeot Catch the Dragon

小编有话说:这个是标致为旗下一款新产品做的移动推广,创意点围绕着追逐火龙展开,用户可以通过两种方式:VR虚拟实境和360度全景加入,前者分双屏,如果有眼睛3D感觉很强,后者是全屏幕,但视觉感和体验同样出色。用户能体验到坐在驾驶室追逐的感觉,风驰电掣,直道飙车,转弯漂移,在手机上体验就能感受到这款车的优越性能。技术上调用了手机内置传感器,用户只要360度移动手机就能控制车体。


扫描二维码,立即体验!
(数英网 App 用户需点击放大二维码后,长按识别)


国外优秀H5 7

Make Me Pulse:2016 Make Me Pulse

亮点:H5特效库

标致:Peugeot Catch the Dragon

小编有话说:这个是Make Me Pulse品牌在2016年度的移动品牌广告,在小编看来,简直就是一个超酷的H5特效素材库!开启动画,长按按钮,屏幕会陆续出现7个词汇:Work、Dream、Think、Strive、Imagine、Pulse、Pround,停止长按会随机出现一个单词,并出现一种H5特效,如画布收缩、水波纹理、3D旋转等,特别酷炫,画面结束页,是品牌主在2016年的口号“WISH YOU THE BEST FOR 2016”。整体的创意简单纯粹,7个词汇就是品牌的7个精神内核,同H5动效完美结合,让人印象深刻。

扫描二维码,立即体验!
(数英网 App 用户需点击放大二维码后,长按识别)


国外优秀H5 8

Braintree:codeology

亮点:技术与艺术的完美融合

Braintree:codeology

小编有话说:用一行行的girhub代码生成一幅幅画作,你能想象吗?外国的设计师们不仅想到,而且还做到了!这种跨界的组合,实在脑洞大开,也让人从另外一个层面上感受到代码之美,原来它并不是没有生命力的,一行行代码炫动而耀眼,有一种说不清道不明的科技美学,谷歌、苹果、facebook的网站都在其中,你还可以点击左下方给该幅作品点赞,也可以在上方的搜索框手动输入寻找你想看的网站。手机端打不开的童鞋,可以用PC打开,效果比移动端更震撼。

扫描二维码,立即体验!
(数英网 App 用户需点击放大二维码后,长按识别)


国外优秀H5 9

France TV education:Le dernier gaulois

亮点:长卷轴电影分镜脚本

France TV education:Le dernier gaulois

小编有话说:这是法国教育电视台为新剧上映做的H5宣传。观看时一定要打开声音,旁白的法国男声实在太好听了,全立体声道特别浑厚。整个移动网站的设计走的是法式浪漫,精致的油画色调,让人一看就忘不了的浪漫风情,用户只需要向下滑动,就能观看故事,竖直长卷轴的设计,画面过度零间隔,场景衔接上特别自然,用户在观看时很容易产生浸入式的体验,更容易与故事产生共鸣。


扫描二维码,立即体验!
(数英网 App 用户需点击放大二维码后,长按识别)


国外优秀H5 10

全日空:ANA Planet

亮点:移动端星球大战

全日空:ANA Planet

小编有话说:这是全日空航空公司把自己的航线与星球大战结合的一款移动端游戏,37个关卡,体量相当于一个大型手游了。用户需要在屏幕的提示下一个个闯关,每一个关卡的设置完全匹配星际争霸里的元素和设置,星战粉们完全沦陷了有没有,而且画面精美,声音震撼,完全就是大片配置,当用户玩完全部游戏时也对全日空的航线摸得滚瓜烂熟,同时页面底部还有社交平台分享提示,玩家之家可以互相竞技和比拼。这种广告套路,小编太喜欢了,给101分!


扫描二维码,立即体验!
(数英网 App 用户需点击放大二维码后,长按识别)


公众号:拇指部落(微信ID:muzhibuluo)

本文系作者授权数英发表,内容为作者独立观点,不代表数英立场。
转载请在文章开头和结尾显眼处标注:作者、出处和链接。不按规范转载侵权必究。
本文系作者授权数英发表,内容为作者独立观点,不代表数英立场。
未经授权严禁转载,授权事宜请联系作者本人,侵权必究。
本内容为作者独立观点,不代表数英立场。
本文禁止转载,侵权必究。
本文系数英原创,未经允许不得转载。
授权事宜请至数英微信公众号(ID: digitaling) 后台授权,侵权必究。

    评论

    文明发言,无意义评论将很快被删除,异常行为可能被禁言
    DIGITALING
    登录后参与评论

    评论

    文明发言,无意义评论将很快被删除,异常行为可能被禁言
    800

    推荐评论

    全部评论(3条)