案例 02 · 播放流程
一个长视频应用的起播页
从首页到某一集开始播放要四次点击，其中两次点的是同一件事。把详情页和播放页合成一页，首屏就能选集。
- 角色
- 流程设计、界面设计
- 时间
- 2026 年 10 月，两周
- 范围
- iOS，长视频应用
长视频应用的首页做得越来越好：大图、预告、榜单、猜你喜欢。但用户真正要的那一下——让某一集开始播——还藏在三次跳转后面。这个案例只处理这一段。
为了不带偏见，我把主流长视频应用的同一条路径各走了一遍，记录点击次数和每一屏停留的时间。结论几乎一致：详情页和播放页在讲同一件事，只是分段讲了两遍。
一个动作被拆成了三屏
用户想看第 4 集，实际发生的是：
- 首页点海报，进入详情页
- 详情页向下滑，找到选集区
- 点第 4 集，进入播放页，从头加载
- 播放页顶部又出现一次片名和简介，底部才是控制条
第 2 步到第 3 步之间，屏幕内容其实没有变化：还是那张海报，还是那个片名。变的只是「能不能播」。这是典型的层级效率问题——用户已经决定要看，界面还在确认他要不要看。
详情页在重复播放页
把两屏的信息摊开对比，重复的部分比想象的多：片名、评分、简介、演员、选集。详情页多的是「相关推荐」和「评论」，播放页多的是「进度」和「画质」。真正的决策信息只有三样：这片子是什么、我看到第几集、下一集播什么。
所以合成一页是可行的，只要把播放页的控制层做薄，把详情页的长内容往下压。
起播页：一屏装下决定
上半屏是播放区：海报、集数、一个播放按钮、一条已经看过的进度。下半屏是一个可上滑的面板，第一屏只放三行——片名与评分、元信息、选集网格。
选集网格是这一页的重点。原来是横向滑动的一排，首屏只能看到四集；改成 6 列 × 2 行的网格，首屏能看到 12 集，第 4 集这一行直接带续看标记。选集从一个需要操作的动作，变成了一个可以直接读的列表。
海岸线以北
8.6续看应该跟着人走
原来「继续观看」是首页的一个模块，位置在第二屏。问题是，人想续看的时候往往不在首页——他在搜索、在分类、在别人的分享里。把续看做成一条全局的细条，贴在页面底部上方 8pt，只在有未看完的内容时出现，高度 44pt，可以左滑关掉。
它不是通知，也不是悬浮球。它只回答一个问题：上次那个看到一半的东西，从这里能回去。
控制层只留一条
播放页原来的控制层是上下两条：顶部是返回、片名、更多；底部是进度、播放、清晰度、全屏。片名在进入播放后三秒内就没人看了，却一直占着一整行的视觉重量。
合并成一条底部控制栏：进度条在最上，下面一行图标，左右各三个，间距 32。顶部只留一个返回箭头，点一下就自动淡出。暂停时从底部升起的，也只是这个面板，不是另一套结构。
播放器的界面应该在你按下播放之后尽量消失。它存在的意义是让你离开，不是让你停留。
测量
- 从首页到某一集开始播放：4 次点击 → 2 次
- 首屏可见集数：4 集 → 12 集
- 重复展示片名与简介的屏数：2 屏 → 1 屏
- 控制层占用的纵向高度：两条约 168pt → 一条 92pt
- 从暂停到找到选集：1 次返回 → 0 次（面板可直接上滑）
深色是这类界面的默认选择：晚上看剧是主要场景，浅色界面在暗环境里会把整个房间照亮。背景用 #0E0E11，面板 #141418，两级就够了，不靠阴影分层。选集用等宽数字，切换时字号和位置都不跳。
没有做的事
没改首页，没碰推荐算法，也没重做搜索。首页的问题是「怎么让人找到想看的」，和「找到了之后怎么开始看」是两个问题，一次只解一个。如果把两件事一起改，上线后没人知道效果来自哪一半。