Data visualization - 郑越升

IOS 12 Screen Time 数据可视化 – 实验项目

By 2019年6月9日 No Comments

IOS 12 系统有一个新特性 —— Screen Time(屏幕时间),可以记录平时App占用手机屏幕时间的数据。

这是一个很有趣的统计数据,我尝试将我的Iphone的Screen Time数据记录下来,给它做一个可视化实验,看看我手机里的App,是如何“争宠”占取屏幕时间这一资源的。

随着实验的进行,我发现不同人群的Screen Time 数据截然不同。加班族占据屏幕时间比例最多的,是钉钉、微信等通讯应用;听歌狂魔的屏幕时间可能会同时被网易云音乐、虾米音乐和QQ音乐瓜分;设计师则可能会出现站酷、Behance等设计应用;而刚刚学着使用智能手机的父母辈老人,屏幕时间则可能只有和儿女沟通的微信一家独大。

小小数据,却能从中读出不同个体的日常喜好和习惯,人格数据化藏匿于我们和手机交互的每一个瞬间。

Design : Cinema4D, After Effects, Houdini, Octane Renderer
Develop : Processing, Three.js
Time : June 01, 2019

在项目一开始的时候,我尝试用K-D Tree网格分割的方式,来可视化屏幕时间数据。
于是我利用Processing,用K-D Tree 算法处理屏幕时间数据。上图是在不同 K-D Tree 结构下,生成出不同的数据布局。

根据输入的屏幕时间数据,KT TREE结构会随着时间发生动态变化,从而生成平面二维的可视化效果。

将Processing中生成的数据,导入Houdini中,用于模拟球体在手机空间里的大小、位置和挤压效果。

根据输入的屏幕时间数据,不同App的大小会发生动态变化,相互挤压,呈现出争宠屏幕时间的可视化效果。

针对不同职业人群,屏幕时间可视化结果截然不同(数据仅供参考)。

在H5里,用户可以自由拖拽任意柔体球(APP)进行碰撞互动。

交互方面,我借鉴IOS原生系统里卸载APP的做法。当用户长按某个柔体球达到1.5s的时候,就会进入“卸载模式”。卸载模式里柔体球会像原生系统的APP一样颤动,用户可以点击左上角的删除按钮对它进行移除。

单击某个柔体球,可以对其进行编辑修改。

同样是借鉴原生系统的“辅助触控”功能,我把一些功能入口的按钮收纳在这个H5的“辅助触控”里,使界面保持干净,关注点不被分散。

对于H5里细节方面,例如“项目简介”,我抛弃运动函数,而使用真实的物理运动模拟,让运动增加了真实的阻力和惯性,并且用户可以随意拖动旋转它。

扫码体验H5!

Leave a Reply