微信：实验项目-手机APP屏幕时间数据
案例演示，请长按/扫描以下二维码 ->
识别图中二维码
完整欣赏此案例大约需要2分钟
案例：实验项目-手机APP屏幕时间数据
品牌：微信
技术实现： html5
亮点：
- 创意定位
微信推出的查看用户在每个APP上花了多少时间的H5作品，以此对自己使用手机APP的情况做一个总结和了解。
- 策划逻辑
进入作品后，每个APP标志都在一个小泡泡中，用户可滑动屏幕随意改变泡泡位置，点击小泡泡后，进入时间显示页面，页面上侧是软件泡泡，中间是APP使用时长，一个横线代表时间，软件会在符合时间长短的位置下陷并显示具体数字，用户在此界面可更换APP的名字，也可点击屏幕下侧其他APP标志查看使用时长，或点击上侧空白处返回后，继续点击其他泡泡。
- 设计上
黑色的背景上是大小不一的泡泡，不是静止不动的，就像真的泡泡那样互相挤在一起，还有因碰撞产生略微的弹动，下沉和变形，看起来很有趣不呆板。
- 交互上
用户可滑动屏幕改变泡泡位置，所有泡泡都会因一个泡泡的挪动而产生稍微的弹动，但每个APP的泡泡大小不会随着位置产生改变，在详情页面，用户可改变APP名字，点击直接查看其他APP使用时长，也可返回泡泡界面随意选择。
以上为“H5案例分享”团队原创文章，转载请注明出处！
标签
关注微信号：h5-share，获取更多创意H5案例分享！也可访问H5案例分享网站www.h5anli.com，搜索查阅~
微信扫一扫
关注该公众号
京公网安备 11010802030403号
