Sleep App 临摹

临摹了一个sleep app的界面,原作品链接点这里,作者dribbble主页点这里。作者也是基于iOS8 Health App 的灵感来的。还是先上图,左边是原作品,右边是临摹。

界面很干净,看起来很舒服,但是可能有点难懂吧。我想了一下下才知道他的29m是从may5到june2的29天。应该说的是这29天的睡眠时间统计,同时这29天的平均睡眠时间是7h。中间的虚线我觉得应该加在7h上,这里好像在5h左右。所以这个界面要是真正用起来还是有点难的,它和用户沟通不是特别好。我这样觉得的。但是我还是依照这个风格模拟了另外三个虚拟界面,内容不一定科学,就是学一下原作者的设计吧。

左上图就是上面的那个临摹的。左下图是将柱状图画成了曲线,对最高点和最低点进行了标注。右上图是对睡眠质量进行评估,当然数据和内容都是虚拟的。采用圆形进度条的样式,并且给一个黄绿蓝的渐变。偏黄色和月亮logo对应,蓝色是主色。右下是睡眠前的状态对睡眠影响的统计。比如在这29天中,统计所有睡眠前做了运动的夜晚,其平均睡眠时间为8h,以此类推。用四个logo代表运动,工作,放松和吃饭。

2015-05-15 14:0974