健身 App 设计:首页改版前后对比

健身 App 的首页只有一个任务:告诉用户今天进展如何,并给出一个清晰的开始方式。下面的初稿每个数字都没错,但它把数字塞进四个拥挤的磁贴里,白字压在杂乱的照片上,图表也没有任何可读的信息。修改后保留了所有功能,只是改变了每个部分需要眼睛付出多少力气。

整个屏幕的前后对比

初级草稿

修改后

左边,眼睛先遇到四个元素的顶部栏,然后是四种颜色的四个磁贴,再是一张照片、两个按钮和一颗心、一个图表,以及被标签栏截断的第二排训练。右边只有三张卡片和一个顶部栏:今天进展如何、现在该做什么、这一周怎么样。

没有删掉任何用户会想念的功能。步数、卡路里、饮水、心率、当天的训练和本周的活动都还在,只是被放进了更少、更大的形状里。

修改 1:用一张环形卡片代替四个磁贴

修改前

修改后

四个粉彩磁贴,每个都有图标、数字、标签和一条细条;对比之下是一张带三个环的卡片,每个标签下标出目标,心率则是一个小标签。

草稿里每个磁贴都说出一个数字并画一条细条,却没说这条细条是对照什么来衡量的。8,432 步可能算好,也可能算差。读者只能从条的长度去猜目标,而且这些条还很细。

环用文字(“of 10,000”、“of 600 kcal”、“of 2 L”)和形状同时给出目标:环要么满了,要么没满。一眼就能回答“我今天达标了吗?”。心率是读数,不是目标,所以不配拥有一个环。它退到角落变成一个标签,这表明它是另一种数字。

可复用的规则:如果数字有目标,就展示目标;如果没有,就不要把它包装成进度。

修改 2:一个播放按钮,文字后面垫一层遮罩

修改前

修改后

一个章节标题、一个 NEW 徽章、照片上 9 px 的白字和下面的三个控件;对比之下是带标签的照片、遮罩上更大的文字和一个播放按钮。

照片上的白字,只有在照片碰巧够暗的地方才看得清。草稿里详情那一行正好横穿图像最亮的部分,健身房地板和一件灰色上衣,9 px 的字就这么消失了。修改后在照片上铺了一层黑色遮罩,底边处达到 72%,正好是文字所在的位置,同时把字调大。

草稿还在用户行动之前先抛出一个问题:Start Now,还是 Details,还是用心形收藏?今天的训练只有一件事可做,就是开始它。一个圆形播放按钮不用一个字就说清了。想看详情,点一下就行,但它们不再和主操作抢戏。

“NEW” 徽章和 “Today's workout” 章节标题几乎把同一件事说了两遍。修改后只保留一个标签,即照片上的一个小标签。

修改 3:图表先给出总量

修改前

修改后

七根等高的橙色柱,配下拉菜单和图例;对比之下是大字号的本周总量、一个趋势标签和一根纯橙色柱。

图表是用来回答问题的,而草稿的图表没说它回答哪个问题。七根同样醒目的橙色柱,没有数值,还给唯一的数据系列配了图例,读者只能自己决定该看出什么。修改后先用文字回答最可能的问题:本周 4 h 12 min,比上周多 18%。

柱子现在是背景,而不是信息本身。其中五根是品牌色的浅色调,今天,也就是周六,是纯橙色,所以眼睛会落在用户处于一周中的位置上。周日保持为一小截短柱,所以这一周从左到右读到今天为止。“This week” 下拉菜单和 “Active minutes” 图例都去掉了,因为标题已经把两者都说了。

可复用的规则:把图表需要花一分钟才能解释清楚的那个数字放在顶部,其余交给柱子。

修改 4:顶部栏只留一个按钮

修改前

修改后

头像、带感叹号的问候、再多两个感叹号的第二行,以及三个图标;对比之下是日期、一句问候和一个通知按钮。

草稿的顶部栏在任何内容出现之前就塞了七样东西:一个头像、两行问候和三个图标。头像通向用户的账号,而 App 已经有了 Profile 标签页,所以修改后把它从顶部栏拿掉。搜索和设置图标也一并去掉,给问候语腾出空间。

修改后保留了唯一配得上顶角位置的东西:通知,有新消息时带一个小圆点。问候语变成日期加大字号的名字,不用感叹号就告诉读者今天的数字属于哪一天。

其他小修改

• 四个标签页,不是五个。 Home、Workouts、Progress 和 Profile。Stats 和 Community 让位给了一个 Progress 标签页。
• 统一边距。 草稿左边用 14 px,右边用 12 px,所以卡片看起来略微偏离中心。修改后两侧都用 20 px,卡片之间 16 px。
• 操作只用一种颜色。 草稿用了桃色、黄色、粉色和蓝色磁贴,外加橙色。修改后橙色用于操作,琥珀色和蓝色只留在其中两个环上,用来区分各个环。
• 真正的字号体系。 文字从 8 到 16 px 改为 iOS 的 11 到 28 pt 字号,屏幕上没有任何东西比系统最小的说明文字更小。
• 去掉 Recommended 行。 草稿的第二排照片被标签栏截断。修改后首页在图表之后就结束。
• 更平静的问候。 “Let's crush today's goals!!” 变成了名字上方的日期。

审查你自己的健身 App

获取 Figma 文件

这个免费文件包含两个屏幕的组件、每处修改的前后对比、颜色变量和 iOS 文字样式。

免费 Figma 文件

健身首页,改版前后

两个屏幕和每个修改部分的 Figma 组件。免费,仅供查看,复制到你的草稿即可使用。

在 Figma 中打开

常见问题

健身 App 首页应该先展示什么?

今天进展如何:步数、卡路里和饮水相对于各自目标的情况,放进一张卡片。当天的训练直接放在下方,配一个清晰的开始方式。

健身 App 里进度环比进度条更好吗?

对于少数几个每日目标,是的。环一眼就能读懂,不需要刻度就能看出满没满,中间还能放一个数字。心率不要放进环里,因为它是读数,没有可填满的目标。

怎样让训练照片上的白字清晰可读?

在文字后面垫一层暗色遮罩,文字所在处最深,并把字设置到可读的大小。不要指望照片恰好在正确的位置够暗。

健身活动图表该怎么设计?

先用文字给出总量和趋势,然后用柔和的浅色调显示柱子,当天用品牌色。标题已经涵盖的图例和下拉菜单就去掉。

健身 App 应该有几个标签页?

四到五个。把存放相关数据的标签页,比如 Stats 和 Community,合并到一个地方,比如 Progress。

来源

• 两个屏幕均为我们自己在 Figma 中设计和测量。
• 照片来自 Pexels,作者 pessoas uem、Julia Larson、Tima Miroshnichenko 和 Vitaly Gariev。
• Apple Human Interface Guidelines: Typography,修改后屏幕所用的 iOS 字号出自这里。
• 最初以轮播形式发布于 App Brainy。