华为HONOR life:生活与你 一起升级

案例演示,请长按/扫描以下二维码 ->

识别图中二维码

完整欣赏此案例大约需要25秒 – 1分21秒

案例:生活与你 一起升级

品牌:华为HONOR life

技术实现: egret.js + tween.js

亮点:

1、创意定位

基于荣耀秋季新品发布会的【生活与你一起升级】主题,通过画中画一镜到底交互设计,让用户解锁3款不同产品对应的生活使用场景。从黑白画面一键穿越发现心中最理想的精彩生活,实现新旧生活的无缝切换,展现产品能给用户带来的生活方式/状态的升级。

 

2、策划上

① 案例进入后,可以横向滑动3款产品,滑动的过程中上方的海报也跟随变化,不要以为这就结束了,其实点击产品后,会进入画中画;

② 在画中画中,长按产品按钮,画面由黑白进入彩色,代表开启新的生活方式/状态;长按的过程中,松手即可定格画面,定格后点击,点击此处拍下升级时刻,也可以一直长按,每款产品最后也有定格;在定格中输入你的姓名,点击“确定升级”按钮;进入海报页面,用户可以长按保存,或者预约观看发布会。

 

3、设计上

成人漫画风格的插画,在最初,画面都是黑白色,当用户长按产品按钮后,插画变成彩色,代表产品开启新生活的寓意。

 

4、体验上

在首屏时有时会迷茫,小五最开始就以为看到首屏就结束了,没有意识到需要点击产品还会有画中画,引导性再抢一下就更好了。