昆明UI培训
达内昆明五一路

18487146383

热门课程

体重曲线应该如何设计?

  • 时间:2016-10-11
  • 发布:昆明UI培训
  • 来源:优设网

曲线是个有故事的组件,咱们来好好聊聊。

1、横坐标:按次数vs按自然日期

用户记录体重,不像股票和天气,不一定每天都有数据的。横坐标虽然都是用来显示日期,但是有两种截然不同的日期:

按照用户记录的次数,哪一天记录了就有一个点,没记录就没有,横坐标上的日期不是连续的。

按照自然日期,不管用户记录了没有,横坐标上的日期是连续的。

1.2优劣比较

按次数的好处是:1、好看,每个点的间隔是均匀的,不会太密或太疏。2、开发难度较低。缺点是:不能反映体重变化的真实趋势。两个点之间可能相差一天,也可能相差一个月、一年。

按自然日期的好处是:能真实反映体重变化的趋势。缺点是:开发难度高。

1.3开发难度高?

按自然日期为什么会开发难度高呢?达内昆明UI培训举几个栗子:

栗子一:跨屏幕的连线

曲线上的点与点之间是要连起来的,很简单是吗?但是考虑到跨屏幕(翻页)的时候,情况就变得复杂了。当前屏幕最左边的那个点,它的前一个点在哪里呢?先查上一周,没有。再查上上周,又没有。再查上上上周……啊,终于找到了,两个点寻寻觅觅,终于把红线牵起来啦!

栗子二:周期的切换(周/月/年)

每个用户记录体重的频率是不一样的,有人每天记,有人每周记,有人每月才记一两次,所以你觉得合适的周期,对于别人来说,就会显得点太密了,或者太疏了,没法用一个固定的周期来满足所有人,于是得有个周期的选择,在周、月、年之间切换。

或者,你可以向更高难度挑战,用手势来动态调节:两根手指向内捏,点就密一些。两根手指向外捏,点就疏松一些。

栗子三:取样

一个屏幕显示多少个点比较合适呢?5~7个点看起来是最舒服的。当你用比较大的周期,比如月和年,那一个屏幕里显示的点可能会非常密(可能会高达365个点),先不说难不难看吧,也不说加载速度慢不慢吧,在性能不好的机器上,可能马上就崩溃了。

所以需要后端帮你取样,一年的数据,每个月取个平均值,只返回12个数据。

1.4结论

看了这三个栗子,你明白了吧?如果是按次数的话,这些问题都不复存在了。很多看上去很美好的事情,并不是那么简单的。

按次数,就像一个不太聪明但很细心的学生,最多能考80分,但他会的题就不会丢分,最终考了80分。按自然日期,就像一个很聪明但不细心的学生,全都会,理论上能考100分,但这里错一些,那里错一些,最终只考了70分。

如果你对开发团队的能力不是很有信心,或者他们能力虽强,但没法投入大量精力,持续的改进这个功能,达内昆明UI培训劝你还是选择「按次数」的形式吧。

2、纵坐标:静态分布vs动态分布

除了横坐标的这个大坑,跳进去就很难挑出来了,纵坐标也有个小坑。

纵坐标的数据分布有两种形式:

静态分布。固定的,每个人都一样的,都采用同样的最大值和最小值,比如从0到150公斤。

动态分布。不是固定的,根据当前屏幕内数据的最大值和最小值,稍微再扩大一点点范围(最好是整数,去掉零头),比如从50到60公斤。

说起曲线,技术含量最高的曲线就是股市的k线图了。股市类App的曲线,在横向滑动的时候,纵坐标都会动态的改变。

很显然,当然是动态分布的效果好啦,否则你的体重数据就是在一个很窄的区间里小幅的波动,完全看不出趋势。

程序员也许会为了快,赶进度,怎么简单怎么来。但你得清楚,自己要做动态分布的,即便这个版本实在来不及了,先做静态分布的,下个版本也要改过来的。

3、横屏vs竖屏

曲线是用横屏来展示好呢,还是竖屏好呢?首先,要看这个页面有没有其他元素,有的话只能用竖屏的了。

在没有其他因素干扰的情况下,只展示体重曲线,那用横屏还是竖屏好呢?达内昆明UI培训的观点是:最好是:先看竖屏,支持横屏;其次是:只有横屏,不能竖屏;最差的是:只有竖屏,不能横屏。

上一篇:体重数据如何更好展示?
下一篇:为什么UI设计师需要追根究底?

如何在UI设计中更好地运用颜色?

2017年1月网页流行设计趋势

UX设计中颜色微调的五个技巧

如何根据字体重心来设计字体?

选择城市和中心
贵州省

广西省

海南省