经验:运动记录应用 Human 重设计

    运动记录应用 Human 重设计

    Human 是我最常使用的运动记录应用。与同类应用不同,Human 主要记录的不是步数或卡路里,而是运动时间。当每天的运动时间超过 30 分钟,用户就会得到一个勋章;如果超额完成,勋章也会以不同的颜色进行区分。通过这样一个简单的任务,Human 希望让用户养成每天坚持运动的习惯。

    iTunes App Store 中的 “Human”


    Human 的功能不多,因此页面也相对少,除了运动记录外只有个人页和 Club 页面。在主页中,用户可以进行分享和更新照片主题,此外便是进入日期详情页、运动详情页。虽然 Human 的层级较少,但我认为在目前的交互框架下可以有进一步优化。

    ▲Human 交互框架

    Human 的个人页、Club 页和主页的层级是相同的,但个人页、Club 页却有不一样的切换方式。在主页左划,便会进入 Club 页;而点击左上角的图标,则进入个人页,并带以页面翻转的效果。相信这是功能发布时间有先后导致的切换方式不一致——Club 在近几个月的版本中才推出。

    如果将个人页、Club 页的切换方式统一起来,我更倾向于页面划动。原因有两个:

    1. 左右划动的切换方式更能体现它们拥有相同的功能层级;
    2. 目前主页左上角是个人页的打开按钮,而右上角是分享和更新照片主题的功能按钮。它们性质不同。

    ▲改进后的主页、个人页和 Club 页,通过左右划动屏幕切换

    在运动记录页面下,还有次级页面——日期详情页、三级页面——运动详情页。这是一个典型的「T 型」功能产品。

    最具亮点的主页是「T 型」的横竖交接点,个人页、Club 页是与它并列的,而日期详情页、运动详情页是可以往下继续探索的。因此在交互操作上,我让日期详情页、运动详情页也采取了「T 型」的逻辑。

    在主页,除了点击日期圆圈外,通过向上滑动也能进入日期详情页。同样地,在日期详情页中向下拖拽也能回到主页。并且,在标题下方添加的几个小圆点,也喻示了可左右划动来切换日期。

    ▲日期详情页,左:改进后,右:改进前

    在日期详情页,点击某项运动会进入运动详情页,页面原先从右侧弹出,现在改为从底部弹出。由于地图可以自由拖拽,原先的界面中,部分右划返回上级页面的操作会与此冲突;而改进后的运动详情页采用卡片式的设计风格展示地图,保留右划关闭页面的操作、并不会出现操作冲突。

    ▲运动详情页,左:改进后,右:改进前

    从主页到日期详情页再到运动详情页,每个层级既有鲜明的风格又有联系之处。主页是全屏显示的风景照片,日期详情页在深色背景上展示运动数据,其上方的导航栏是将主页照片作为背景;活动详情页以卡片设计风格展示地图、运动指标,其深色背景延续了日期详情页,而卡片又是一种不同的设计语言并给人以棣属于上级页面的感觉。

    顺带一提的是,我将原先采用的系统字体全部换掉,主页、日期详情页中主要的数据数字选用了 Futura Condensed Medium,而其它字体选用了 Proxima Nova,并根据信息的主次来选用 Regular 和 Semibold 两种字重。我认为这会让应用变得更吸引人眼球。

未经允许不得转载:UI酷 » 经验:运动记录应用 Human 重设计

赞 (0)

评论 0

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址