腾讯新闻：算算你的2016呼吸账单

2017-05-12 H5案例分享 H5案例分享

案例：算算你的2016呼吸账单

出品：腾讯新闻

亮点：

策划上，数据计算类案例。加载完成后进入案例，提出问题雾霾让你花了多少钱，点击开始计算进入计算页面。计算账单页面，案例左上角可选择所在城市，也可由地理定位确定你的地址，计算内容总共分为5部分：口罩、防霾绿植、空气净化器、防霾家居、其他花费。每一个选项内，都有相应的内容可以选择，当你每选择一项后就会有相应的物品出现在画面内。最后点击计算账单算出你2016年雾霾花费清单。
设计上，矢量扁平风格。案例整体颜色采用的都是灰色调颜色，首页背景采用黑灰色调，描述被雾霾所污染的城市，随后进入计算页面，颜色则换成暗蓝色背景。
体验上，计算类案例分类选项设计十分合理，操作舒适。不过话说去年小编除了一个口罩好像什么都没买- -

技术实现： Zepto

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

识别图中二维码

算算你的2016呼吸账单-查阅二维码

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

标签