支付宝：2020年账单

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

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

识别图中二维码

2020年账单-查阅二维码

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

案例：2020年账单

品牌：支付宝

技术实现： JavaScript

亮点：

1、创意定位

支付宝2020查账单H5，用户可以查看自己在2020年的花费情况。

2、策划上

① 首屏点击查看你的2020，有小手提示，点击后，需要开启前验证身份，获取查看用户2020年消费情况授权，这点很重要！而后就是1-12月份每个月用户在美食、穿搭、住房、出行、日用、教育、娱乐、运动，8方面的消费情况，用户横向滑动观看；

② 观看了12个月份的消费情况后，给出2020年我的年度词，屏幕下方，可以点击“查看2020年支付宝总收入”按钮，进入2020年年度消费情况支出和收到总额情况，有个细节用户可以点击数字右侧的眼睛隐藏数字。

3、设计上

插画配合橘色的暖色调，每个月份的插画还配有局部动画，整体画面显得细腻。

4、体验上

注重了用户信息的保密，需要用户授权才可以访问用户数据；在每月中添加了教育消费显示，感觉很好，可以查看自身或家人学习情况，什么时候，都不要忘记自身价值的提升。

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

标签