京东&奥利奥：新年就要汪得福

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

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

识别图中二维码

新年就要汪得福 -查阅二维码

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

案例：新年就要汪得福

出品：京东&奥利奥

亮点：

策划上，Loading完毕，按要求滑动饼干，执行一系列的动画，结束后，选择送祝福的汪，选项有：哈士奇、京东JOY、法斗和柯基。选择后，点击“我要这只汪”按钮，进入下一部分，选择输入祝福语，完成后，点击“汪出我的祝福”，合成一个小狗送祝福的片段。
设计上，采用动画风格，狗年祝福，选用了四种狗狗形象，奥利奥饼干作为页面的一部分，整体协调，整体风格活泼有趣。此H5的输入框与以往不同，此输入框可以直接选择则文字。
交互上，包括滑动屏幕、点击等方式。
体验上，此H5的输入框、选择文字输出为语音是亮点，模拟小狗的声音播放出来，很可爱。但是，个人感觉用户可体验的选择太少，祝福语的字数最多限制为6个，文字内容的选择也有限。动画很流畅，风格很活泼，品牌的植入非常自然。

技术实现： jQuery.js+zepto.js+canvas

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

标签