播客 App 设计:首页改版前后对比

在播客 App 里,人们最常做的事就是接着上次听到的地方继续听。下面的初稿具备听众需要的一切,却偏偏把这件事藏了起来:听到一半的那一集,被放在三张封面之间的一张小卡片里,只有一条细线表示进度。修改后的版本保留了节目、榜单和分类,并让暂停的那一集成为屏幕上最大的元素。

整个屏幕的前后对比

初级版草稿

修改后

左边,用户的那一集只是三张等大封面之一,下面只有 2 px 的进度,榜单每一行末尾都有三个图标。右边,暂停的那一集有了自己的卡片,带 6 px 的进度条和三个大控件,列表每行末尾只有一个按钮。

修改 1:给你离开的那一集一张大卡片

之前

之后

三张带细线进度的封面,对比一张有剩余时间和控件的卡片。

草稿里的“继续收听”只是一个货架。三张封面等大并排,每张下面有 2 px 的进度线,标题被截成“Ep. 142: Why Great Apps Feel Calm (And...”,“剩余 23 分钟”则是小号灰字。想接着听那个真正重要的一集,听众得先点开一集,等播放器出现,再按播放。

修改后给暂停的那一集一张卡片。顶部是封面、紫色标签“继续收听 · 剩余 23 分钟”、完整标题“Why great apps feel calm”,以及节目名“Studio Hour · 第 142 集”。下方是一条 6 px 的进度条,旁边是三个控件:后退 30 秒、播放、快进 30 秒。另外两张封面已经移出了这一区块。

后退和快进 30 秒按钮是中间带 30 的圆形箭头,点击区域为 44 px,这是 Audible 用的模式。被打断的听众不用离开首页,就能退回半分钟。

可复用的规则:用户正在做的事,就是最可能的下一步操作,所以给它一张卡片和它的控件。

修改 2:两行标题和一个播放按钮

之前

之后

被截断的标题、排名数字和三个图标,对比完整的标题和一个播放按钮。

草稿里的榜单每行末尾都有下载箭头、三点菜单和播放三角,标题只能挤在剩下的空间里,结果根本放不下:“The Week in Tech, in 20 Minutes: Al...”、“How to Learn Anything in 30 Days...”、“Live from Brooklyn Part 2 (Uncut Ex...”。排名是一个紫色大数字,每个标题下面还有一行,写着节目、分类和时长。

修改后让标题折成两行:“The week in tech, in 20 minutes”。下面只有一行,写日期和时长,“今天 · 21 分钟”。右边是一个圆形播放按钮,这是一行唯一需要的操作,点击区域也足够大。下载和菜单不在这一行里,这次改版也没有画出它们该放在哪。

这次改版不只改了列表的外观,也改了它的作用。五行带排名的“热门榜单”变成了三行“接下来播放”,所以真实的 App 仍然需要为榜单找一个位置。

可复用的规则:让标题换行,因为被截断的标题没法读;并且每一行只给一个操作。

修改 3:分类统一一种样式

之前

之后

两行六种纯色,对比一排只有一个填充的胶囊。

草稿里的分类标签是粉、蓝、红、绿、橙和青,每个都是纯色底配白字,占了两行。

修改后是一排样式统一的胶囊。“全部”用品牌紫 #8B5CF6 填充,其余是白色。“更多”放在末尾,收纳放不下的分类。只有填充的胶囊才有含义,那就是“你正在看这个”。

可复用的规则:颜色应该告诉人哪一个被选中了,而不是哪一个是哪一个。

修改 4:带有人们真正会用的控件的迷你播放器

之前

之后

上一集、暂停和下一集,对比后退 30 秒、暂停和快进 30 秒。

迷你播放器是屏幕上空间最小的地方,所以里面每个控件都得配得上自己的位置。草稿里的三个是上一集、暂停和下一集。上一集和下一集会跳到另一集。

修改后用的是后退 30 秒、暂停和快进 30 秒。封面和标题“Why great apps feel...”留在左边,节目名在下面。进度线沿着播放器的上边缘延伸,不占一行,就能显示这一集播到了哪里。

可复用的规则:迷你播放器应该有人们收听时真正会用的三个按钮。

其他的小修改

• 统一的左边缘。 草稿的边距是左 14 px、右 12 px。修改后两侧都是 20 px,卡片之间 16 px。
• 一种品牌紫。 修改后填充和播放按钮用 #8B5CF6,小号紫色文字用更深的 #7C3AED,因为它需要更高的对比度才能看清。
• 真正的字号体系。 文字从 8 到 20 px 改成了 iOS 的 11 到 28 pt。
• 更大的标题,更小的页眉。 草稿的页眉里有搜索图标、铃铛和头像。修改后保留头像和一个大的“播客”标题。
• 四个标签页,不是五个。 首页、浏览、资料库、搜索和个人资料变成了现在收听、浏览、资料库和搜索。个人资料就是页眉里的头像。

审查你自己的播客 App

获取 Figma 文件

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

免费 Figma 文件

播客首页,前后对比

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

在 Figma 中打开

FAQ

播客 App 首页应该先显示什么?

听众听到一半的那一集,放在一张大卡片上,带剩余时间、播放键,以及后退和快进 30 秒。榜单、分类和新节目放在它后面。

播客迷你播放器应该有哪些按钮?

后退 30 秒、暂停和快进 30 秒。上一集和下一集会跳到另一集,所以留给完整播放器。

如何设计继续收听区块?

给最近暂停的那一集一张卡片,包含封面、完整标题、节目名、剩余时间和进度条,再加上继续播放的控件。不要让它和其他封面一样大。

播客 App 应该如何列出剧集?

让标题折成两行,把日期和时长放在一行灰字里,行末只放一个播放按钮。把下载和菜单移到剧集页面。

如何为播客 App 设计分类筛选?

一排样式统一的胶囊,选中的用品牌色填充,末尾放“更多”。六个标签用六种颜色,颜色就失去了意义。

播客 App 应该用多大的字号?

用平台的文字体系。修改后的屏幕使用 iOS 的 11 到 28 pt,并配一个大标题。

来源

• 两个屏幕都是我们自己在 Figma 中设计并测量的。节目名、剧集和人物都是虚构的;封面是照片,上面加了节目名。
• 照片来自 Pexels,摄影师为 Jace Oner、Somogro Bangladesh、Sound On、Brett Sayles、Ali Dashti、frank minjarez 和 pessoas uem。
• Apple Human Interface Guidelines: Typography,修改后屏幕所用的 iOS 字号出处。
• Apple Human Interface Guidelines: Accessibility,44 pt 点击区域大小的出处。
• 最初作为轮播图发布于 App Brainy。