百雀羚气韵：气韵肌肤捉妖记

2018-01-25 H5案例分享 H5案例分享

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

识别图中二维码

气韵肌肤捉妖记-查阅二维码

完整欣赏此案例大约需要2分25秒

案例：气韵肌肤捉妖记

出品：百雀羚气韵

亮点：

策划上，游戏类。这是百雀羚与捉妖记袖手，为汉方美肤品牌——气韵宣传的一款H5。①加载完成后，音乐响起，进入一段图文介绍，内容：妖王胡巴前往人间处理肌肤妖怪的前因后果。屏幕的右上角有一按钮，点击后跳过视频，直接进入游戏界面。②游戏界面的中间是旋转的肌肤妖怪，下边是气韵小粉瓶，右下角显示剩余银的数目。点击小粉瓶，向妖怪发射银针，当银针扎在妖怪身上完好的部位，并成功扎完规定数目时，本剧成功，否则游戏失败，重新进行此局。③第一局，大战吸水怪，要求六根针，完成，右下角数字小时，出现一个按钮，点击进入下一局…④三局游戏完成，获得一次抽奖机会，点击抽奖。
设计上，页面已深蓝色为主，文字为白色毛笔字，醒目，凸显汉方品牌的韵味，游戏界面，妖怪的形象定义为卡通，发射器是真实的气韵小粉瓶，整体风格多样。音乐的设置大气磅礴，营造了一种游戏时振奋的心情。胡巴前往人间的前因后果片段可以跳过，比较人性化。
交互上，屏幕的点击。
体验上，个人感觉此案例的风格多样，但是介绍胡巴下凡到游戏进行的过渡很突兀，游戏中直接把小粉瓶放入卡通界面，给人一种很混乱的感觉。

技术实现： jQuery.js

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

标签