阿里巴巴公益:寻找远方的美好

2023-08-05 H5案例分享 H5案例分享
阿里巴巴公益:寻找远方的美好


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

识别图中二维码

寻找远方的美好-查阅二维码

完整欣赏此案例大约需要3分30秒


案例:寻找远方的美好

品牌:阿里巴巴公益

技术实现: Zepto + threejs + TweenMax

亮点:

1、创意定位

阿里巴巴的公益项目,项目叫做“寻找远方的美好”,是由一群淘宝设计师发起,协同阿里巴巴乡村振兴基金,为县域做整合设计,用设计力量助力乡村发展。 这支H5作为这个项目的一部分,进行呈现。

 

2、策划上

案例分3部分:发起人介绍、4个县域介绍、标记我的家乡。

 

① 首次进入案例后,需要输入名字,不超过6个字符,第二次进入就不需要输入了,此处输入的名字,会在生成家乡海报中使用;

② 皮质的手帐封皮,有项目名字“寻找远方的美好”,点击页面左下角的“点击看看”,会有发起人介绍,点击手帐右侧的翻开看看,进入4个县域介绍。

③ 4个县域介绍,分别是湖南永顺、河北巨鹿、陕西佛坪、江西寻乌。点击4个县域中任何一个,会有2-3页的地域特色介绍,有文化、食物、民俗、非物质文化遗产等不同的方面介绍;点击手帐右侧的设计实践、会有弹出层形式的该县域设计实践介绍,想看更多,会引导进入“寻找远方的美好”微信公众号看更多文章。

④ 在县域浏览过程和4个县域浏览完毕后,都会引导进入标记我的家乡,用户选择省、市、区县,3个推荐的家乡风物(选择代表家乡风物的图标),最后生成家乡海报。

 

3、设计上

手帐的形式,像是在浏览一位设计师的手帐,翻看他/她走访的地方,用水粉绘制地方特色,并用手写文字记录他的行程和见闻。手帐皮质的封皮,牛皮纸的内页,手绘的水粉图案,手写的字迹;配合手帐形势的图标记录家乡特色。

 

手帐因为是手写形式,有评论说看不清字,但是小五觉得这样的设计无可避免,要追求整体设计形式完整,就很有可能排版中,无法将字号过大。

 

4、互动上

手帐内页浏览中,每个县域开始都有不同手势互动,湖南永顺应用3D旋转观察面具细节;河北巨鹿点击挖掘文化,点击一下沙土逐渐变少,有挖掘的感受;陕西佛坪拖动食物喂熊猫;江西寻乌跟着轨迹寻找落水果。





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

标签

分享:
海报
案列链接
下载截图
收藏案例
已收藏
分享到微信朋友圈
打开微信,点击底部的“发现”,
使用“扫一扫”即可将网页分享至朋友圈。

相关推荐:

挚听 × FOCONG | 复聪:不一样的声音

国家反诈中心X阿里安全X阿里巴巴公益X湖南卫视X芒果TV:谁在说谎

关注微信号:h5-share,获取更多创意H5案例分享!也可访问H5案例分享网站www.h5anli.com,搜索查阅~

阅读原文

微信扫一扫
关注该公众号

收藏

微信极速登录/注册

对汉语支持不错,别对小五说英文

微信公众号

提交案例

请pc端输入网址

"h5anli.com"

下载截图压缩包~

标签已提交成功

小编正在审核

请等待一下下啦

哎呀

标签已存在

换个新的呗~