allhealth-1.png

项目背景 BACKGROUND


关于ALLHealth

ALLHealth是一款智能健康设备管理应用,主要用于连接品牌在亚马逊售卖的体脂秤、血氧仪等医疗器械设备,监测用户的健康情况。app在此时是开发完成初始版本并已经上线使用。

需求和目标

  1. 原来的数据详情页面不太理想,特别是数据曲线,需要进行优化;
  2. 原来的数据卡片颜色单一,现在需要增加20多个新数据,希望可以优化一下颜色显示,颜色更加丰富;
  3. 首页的数据卡片需要新增数据说明,需求是要凸显出各个数据的个性化。

我的角色

交互设计,界面视觉设计

解决方案 SOLUTION


本次优化的主要针对数据展示部分的视觉和微交互,该部分是整个App中比较重要核心的功能,但是目前开发出来的效果公司负责人和销售部门都不太满意,同时有新增的内容,因此需要我在以下3个方面进行优化和新增。

1. 优化单个数据展示与交互

通过实际的体验和用户反馈收集,这部分的问题比较多,主要集中在:

  1. 当一段时间内数据变化不大时,数据曲线会很平缓;
  2. 数据纵轴(数据数值)切分不太合理,需要结合具体情况确定切分单位;
  3. 数据横轴(时间)需要重新设计,目前如果时间跨度大,需要横向拖动才能查看;
  4. 目前的数据曲线是折线图,不太好看。
  5. 无法对任意单日数据、历史数据进行详细查看;
  6. 在单个数据曲线页面无法切换查看其他数据;

重新设计数据曲线图与时间选择的关联显示逻辑

这部分的难点在于需要兼顾超过20个类型的数据,同时需要适应不同的时间区间,无论用户选择的时间区间是1天还是100天,都能够显示图表中的有效测量数据,并且有较明显的高低起伏。

allhealth1-solution1.png

allhealth1-solution7.png

新版本的设计中,对曲线的显示逻辑做了新的交互规则:

  1. 图表简化为4条横线,曲线固定只显示在中部两条横线内区域,该区域所代表的数值区间是动态变化的;
  2. 两条横线的区间,取决于用户选择的该时间段内体重最大值和最小值。上面横线代表最大值,下面横线代表最小值;
  3. 曲线上会默认显示该时间区域内的最大值、最小值、第一次测量值和最后一次测量值;
  4. 图表中,只显示所选时间段内有体重记录的时间点,并平均分;
  5. 当一段区间内时间点超过8个时,那么就只显示最高点和最低点,其他的需要用户手动横向滑动或者点击时出现;
  6. 横轴的日期最多显示2个,显示的日期为:所选时间区间内,第一个有记录日的日期和最后一个有记录日的日期,与数据记录点相对应。
  7. 如果一天测量多次,那么这里趋势图的数据就取一天中最后一次测量的结果。

以上方案完美地解决了数据、时间区间不确定的问题,同时也针对不同的极端情况提供了交互方案,顺利通过了开发团队和产品经理的评审。

优化曲线图样式并增加点击

原来的曲线图样式比较小气,且折线看起来有点生硬;各个数据点击没有效果,不易查看某个具体的测量点数据。新的设计中,优化了数据曲线及区域、数据点的样式,突出了时间选择模块;同时增加了曲线的点击效果,点击后会在曲线上方显示该数据点的详细信息。同时手指在曲线图上左右滑动时,也可切换显示不同的数据点。

allhealth1-solution2.png

增加单次测量详情和历史数据列表

原来的设计中无法查看单次测量的详情,也无法查看历史数据。新设计中增加了历史测量记录和单次测量详情。具体的路径有两个:

  1. 在曲线图中点击某个数据点——>进入该数据的历史列表页面——>点击某一次测量,进入该次测量的详情页面;
  2. 在曲线图页面中点击“历史记录”图标——>进入该用户的历史测量列表页面——>点击某一次测量,进入该次测量的详情页面;

allhealth1-solution3.png

2. 优化数据卡片颜色及样式

当前首页数据卡片的颜色方案比较简单,一种是常规的蓝色,一种是非常规时显示的红色。但是业务上需要增加20多种数据,如果仍使用原来的颜色方案就会特别单调。此外,原本的数据卡片中,图表为折线图,且交互逻辑不明晰。因此这部分优化需要颜色和样式2个方向来。

建立数据色彩方案

由于数据是App的核心信息,因此我针对不同类型的数据,匹配了不同的颜色,一来方便归类,而来视觉上也更丰富。正常和异常状态直接使用不同颜色的文字表示。

allhealth1-solution4.png

卡片曲线图优化

这里的曲线逻辑沿用数据曲线页面的逻辑,即设定纵向的固定区间,区间具体数值动态变化。横向则固定显示最近7次测量点,无论实际的时间跨度有多大。设计方案中也针对各极端情况做了设计和说明。

此外曲线样式也改为柔和顶点,下方增加渐变填充。

allhealth1-solution5.png

3. 新增数据说明

这是一项新的功能,针对部分重要的数据,需要增加数据说明。

在交互上,我在每个卡片右上角增加了图标提示,点击后即可弹出说明弹层,使用弹层的目的是不希望这个功能太重。视觉上,结合数据色彩方案,针对每个数据设计了不同主题的简约插画,丰富弹层视觉感受。

allhealth1-solution6.png

项目总结 SUMMARY

挑战 Challenge

这次的需求设计中,比较有挑战性的是数据曲线图的展示于交互,一方面,公司运营和销售反馈的意见比较笼统,所以我花了一些时间体验和细化需求;另一方面,图表的展示逻辑部分思考设计的时间比较长,反反复复设计和推翻了好几版的方案。不过好在最后这个动态变换的方案,得到了开发团队、产品、运营方面的一致认可。

亮点 Highlights

  1. 设计方案得到一致好评:针对这3个需求的解决方案,最终都得到了公司各部门的好评,特别是曲线展示逻辑的设计,以及数据说明的视觉设计;
  2. 工作高效:整个需求给出的是2周时间,虽然在第一个需求上花费的时间较长,不过后面视觉设计部分完成得比较高效,最后8天就完成了所有的设计。