流媒体应用设计:深色首页改版前后对比
一个深色流媒体应用首页:6 条信息挤在一行 9 px 小字里,三个分量相同的按钮,青色品牌里还混进了红色。同一个界面,改好之后的样子。每处改动并排对比,附上原因,还有免费的 Figma 文件。
一个人打开流媒体应用,是为了按下播放。下面的初稿手里有一部好剧可卖,却用别的东西把唯一重要的那个按钮围了起来:四个图标的顶栏、一行 9 px 字号的六条信息、三个分量相同的按钮,还有青色应用上的红色角标。修改后保留同一部剧、同样的内容行,只是让界面的顺序和观众的行为顺序一致。
整个界面的前后对比
新手初稿
修改后
左边,主视觉里最先看到的是全大写的标题和一行小到看不清的字。右边,主视觉只有名字、一行字和一个按钮。
| 新手初稿 | 修改后 | |
|---|---|---|
| 顶栏 | 字标,4 个图标 | 字标,2 个 40 px 按钮 |
| 主视觉信息 | 6 条挤在一行 9 px 字里 | 一行简短信息 |
| 主视觉按钮 | 3 个全大写,分量相同 | 1 个大播放键,1 个加号按钮 |
| 续播行 | 3 张竖版海报,10 px 标签 | 2 张宽卡片,显示剩余时间 |
| 排行行 | 4 张海报,每张都是同样的 TOP 10 标签 | 4 张海报,排名 1 到 4 |
| 使用的颜色 | 青色,外加红色角标和红色进度条 | 一种青色用于进度和链接 |
| 背景 | 纯黑 #000000 | 从琥珀色 #3A2510 渐变到 #0E0E12 |
| 标签栏 | 5 个 | 4 个 |
| 侧边距 | 左 14 px,右 12 px | 20 px,板块之间 16 px |
| 文字大小 | 7 到 30 px | 11 到 28 pt |
修改 1:一个只做两件事的顶栏
修改前
修改后
四个小图标,对比两个圆形按钮。
初稿的顶栏放了搜索、投屏、带红点的铃铛和观众头像,每个大约 20 px 宽。这一行很拥挤,而且头像和底部的“我的”标签重复了。
修改后保留搜索和通知,做成两个 40 px 的圆形按钮,去掉投屏图标和头像。铃铛的圆点改成青色。个人资料已经有了自己的标签,顶栏不必再重复。
可复用的规则:每个控件只在一个地方出现。如果标签栏里有“我的”,顶栏就不需要头像。
修改 2:只留一个播放键
修改前
修改后
一个标题、一行极小的信息和三个按钮,对比一个标题、一行字和一个按钮。
主视觉是界面上最值钱的空间,而初稿把它塞满了。标题全大写,放在海报中下部,上面压着红色的“NEW EPISODES”标签。下面一行 9 px 的字塞了六条信息:“2025 • TV-MA • 2 Seasons • Sci-Fi, Action, Drama • ★ 8.3”。接着是 PLAY、MY LIST、INFO 三个按钮,全大写,分量也差不多,观众得先选择才能按下去。
修改后把标题移到图片左下,下面加一层深色渐隐保证可读,标题下只有一行简短的字:“科幻 · 第 2 季 · 2025”。标签用品牌青色写着“新一季”。
图片下方,一个宽大的白色“播放”按钮占据大部分宽度,旁边一个圆形“+”用来加入列表。INFO 不在界面上了。
可复用的规则:主视觉只需要一个动作。给它界面上最大的按钮,其余一切都做得更小。
修改 3:告诉你还剩多久的宽卡片
修改前
修改后
三张带细红条的竖版海报,对比两张显示剩余时间的宽卡片。
初稿的“Continue Watching for Alex”行展示三张竖版海报。每张下面有一条 3 px 的红色进度条,以及 10 px 字号的“S2:E5”之类的标签。海报告诉你这是什么剧,却没说观众看到了哪里,而且红色进度条在青色应用里是第二种颜色。
修改后用两张宽卡片,青色进度条放在图片内部,每张下面是标题。标题下的一行写着“S2 E5 · 还剩 12 分钟”,回答了人们接着看时会问的问题:我有时间看这个吗?
可复用的规则:续播行是为观众的进度服务的。显示剩余时间,而不只是剧集编号。
修改 4:看得清的排名
修改前
修改后
四张海报同一个标签,对比四张海报各有排名。
初稿的“TRENDING NOW”行有四张海报,每张都戴着同样的红色“TOP 10”标签。这个标签只说它们都在前十,没说排第几。观众分不出第一和第四。
修改后把这一行改名为“今日 Top 10”,每张海报旁放一个大号描边数字:1、2、3、4。这一行现在有了从左到右的阅读顺序。“查看全部”链接用品牌青色,和进度条同色。
可复用的规则:排行就该显示名次。每个条目都一样的徽章只是装饰。
更小的修改
- 一种品牌色。 修改后字标、进度和链接都用青色 #22D3EE。红色角标和红色进度条都去掉了。
- 和主视觉匹配的背景。 修改后的背景从主视觉的琥珀色 #3A2510 渐变到 #0E0E12,让第一屏感觉像一张完整的图。初稿则是纯黑 #000000。
- 一条统一的左边缘。 初稿的边距是左 14 px、右 12 px。修改后两侧都是 20 px,板块之间 16 px。
- 真正的字号体系。 文字从 7 到 30 px 改成 iOS 的 11 到 28 pt。
- 四个标签,不是五个。 首页、搜索、即将上线、下载和更多,变成了首页、搜索、下载和我的。
检查你自己的流媒体界面
| 问题 | 为什么重要 |
|---|---|
| 主视觉里有没有一个比其他都大的按钮? | 主视觉只需要一个动作 |
| 续播行有没有说明还剩多少? | 它回答了有没有时间看 |
| 排行行有没有显示名次? | 重复的标签什么也没说明 |
| 界面是否用了不止一种强调色? | 第二种强调色会和第一种争抢注意力 |
FAQ
流媒体应用首页应该先展示什么?
一个主视觉,包含剧名、一行简短信息和一个大大的播放键。观众自己的进度,也就是续播行,紧随其后。
主视觉横幅应该有几个按钮?
一个主按钮,最多再加一个小的次要按钮,比如用来加入列表的加号。三个分量相同的按钮会让观众在按播放之前先做选择。
如何设计续播行?
用带进度条、标题和剩余时间(比如“还剩 12 分钟”)的宽卡片。竖版海报显示这是什么剧,宽卡片则显示观众停在了哪里。
如何设计 Top 10 行?
在每张海报旁放一个大号排名数字,让这一行有顺序。每张海报都写着“Top 10”的徽章,并没有说明这部剧排第几。
深色流媒体应用适合用什么颜色?
深色背景上用一种强调色表示进度和链接。修改后的界面在从主视觉琥珀色渐变到 #0E0E12 的背景上使用青色 #22D3EE。
流媒体应用应该用多大的字号?
用平台的文字体系。修改后的界面使用 iOS 的 11 到 28 pt,所以主视觉里没有任何文字小于 11。
来源
- 两个界面都是我们自己的作品,在 Figma 中设计并测量。观众、剧集和 Streamix 应用都是虚构的,每张海报都是纯色加排版的标题。
- 头像照片来自 Pexels,摄影师 Amir SeilSepour。
- Apple Human Interface Guidelines: Typography,修改后界面所用的 iOS 文字大小出自这里。
- Apple Human Interface Guidelines: Dark Mode,关于如何设计在深色背景上也好用的界面。
- 最初以轮播图形式发布于 App Brainy。
Want this for your own app? Our team redesigns streaming and media apps like this one, from the first audit to the finished components.
Get Started
