2020年终于来了
在2019年的最后一周里
各大品牌推出了自己的年终刷屏H5
其中最受瞩目当然是网易云音乐的年度报告
各个微信群里都有相关的图片刷屏
当然大家也可以自行体验下
看看自己的年度音乐是什么
据说某位大佬的年度音乐是南无阿弥陀佛
酷狗音乐也推出了一个好玩的音乐测试类H5
整体的设计感非常酷炫
接近了网易昔日的设计水平
有兴趣的童鞋也可以扫码体验
另外腾讯则是连出了三款H5
分别是腾讯新闻和腾讯医典
风格则是涵盖了测试类、总结类、DIY类三种
每款都有着自己的特点

网易云音乐:年度听歌报告

创意分析:
网易云音乐每年都会推出一个年度听歌报告
本案例则是2019年度的年度听歌报告
用户登录后即可查看自己的年度总结
而且还可以参与网易云音乐黑胶VIP的挑战

术分析:
技术分析:
因为是年度总结类的H5
因此本案例没有太多交互
进入活动主页面即可查看自己的云音乐的报告
报告内容比较多
包括用户初次登录的时间,年度听歌时长和数量,最爱的听歌时间等基础参数
还有最爱的歌手,和听歌前十榜单,最小众珍藏,最爱电台等个性化的内容
最后会出现网易云音乐送给用户的新年寄语

视觉分析:
设计上色调比较简单
而且网易云音乐的设计风格一向走的是文艺风
这次也是延续相同的设计风格
每一页会呈现出一个数据
整体页面会比较多
但因为内容比较有趣
也会吸引用户坚持看下去
腾讯新闻:画出2020年运势

创意分析:
这是腾讯新闻推出的新年祝福H5
通过交互式场景来表达对2020年的美好祝福
用户可以通过H5来画个圆圈
每个圆圈都代表一个新年祝福

技术分析:
进入本案例后,会进入到绘画场景
需要根据提示沿着红点周围的红线画个圈
画完之后可以提交圆圈
随后会生成结果页海报
海报里包括用户名、新年运势词、新年好事
新年运势词、新年好事是随机出现生成的
如果不满意可以重新生成

视觉分析:
设计上比较简单,主色调以粉色为主
其他元素则以红色线条突出内容
简单明了并且更突出H5主题
酷狗音乐:你的甜度测试

创意分析:
这是酷狗音乐推出的测试类H5
主题以音乐歌单为主
测试自己的生活甜度
并根据测试的甜度结果推荐不同的歌单
由此让用户体验酷狗音乐的歌曲推荐功能
增强用户对于酷狗音乐的品牌感知

技术分析:
本案例作为测试类H5
主题以甜蜜生活为主
用户可以根据题目给到的问题选择自己合适的答案
比如最想看的电影是什么
被哪句情话撩动心房
日常的快乐源泉是什么
问题一共包括六道题
完成后可以给酷狗的吉祥物画一双眼睛
最后输入姓名和性别即可生成海报
用户可以分享海报到朋友圈

视觉分析:
设计上非常有甜蜜的温馨感觉
整体色调以粉色为主
极大烘托了甜蜜的氛围
并且整个案例都是长图形式展现
用户可以自己滑动选择答案
腾讯新闻:2019断舍离

创意分析:
这是腾讯新闻做的年终测试H5
主要是邀请用户对2019年做个断舍离
可以从房间里面挑选自己不要想的东西
选择留下自己最喜欢的东西
最后会根据留下的物品生成一个性格海报

技术分析:
本案例分为男生版和女生版
男生版的物品主要是男孩子喜欢的东西
包括运动鞋、机械键盘、无线充电器、风衣等等
而女孩房间大多则是加湿器、汉服、玩偶、护肤品等等
完全模拟出现在男女生的房间类型
进入活动后用户需要从杂乱的房间中选择物品进行断舍离
房间最多允许留下15个物品
当全部清理完成后会生成用户的性格海报
海报上有物品百分比和用户性格描述

视觉分析:
设计上以卡通绘画为主
而且为了增强趣味性
在音效上做了不少功夫
例如扔东西的时候会有打包扔垃圾的声音
扔到一些物品时候会有其他房间效果
非常好玩有意思
腾讯医典:有人晕倒,心跳呼吸停止,快救救他!

创意分析:
这是腾讯医典为了推广自己做的品牌H5
主要是普及急救知识为主题
将一些常见的急救场景展现在用户面前
用户需要选择正确的急救方式
在场景交互中让用户了解急救的步骤和相关要点
最后推广腾讯医典这个平台
提示用户登录平台可以了解更多日常医学急救常识和技能

技术分析:
技术分析:
本案例属于场景交互式的H5
在每个急救场景前会有一段和医生的对话
医生会告知急救的要点和误区
随后让用户模拟实际的急救内容
用户需要完成正确的急救步骤
包括选择正确的胸外压的位置和深度
以及做胸外压的频率是什么样
人工呼吸需要注意那些问题等
当全部完成后会生成一个结果海报
海报会展示急救的成绩单
全部正确完成还会获得一个急救金牌奖章

视觉分析:
设计上以医院常见的蓝色系为主
并且通过卡通化的元素展示
对急救每个知识点进行重点阐述
并通过实际急救来加深印象
01
福利时刻
热门推荐阅读:
现在登录注册人人秀官网
即可免费领取10000个精品H5模板!
猛戳阅读原文即刻制作
网址:www.rrx.cn

猛戳下图定制刷屏H5

猛戳下图浏览更多创意H5案例
更多创意H5解析
请关注H5创意汇
每周为你解析最热门H5案例

点击阅读原文,即刻制作!㊋㊋



