年终数据报告H5| 这样做年终总结才不仅有趣,还能霸屏!!

用户头像
广州/新媒体设计师/8年前/3982浏览
年终数据报告H5| 这样做年终总结才不仅有趣,还能霸屏!!

H5页面设计

相信大家这两天的朋友圈已经被

年度支付宝账单

年度听歌报告

年度关键词

……

给霸屏


年度数据报告总结,也是各行业年末一项隆重的工作,年终盘点不仅是对自己品牌的总结,也是给用户的一份数据报告。接下来这13个案例告诉你,如何用H5把年度总结刷爆朋友圈


案例1:网易云音乐陪你温暖同行

图文展示类

品牌主:网易云音乐

扫描二维码

进入浏览器查看体验


亮点:案例为网易云音乐用户专属年度听歌总结,用多种形式展示了我们的音乐记录,用户可以直接点开并“点击查看”来查自己的年度听歌总结。通过用户在网易云音乐的听歌行为,来展示用户的听歌数据,像2017年听的歌单、听歌时间、听到最多的歌词、音乐品味还有年度歌手等,再经过网易云音乐的文字加工描述,全面客观又不失文艺感性。而这所有数据都是你这一年在网易云音乐里的听歌行为,使得用户产生共鸣,引发传播。



案例2:2017支付宝年帐单

展示类

品牌主:支付宝

微信端请复制下面内容

进入支付宝,就可以查看2017年账单了


亮点:案例展示了用户2017年在支付宝的消费记录,漫画效果,通过数据展示用户喜欢购买物品的种类,经常在哪家点餐,多少支付宝线下支付记录,,获得过多少次奖励金,信用记录,贡献了多少爱心,参加了多少公益项目等等,及全年总消费金额,还有本地区排名。最后还会给出一个年度关键词。



案例3:态度日历 每一天更有趣

一镜到底类

品牌主:网易

长按识别立即体验


亮点:横屏滑动体验H5,随着滑动,展示叙事的推进H5以一镜到底滑屏形式将历史上的人和事串联起来,配以长诗朗诵让用户身临其境,让古人穿越时空来见你。



案例4:来自2018年的账单

答题测试类

品牌主:唯品会

长按识别立即体验


亮点:进入案例,插画风格,输入年龄和性别,点击继续。不同选择则出现题项不同,分为男版女版,最后生成你的2018消费预算以及成就和不同的标签,每个都很有趣。



案例5:UC头条年终策划

长页图类

品牌主:UC

长按识别立即体验


亮点:用一张长图纪录2017发生的一些大事件,每一朵浪花都值得被记录,进入案例,左右滑动屏幕观看,以UC头条年终策划为主线,讲述2017年发生的一些国内国际重大事件,手绘卡通形式,利用了视觉差。最后展示slogan“每一朵浪花都值得被记录,它们最终汇成时代【潮】向”。引导用户分享,重看。



案例6:路过2017

长页图类

品牌主:腾讯新闻

长按识别立即体验


亮点:以一镜到底的视觉效果+长图滑动的交互形式,漫画风格,里面回顾了2017年的各种热门头条事件,从年初发生的事件开始。用户可通过上下滑动去进行欣赏画面,随着场景的变换,画面中还会出现对应的场景描述及配音,让人有很强的代入感。



案例7:给你不一样的娱乐圈的画传

一镜到底+图文展示类

品牌主:网易新闻

长按识别立即体验


亮点: 一镜到底+图文展示,采用长按屏幕的交互方式,结合一镜到底的视觉效果,来盘点2017年娱乐圈15个热点事件,用漫画的形式增添气氛,有很多你我都熟知的娱乐圈时间都在里边有体现,例如说尔康等,结尾页露出制作团队以及分工,点击跟帖可以跳转或下载网易新闻客户端,点击“再看一次”则会快速穿越回首屏。



案例8:我们是时代的宝贝

视频类

品牌主:淘宝

长按识别立即体验


亮点:用视频播放的形式,展现了今年淘宝所有的热卖物品,有指尖陀螺,持机二级,二胎神器,龟背竹等,与“年度盘点”的主题基调相配,但配合画面及内容,整体给人的感觉又非常魔性、洗脑,令人印象深刻。展示结束后引导观众进入淘宝链接。



案例9:请回答 2017

视频生成类

品牌主:哒哒

长按识别立即体验


亮点:进入案例,提示“选三个词,定制你的专属视频”,此时向上滑动屏幕会出现2017关键词,再进行滑动可以循环切换关键词,一共7个,需要选出3个来生成,生成专属的视频,只不过不是真的生成,而是由预设的若干视频中,根据选择来给出1个。画面在简洁的同时又很有设计感,交互时的动画效果细腻而又流畅,过渡很自然。关键词的设定也非常符合2017的流行元素。



案例10:2017互联网职场年度盘点

展示类

品牌主:拉勾网

长按识别立即体验


亮点:以2017年互联网大数据为基础,用图文形式展现了今年我国2017年互联网职场变化,采用与拉钩logo同一色系的绿色作为主色调,不同的颜色代表不同的数据,清晰直观,动画设计的也非常流畅自然。着重展现了几个大城市中互联网人的变化和个人情况。



案例11:给跪了,这一年

问答类

品牌主:腾讯新闻

长按识别立即体验


亮点:2017年已经接近尾声,请问你对自己这一年的评价如何。来看看这些热词,觉得哪些热词可以形容自己给跪了的2017,进入选择界面,可以选择或换一批,一次选择热词标签和句子就可以看到组成的句子了。选择完成后即可生成你的年度尬句。



案例12:2017不安分的年轻人关注报告

展示类

品牌主:红板报

长按识别立即体验


亮点:以报告形式列举了2017年9大话题。由新闻App Flipboard红板报联合TripAdvisor猫途鹰、有道翻译官、爱范儿、YOHO!BUY有货、Evernote印象笔记发布,基于Flipboard红板报的全球阅读大数据,追踪不安分年轻人的视野和他们的态度。最后,引导用户下载红板报APP和分享。



案例13:2017腾讯视频年度指数报告

图文展示类

品牌主:腾讯视频

长按识别立即体验


亮点:展示2017腾讯视频年度指数报告海报。回顾了2017这一年来腾讯视频创造的一些数据。从会员总量、观看时间、活跃度等方面进行了总结,并且从视频类型进行了年度盘点。每个篇幅都选用了不同颜色的背景色,色彩丰富,利用颜色渐变实现3D效果。类似PPT比较单调,但也符合报告的风格。

20
阅读原文
|
举报
|
37
分享
评论
用户头像
评论你的想法~
表情
喜欢TA的作品吗?喜欢就快来夸夸TA吧!
推荐素材
中国传统纹样创新图案设计
城市园林平面布局航拍
空的平台平面和自然景观
海底世界插画
金色颗粒质地的平面
空的平台平面和自然景观
平面人物插画
平面男孩喝咖啡插画设计
原创UIUX交互橙红渐变炫酷视觉平面设计作品集模板PSD
城市园林平面布局航拍
平面风格黄绿色系花朵装饰
金色颗粒质地的平面
平面插画情侣/矢量
玄关入门地毯印花图案红地毯
牛奶乳液层次平面平铺平面
“知识宅急送”外卖,快递,平面,海报,素材,教育
平面插画设计女孩喝咖啡
城市园林平面布局航拍
城市园林平面布局航拍
城阙凡花
平面花卉图案扁平简约无缝拼接插画
金色颗粒质地的平面
金色颗粒质地的平面
倒计时,海报,平面
平面书法字手写
你可能喜欢
大家都在看
登录注册