网易严选：定制你最严选的家

2018-04-12 H5案例分享 H5案例分享

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

识别图中二维码

定制你最严选的家-查阅二维码

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

案例：定制你最严选的家

出品：网易严选

亮点：

策划上，横向长图类+DIY图片合成。加载完成后，进入一张长图，随着页面的滑动，人物向右行走，为用户展示了网易严选HOME的房屋设计。10平方米、25平方米...最后进入严选“DIY你的个性”模块，根据页面提示操作，切换壁纸、沙发、窗帘等，最终点击“确认生成”按钮，合成图片，可长按保存，页面右上角有“重新定制”按钮，引导用户返回上一步操作。
设计上，整体H5中动漫与实景结合，场景的设计由漫画转变为实际的物品，人物被设计为手绘漫画形象，给人视觉上的享受；DIY图片定制部分，点击物品切换的特效，设计上很新颖。
交互上，左右滑动屏幕+点击。
体验上，这个H5的画面多选用浅色，整个场景简洁大方，运用了很多动画效果，很棒；DIY图片定制部分是一个亮点，点击切换效果（小五想起了童话故事里的魔法棒，哈哈，脑洞太大，想多了）。

技术实现： Canvas+zepto

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

标签