腾讯新闻：她的一生，不止是她自己的一生

2022-03-12 H5案例分享 H5案例分享

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

识别图中二维码

她的一生，不止是她自己的一生-查阅二维码

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

案例：她的一生，不止是她自己的一生

品牌：腾讯新闻

技术实现： JavaScript

亮点：

1、创意定位

腾讯新闻在妇女节推出的H5，模拟不同女性的人生轨迹。

2、策划上

① 点击首屏中的“立即体验”按钮，而后进入你会是一个怎样的女生选择页面，开局给出了30点，一共6个维度，其中5个维度可以选择（才华、体能、魅力、财富、人缘），1个维度默认（运气）；在可以选择的维度，最多选择10点；点击“新的人生”按钮；

② 进入人生轨迹页面，点击“自动人生”按钮，从0岁开始自动播放人生轨迹；点击“下一岁”按钮，一步步展示每一岁，中间会有人生成就弹出层提示；

③ 随着人生的年龄增长，才华、体能、魅力、财富、人缘的数值会有变化；

④ 点击“我这一辈子”按钮，最多选择5个人生瞬间，生成她的一生海报。

3、设计上

深色调大背景，白色调前景色，整体设计像书，感觉每个人的一生像本书；辅助色使用了紫色和粉色。

4、交互上

①开局给出了30点，不同的选择，人生轨迹也不同；用户乐于重复体验案例。

② 人生轨迹页面中有两种观看人生的方式，一种是自动人生，自动播放人生，另一种是手动点击“下一步”一步步观看。

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

标签