课程咨询 :186 8716 1620      qq:2066486918

昆明UI培训

昆明UI培训 > 达内新闻 > 体重曲线应该如何设计?
  • 体重曲线应该如何设计?

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

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

    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设计师需要追根究底?

最新开班日期  |  更多

UID培训免费训练营

UID培训免费训练营

开班日期:01/20

UID培训全日制班

UID培训全日制班

开班日期:01/20

UID培训周末班

UID培训周末班

开班日期:01/20

UID培训高级进阶UED培训

UID培训高级进阶UED培训

开班日期:01/20

  • 网址:http://km.ui.tedu.cn      地址:昆明市五华区五一路如安街如安三号二楼
  • 课程培训电话:186 8716 1620      qq:2066486918    全国服务监督电话:400-827-0010
  • 服务邮箱 ts@tedu.cn
  • 2001-2016 达内时代科技集团有限公司 版权所有 京ICP证8000853号-56