凤凰网:凤凰网“美丽童行”

2019-11-18 H5案例分享 H5案例分享
凤凰网:凤凰网“美丽童行”


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

识别图中二维码

凤凰网“美丽童行”-查阅二维码

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


案例:凤凰网“美丽童行”

品牌:凤凰网

技术实现: jQuery+Vue.js

亮点:

1.创意定位

凤凰网为【2019年“美丽童行”公益盛典】创作的线上创意H5作品,通过三个场景卡通动画故事,呼吁大家在面对网络或者身边的任何人或事的时候,可以分享一些善意,传递一些温暖。

 

2.策划逻辑

① Loading部分即已露出主题——“社会的温度来源于你的态度”;

 

② 加载完毕后,进入仿资讯类App产品界面,有三条社交网友发的信息,每一条都对应一个卡通动画故事;

 

③ 在点击引导下,点击三条中任何一条内容,进入“事实真相”的场景故事,通过用户的交互选择,让用户了解面对这种情况时,如何用自己的行动,传递善意和温暖,一起为下一代构建更健康、更温暖的社会环境。

 

故事一:看到陌生人的痛苦和难处时,一声温暖的关怀,也许就能拯救一条脆弱的生命。

 

故事二:看到网络世界里面消极有害的言论时,随手举报有害信息,一起守护健康网络环境。

 

故事三:每个人都应为自己的言论负责,不去随意传播未经证实的消息。

 

 

④ 交互故事后,有一屏过渡文案,最后生成一张“社会的温度来源于你的态度”的主题海报,包含用户是第多少位“为社会增温的人”、呼吁大家一同传递善的力量的文字光束、品牌Logo及Slogan,和回流二维码。

 

3.视觉及交互

仿资讯类APP产品画面+卡通漫画故事。整体交互引导明确,让人在点选的过程中,了解在面对网络信息时,一个微小的善举,或许就能改变别人的命运,不轻信,不谣传,分享善意,传递温暖,最后生成“正能量”的海报,可以长按保存。

 

4.体验上

创意视角比较独特,看到的并不一定就是事实。通过三种情况的描述,让用户亲身参与其中,交互选择,“小反转”从而激发大家思考和行动,一条评论,一句对白,一个动作,一个小小的善举,都可以给社会增温,为世间带来美好。





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

标签

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

相关推荐:

凤凰网X东风日产:致敬每一个追寻初心的你

凤凰网:一条将发生在6月1日的新闻

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

阅读原文

微信扫一扫
关注该公众号

收藏

微信极速登录/注册

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

微信公众号

提交案例

请pc端输入网址

"h5anli.com"

下载截图压缩包~

标签已提交成功

小编正在审核

请等待一下下啦

哎呀

标签已存在

换个新的呗~