Gucci:Yuko Higuchi - The Puzzle

2020-07-15 H5案例分享 H5案例分享
Gucci:Yuko Higuchi - The Puzzle


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

识别图中二维码

Yuko Higuchi - The Puzzle-查阅二维码

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


案例:Yuko Higuchi - The Puzzle

品牌:Gucci

技术实现: JavaScript

亮点:

1、创意定位

GUCCI与日本画家Yuko Higuchi推出的儿童系列产品宣传H5,宣传采用拼图形式;当用户看到H5中的图案,会想起对应的商品;图案很有Yuko Higuchi的风格,无论是喜欢画家,还是喜欢图案画面,都可以引导到商品的购买页面。

 

2、策划上

① 这支H5一共两屏,一屏为Loading页面,一屏为具体的拼图小游戏页面。

② 进入H5后,看到罗列的图案,用户滑动屏幕,选择喜欢的要拼的图案,一共4幅图案;选择好后,点击图案下方的“PLAY”按钮,出现操作提示和打乱顺序的拼图小图;

③ 拼图一共15块小图,点击小图后,小图移动到空格,只能点击空格周围的小图哦,通过小图的不断移动,拼出顺序正确的图案,屏幕出现“YOU WON”,点击图案下方的“PLAY NEXT”按钮,切换下一个拼图;

④ 拼图不限制时间,如果中途不想拼了,点击屏幕下方的“CLOSE”按钮,结束本次拼图;

⑤ 屏幕左下角,进入商品购买页面。

 

3、设计上

整体设计基于日本画家Yuko Higuchi的画作,其他位置都是纯色,这样更突出画作的图案,浏览过H5的用户,会对图案印象深刻。

 

4、体验上

页面支持手机端,同时也支持电脑端,是响应式页面;国外的页面无论One Page,还是多页面,响应式页面偏多。





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

标签

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

相关推荐:

Gucci:Gucci Lips

GUCCI:GUCCI ZUMI

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

阅读原文

微信扫一扫
关注该公众号

收藏

微信极速登录/注册

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

微信公众号

提交案例

请pc端输入网址

"h5anli.com"

下载截图压缩包~

标签已提交成功

小编正在审核

请等待一下下啦

哎呀

标签已存在

换个新的呗~