GUCCIZ携手艺术家Yuko Higuchi推出拼图H5 《The Puzzle》

本文来源自H5案例分享；作者简豆

案例：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,还是多页面，响应式页面偏多。

【案例截屏】

请长按/扫描以下二维码

Yuko Higuchi - The Puzzle | Gucci

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