新浪微博：2020我的微博播报

2021-01-06 H5案例分享 H5案例分享

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

识别图中二维码

2020我的微博播报-查阅二维码

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

案例：2020我的微博播报

品牌：新浪微博

技术实现： svg + JavaScript

亮点：

1、创意定位

新浪微博年终个人总结H5，总结2020年在新浪微博的历程。

2、策划上

① 进入H5，在微博里面，直接点击“进入微博世界”按钮，进入数据展示页面；如果在微信里，需要输入微博的账号，才可以进入数据展示页面；

② 数据展示页面中，展示用户个人微博的总阅读量、发布的微博数、转评赞数、最热微博、经常和你互动的人、发微博最多的那天等，浏览完毕后，生成年度关键词海报；

③ 这个年度关键词海报，默认推荐一个词，如果不满意，还可以点击屏幕左下方的“换个词”按钮，换个年度关键词；如果在微博里，点击屏幕右下角的“分享我的播报”直接生成图片进行分享，微博里方便极了。

3、设计上

偏真实的卡通景物，配合一个可爱的卡通形象，卡通形象的头发很像新浪的logo形状。

4、技术上

案例中的动画，使用的SVG实现，动画丝滑流畅，整体文件偏小，性能更好。

5、体验上

生成的关键词还会和性别相关，系统推荐关键词时，也获取了性别，例如：如果是男性，推荐的关键词是凡尔赛王子，如果是女性，推荐的关键词是凡尔赛公主。

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

标签