阿里巴巴公益基金会：《旅行青蛙》公益之旅

2018-06-10 H5案例分享 H5案例分享

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

识别图中二维码

《旅行青蛙》公益之旅-查阅二维码

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

案例：《旅行青蛙》公益之旅

出品：阿里巴巴公益基金会

亮点：

策划上，以《旅行青蛙》为主题的公益H5。首先是旅行青蛙庭院的信箱，点击信封，弹出一封信，是写给蛙蛙，讲述一起去寻找珍稀动物，点击“这就出发”，进入旅行青蛙的小屋，主视觉是摆满菜肴的桌子，点击背包，选择物品，而后点击“出发吧”。再次进入庭院，有三个方向，点击上面的箭头，有3种场景随机出现，对应12种珍稀动物；点击左侧箭头固定1种场景，对应12种珍稀动物；点击右下角箭头，有4种场景随机出现，对应24种珍稀动物。无论选择哪个方向，根据3次引导，点击找到珍稀动物，点击小动物，有小动物的分布地域和保护级别。点击“拍个照吧”生成对应动物的海报照片，可以保存分享，也可以选择“去找其他小伙伴”，返回庭院界面，重新选择方向，查找其他珍稀动物。
设计上，手绘风格的界面，主色调绿色，和《旅行青蛙》游戏的界面一样。
体验上，引导很明确，很容易根据提示，查看各个珍稀动物。生成的“美丽中国，我是行动者”的海报照片很漂亮，乐意分享。海报下面的品牌宣传，也得到了传播。整体公益海报，大家乐意积极参加。

技术实现： jQuery

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

标签