冥想 App 设计:首页改版前后对比

冥想 App 只有一个承诺:用户离开时比来的时候更平静。下面的初稿想做到这一点,却又用九种颜色、浅色照片上的白字,以及本该放数字的地方塞了一段话,把它自己拆了台。修改后的版本保留所有功能,只是把音量调低。

整个屏幕,改版前后

初级草稿

修改后

左边的屏幕友好但吵闹。右边是同一个产品,只是音量更低,而低音量本身就是功能。

数一数两边的眼睛要分拣多少东西。初稿在你读到任何一个字之前,就摆出了五种心情色、四种方块色、一个桃色框,还有一张压着文字的照片。修改后的屏幕只有一种品牌鼠尾草绿 #4F7A5A,以及一个桃色火焰 #E0784A,专门留给“连续天数”这一件事。

修改 1:心情问题只问一次,只用一种颜色

之前

之后

五个彩色圆圈,每个下面一个词,对比一个问题、五张安静的脸和一个被选中的答案。

心情打卡是一个有五个答案的问题。初稿里每个答案都有自己的颜色,所以用户还没选,这一排看起来就已经“被回答过”了,也看不出选的是哪个。颜色在这里做的是装饰,而不是信息。

修改后,五张脸都用同样的灰色,只有被选中的那张填上品牌绿,并在问题旁边用一个标签写出它的词:“平静”。现在颜色只代表一件事:这是当前状态。脸下面的文字从这一排里去掉了,因为标签已经把选中那张脸的词说了一次。

这个原则适用于任何带评分或选择的 App:如果每个选项都有颜色,颜色就什么也没告诉用户。让选项保持中性,把强调色花在选中项上。

修改 2:照片在上,文字在下

之前

之后

浅色海滩照片上的白字和四个小标签,对比照片下方带标题、时长和一个播放按钮的版本。

初稿把一个 17 px 的白色标题和四个 8 px 的标签直接放在明亮的沙滩和海面上。浅色照片上的白字是最弱的搭配,而标签恰恰是屏幕上最小的文字,出现在用户决定播放什么的那一刻。压在照片上的文字还会随每张照片而变:哪天换上一张更暗的图,版面读起来就不一样了。

修改后,所有文字都挪到卡片里、照片下方,用深色字放在纯色表面上。照片终于只是照片。四个标签缩成一行信息:“每日平静,10 分钟,睡眠”,角落里的播放胶囊变成行尾的圆形按钮,正好是拇指本来就在的位置。同一节课现在只有一个标题、一个时长和一个操作。

可复用的规则:如果文字重要,就给它自己的表面。把文字放在照片上,就等于接受有些照片会把它搞砸。

修改 3:两张照片卡片,取代四个彩色方块

之前

之后

四个各带一个图标的粉彩方块,对比两张展示课程感受的照片卡片。

这些方块看起来什么都不像。带月亮的紫色盒子说“睡眠”,和带肺的蓝色盒子说“呼吸”一样平淡,而四种颜色让屏幕失去了平静。照片则直接展示内容:睡眠课用夜空,晨间课用薄雾湖面。在冥想 App 里,图像就是产品的一部分,因为它比音频更早定下情绪。

修改后的一行只有两张卡片,每张用两行写出名称、时长和类别。两张卡片让每张照片都足够宽,看得清楚。“呼吸”和“专注音乐”方块不在这个屏幕上了,区块标题也从“为你推荐”改成“为你”,因为首页上的列表本来就是为你准备的。

修改 4:三个数字,取代一段话

之前

之后

一句话里埋着同样的三个事实,对比带标签的三个数字。

两个版本说的是同一件事:连续七天,总计两小时三十五分钟,二十三次课程。初稿把它们塞进一句带两个感叹号和一句“目前共,太棒了!”的话里。读者得读完整句话才能找到想要的数字,而藏在从句里的数字,一眼是没法比较的。

修改后,每个事实各占一列:一个大数字和一个小标签。桃色的火焰放在连续天数旁边,因为连续天数是让人明天还回来的那个数字。现在用户查看进度,只需要看一眼的时间。

更小的修改

• 四个标签页,不是五个。 今日、探索、睡眠和我的,取代了首页、睡眠、冥想、音乐和我的。冥想和音乐不再有自己的标签页。
• 统一边距。 初稿左边用 14 px,右边用 12 px。修改后两侧都用 20 px,卡片之间 14 px。
• 更干净的问候语。 “今天感觉怎么样???”从页头去掉了,因为心情卡片会问,而且只问一次,只用一个问号。
• 页头只留一个操作。 铃铛保留并加了一个小红点。头像从页头移除,“我的”仍是一个标签页。
• 真正的字号体系。 文字从 8 到 18 px 改为 iOS 的 11 到 28 pt,最小的文字能读清,标题也明显是标题。
• 安静的区块链接。 “查看全部 >”改成“查看全部”,每个区块用同样的词。

审查你自己的健康类 App

获取 Figma 文件

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

免费 Figma 文件

冥想 App 首页,改版前后

两个屏幕和每个修改后的部分,均为 Figma 组件。免费,仅可查看,可复制到你的草稿中。

在 Figma 中打开

常见问题

冥想 App 首页应该展示什么?

一句问候、一个心情问题、作为单张照片卡片并带一个播放按钮的今日课程、一小行推荐,以及用户的进度。其他一切都可以放在点一下就到的地方。

App 里的心情打卡应该是什么样?

五个相同、安静的选项,上方一个问题。只给用户选中的那个选项上色,并把它的词只说一次。如果每张脸都有自己的颜色,就没有东西告诉用户选的是哪个。

在 App 里把文字放在照片上可以吗?

只有当文字位于可控区域,比如深色遮罩上,并且达到最低对比度时才可以。在明亮且多变的照片上,应把文字放在图片下方的纯色表面上。

健康类 App 里怎么展示连续天数和进度?

用几个带标签的数字,比如连续天数、总时长和课程数。连续天数值得一点小小的强调,比如一个火焰。一句鼓励的话不能代替数字。

冥想 App 应该有几个标签页?

四到五个。如果两个标签页通向同一个内容库,就合并它们。修改后的屏幕从五个标签页减到了四个。

来源

• 两个屏幕都是我们自己在 Figma 中设计和测量的。用户、课程和数字都是为练习虚构的。
• 照片来自 Pexels,作者为 Татьяна Танатова、olia danilevich、Felipe Barboza 和 Jean-Daniel Francoeur。
• Apple Human Interface Guidelines: Typography,修改后屏幕所用的 iOS 字号出处。
• W3C: Web Content Accessibility Guidelines 2.2, Contrast (Minimum),关于图片和背景上的文字。
• 最初作为轮播图发布在 App Brainy。