onmyoji X PAPER THEATER:《阴阳师》手游官网-阴阳师纸百景

2019-08-28 H5案例分享 H5案例分享
onmyoji X PAPER THEATER:《阴阳师》手游官网-阴阳师纸百景


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

识别图中二维码

《阴阳师》手游官网-阴阳师纸百景-查阅二维码

完整欣赏此案例大约需要1分钟


案例:《阴阳师》手游官网-阴阳师纸百景

品牌:onmyoji X PAPER THEATER

亮点:

  1. 创意定位

Onmyoji与PAPER THEATER联合出品,展示手机游戏《阴阳师》的周边产品——纸百景的作品,用户在作品中可以感受到在强烈的灯光效果下纸百景的内容和氛围,360度的的查看实物图,及了解制作工艺,最后可切换至另一款产品继续查看或点击链接登陆官网。

 

  1. 策划逻辑

加载界面是黑色背景上有一轮明月,明月当中有一个简易日式牌楼,下方会显示加载百分比。

加载完毕后,有两个环节

①漫画风格的视觉效果场景图,场景图上会显示一句人物内心独白,然后显示此款场景图的名称,用户可通过上下左右滑动屏幕控制灯光移动,最后点击下方的“长按”,场景图逐渐缩小,切换成实物介绍图,或点击左上角触点直接切换至同系列另一款产品的场景图中。

②实物图包括制作工艺,价格及出品方,用户可左右滑动屏幕360度的观看实物图(带包装盒),最后可点击“立即购买”登陆旗舰店,或点击“换一个”查看另一款产品,两款产品的名称分别是“玉藻前”和“鬼切”。

 

3. 设计上

“玉藻前”是浓郁的大红色风格,“鬼切”是紫色,视觉效果很强烈。

 

4. 交互上

用户在屏幕上任意滑动控制灯光,查看场景详情,长按花朵图案让场景幻化为实物,将视觉氛围带入产品观感中。在观看过程中可以随时点击切换至另一场景图进行感受和了解。



技术实现: threejs



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

标签

分享:
海报
案列链接
下载截图
收藏案例
已收藏
分享到微信朋友圈
打开微信,点击底部的“发现”,
使用“扫一扫”即可将网页分享至朋友圈。

相关推荐:

征途:史大哥豪宅失窃 3亿机密惨遭泄露

网易新闻:《阴阳师》手游官网 阴阳师纸筒人

关注微信号:h5-share,获取更多创意H5案例分享!也可访问H5案例分享网站www.h5anli.com,搜索查阅~

阅读原文

微信扫一扫
关注该公众号

收藏

微信极速登录/注册

对汉语支持不错,别对小五说英文

微信公众号

提交案例

请pc端输入网址

"h5anli.com"

下载截图压缩包~

标签已提交成功

小编正在审核

请等待一下下啦

哎呀

标签已存在

换个新的呗~