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

2020-09-20 H5案例分享 H5案例分享

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

识别图中二维码

生活与你一起升级-查阅二维码

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

案例：生活与你一起升级

品牌：华为HONOR life

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

亮点：

1、创意定位

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

2、策划上

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

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

3、设计上

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

4、体验上

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

以上为“H5案例分享”团队原创文章，转载请注明出处！

标签