
ALLHealth是一款智能健康设备管理应用,主要用于连接品牌在亚马逊售卖的体脂秤、血氧仪等医疗器械设备,监测用户的健康情况。app在此时是开发完成初始版本并已经上线使用。
交互设计,界面视觉设计
本次优化的主要针对数据展示部分的视觉和微交互,该部分是整个App中比较重要核心的功能,但是目前开发出来的效果公司负责人和销售部门都不太满意,同时有新增的内容,因此需要我在以下3个方面进行优化和新增。
通过实际的体验和用户反馈收集,这部分的问题比较多,主要集中在:
这部分的难点在于需要兼顾超过20个类型的数据,同时需要适应不同的时间区间,无论用户选择的时间区间是1天还是100天,都能够显示图表中的有效测量数据,并且有较明显的高低起伏。


新版本的设计中,对曲线的显示逻辑做了新的交互规则:
以上方案完美地解决了数据、时间区间不确定的问题,同时也针对不同的极端情况提供了交互方案,顺利通过了开发团队和产品经理的评审。
原来的曲线图样式比较小气,且折线看起来有点生硬;各个数据点击没有效果,不易查看某个具体的测量点数据。新的设计中,优化了数据曲线及区域、数据点的样式,突出了时间选择模块;同时增加了曲线的点击效果,点击后会在曲线上方显示该数据点的详细信息。同时手指在曲线图上左右滑动时,也可切换显示不同的数据点。

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

当前首页数据卡片的颜色方案比较简单,一种是常规的蓝色,一种是非常规时显示的红色。但是业务上需要增加20多种数据,如果仍使用原来的颜色方案就会特别单调。此外,原本的数据卡片中,图表为折线图,且交互逻辑不明晰。因此这部分优化需要颜色和样式2个方向来。
由于数据是App的核心信息,因此我针对不同类型的数据,匹配了不同的颜色,一来方便归类,而来视觉上也更丰富。正常和异常状态直接使用不同颜色的文字表示。

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

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

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