2023 – 26 · music window

音乐小窗 ·
系统级公共播控容器

沿 Smartbar 向上展开,在 13 种音源、3 块屏幕与多种场景中守住一致性。

role独立负责 0 → 1 交互设计
collab5+ 人跨职能团队·产品 / 视觉 / 开发
status功能已落地
01 · Origin

桌面不缺入口,
缺的是不牺牲导航就能播控的方式

不新造入口。沿 Smartbar 这个已有的全局入口向上展开一个悬浮容器——它不切分屏幕、且可拖到屏幕左右任意一侧,主驾导航与副驾听歌能同时进行。

小窗与导航共存的车机实机效果
小窗悬浮于地图之上 · 覆盖 24 款车型 · 主驾导航与副驾听歌同屏共存
From Need to Window · 从业务需求到小窗形态

不做卡片、不做分屏,
小窗是怎么被推出来的

业务需要用户不进入桌面也能快速播控、选歌、切音源。我比较了 4 种承载方案——只有小窗以叠加浮层的方式存在(信息不与底部 Smartbar 重复,导航与音乐也不相互割裂),其余三种方案都在做屏幕的固定分割。

方案①·桌面卡片
① 桌面卡片 部分信息与 Smartbar 重复 + 交互行为不一致
方案②·分屏·音乐优先
② 分屏 · 音乐优先 1/3 地图导致导航严重阉割
方案③·分屏·导航优先
③ 分屏 · 导航优先 音乐需适配 2/3 与全屏两套尺寸
方案④·小窗悬浮
④ 小窗悬浮 叠加浮层 · 导航与音乐互不割裂
02 · Consistency · 对用户屏蔽音源差异

13 种音源在底层完全不同,
但用户感知到的框架必须稳定

一致性要在三个层面守住:操作、结构、感知

01 · Operational · 操作一致性
三屏横滑——复用用户已有的应用内操作记忆

列表 · 封面 · 歌词——小窗内横滑切换,与应用内是同一套操作。小窗是系统容器,但它的阅读结构和应用内互通,不需要用户重新学习。

小窗三屏横滑结构
音乐小窗 · 列表 / 封面 / 歌词 · 背景取色联通三界
应用内播放器三屏横滑结构
应用内播放器 · 横滑操作与小窗完全一致
02 · Structural · 结构一致性
封面作默认态——13 种音源唯一的最大公约数

歌词模式依赖「歌词数据存在且可读」这个前提,但这个前提对一半以上的音源都不成立——打开就是一大片空白。封面模式作为默认态总是成立,三屏框架在 13 种音源下都能保持完整。

假设 · 歌词模式作默认 × —— 一半以上音源直接是空白
歌词模式作默认态 · 7 种音源都是空白
FM没有歌词概念
USB本地文件多数无歌词
蓝牙取决于手机应用开关
Link音源侧不传歌词
CarPlay音源侧不传歌词
CarLink音源侧不传歌词
浏览器音源侧不传歌词
实际 · 封面模式作默认 — 13 种音源都能撑住
封面模式作默认态 · 7 种音源都能撑住
03 · Perceptual · 感知一致性
数据结构乱了,
用户的视线落点必须稳定

蓝牙音乐不按原生音乐的结构回传——它会把歌词塞进歌名的位置。1.0 阅读重心分散,2.0 把歌名区整体下移,让歌名和歌词都落在小窗下半部分,阅读重心拉齐。同时封面融入背景,沉浸感与一致性同步升级。

V1.0 与 V2.0 小窗阅读落点对比
1.0 旧版 × 阅读重心错位
歌名被推到 上半区(歌词位置),下半区原生歌名带 被挤空——视线找歌名时要在上下间跳跃
2.0 新版 阅读重心拉齐
上半区让位给 封面(视觉),下半区固定为 阅读带 · 歌名 + 艺术家——不管数据结构怎么变,视线落点不变
03 · Differentiation · 对系统识别音源差异

对用户是同一个小窗
对系统是 13 种不同的能力适配

旧版区分了音乐和播客,但只到类别级——播客缺倍速、快进快退。我推动的是把识别颗粒度从类别级推进到任务级:听歌需要收藏,听播客需要倍速。

01 / 音乐
任务是选歌与收藏 · 下发收藏、播放列表、推荐歌单
02 / 播客 · 听书
任务是连续收听 · 下发倍速、快进快退,时长由应用自定义(15s / 30s)
03 / 蓝牙 · USB
蓝牙/USB 音源侧没歌词回传 · 把应用既有的在线歌词匹配能力推到小窗触发,匹配中间态、失败态都通过小窗反馈
04 / 动态音源
小窗是代理而非宿主 · 应用能给的(进度)小窗照搬,做不到的(拖动、收藏、跳页)小窗就藏,不假装能控制
历史定位 · Pioneered in 0→1

这个方向是我在项目 0→1 阶段提出的设计判断,受限于底层 Media Center 能力当时仅部分落地。几年后同类车机产品陆续实现了类似机制。

Music音乐 · 04
Podcast播客 · 03
Local本地 · 03
Dynamic动态 · 04
04 · Exceptions by Design · 边界定义才算完成

边界定义才算完成 ——
黑盒行为里的两个独立判断

一个系统不是 happy path 画完就结束——边界定义出来才算完成。这里有两个独立的判断要做:被打断后该如何恢复 · 切走时音源是否该消失。

动态音源(浏览器 / Link / CarPlay)接入了媒体中心,常规冲突仲裁规则存在。但被未接入媒体中心的音频(手机视频、K歌、系统Tele呼叫等)打断后,恢复行为是黑盒的——会出现空状态、无法播控、甚至类似bug的表现。我梳理了所有打断场景下的异常表现,推动跨业务修改。

13
Disruption Scenarios
梳理 13 种打断后的异常表现
7
Behaviors Corrected
推动 7 处黑盒行为修正
4
Cross-team Collaboration
浏览器 / Link / 蓝牙 / 媒体中心
动态音源打断后的黑盒表现梳理与推动修改
横向 3 种动态音源 × 纵向打断场景矩阵 · 琥珀色虚线框标注的是我推动修改的 7 处异常
02 · Disappearance · 音源消失规则
动态音源什么时候该消失
用户离开 vs 连接断开

用户从 CarPlay 切到蓝牙听歌时,小窗里的 CarPlay 该立刻消失吗?两个方案都合理——我选了方案 B。判断依据:「不想听了」的真正信号应该来自连接状态的变化,而不是切换行为本身。这个判断通过上线前的用户反馈验证并修正。

CarPlay 音乐播放中 小窗展示当前播放内容 用户切到蓝牙音乐 触发点——切换行为 vs 连接状态,判断不同 OPTION A CarPlay 小窗立刻消失 判断依据:切走 = 用户不想听了 用户切回 CarPlay 发现需要重新连接 · 体验断裂 × 判断信号不准确 OPTION B · 已选 CarPlay 小窗保留 · 状态暂停 判断依据:切走 ≠ 不想听,只是先去别处 连接真正断开时才消失 设备断开 / 浏览器页签关闭 ✓ 信号来自连接状态,准确
05 · System Hosting · 系统级承载在不同场景的形态

换到后排,
这套系统级承载从「小窗」变成「应用 + 公共播放器」

主副驾用小窗,因为有强多任务并行需求。后排不一样——多任务需求弱、多屏多开性能受限,同一套系统级承载思维在后排走了另一条路:能进就进应用,不能就进公共播放器。后排还经历了两代框架(桌面卡片 → 视频流 + Dock),两代里这套思维都成立。

01 · Card Framework · 第一代

桌面卡片作为框架时,
音乐就是一张可展开的桌面卡片

第一代后排框架:桌面卡片 + 三层结构
02 · Video-feed Framework · 第二代

桌面卡片消失了,
音乐只能顺着 Smartbar 走

高层改框架——首页铺视频流、底部仅留 Dock,桌面卡片这个承载消失了。重新做选择:沿用前排小窗,还是直接进应用?

A · 沿用小窗 · 未采纳
方案A:后排沿用小窗——小窗占据视频流首页左侧
沿用前排承载形态,认知一致
不切走视频流,叠加共存
后排多屏多开,资源占用过高
后排多任务需求弱,单任务专注
B · 直接进应用 · 采纳
方案B:直接进入应用——屏幕全部交给应用,功能完整
资源占用可控,仅渲染当前应用
能进应用的保留完整功能体验(音质音效、个性化等)
后排专注度高,适合应用全屏体验
进不去的音源 → 需公共播放器兜底(下一节展开)
03 · Public Player · 公共播放器
没有应用可进的音源一个落点

覆盖窄是结构性事实——能进应用的进应用,进不去的兜在公播。这个容器不重做应用,它的设计是另一个判断:模式继承应用,能力继承小窗——靠近熟悉的应用记忆,又不越过小窗的克制。

起点 Smartbar 点击 是否动态音源? FlymeLink / CarLink / 浏览器 Y 公共播放器 动态音源本就跨屏共享 N 是否分身应用? 每个屏都有独立分身 N 应用自身播放器 蓝牙 / USB / FM · 硬件互斥 Y 当前屏在播? QQ / 网易云 / 喜马拉雅 等 Y 应用自身播放器 分身应用 · 当前屏在播 N 公共播放器 分身应用 · 在另一个屏播
应用自身播放器实例:QQ音乐全屏
缺图: 20_2nd_B_app_focus.jpg
B · 应用自身
业务功能完整保留——歌单 / 推荐 / 音质音效 / 个性化 都在
公共播放器实例:QQ音乐来自主驾
缺图: REAR_VARIANT_focus.jpg
C · 公共播放器
模式跟应用一样熟悉,能力跟小窗一样克制
04 · Reflection · 反思
公共播放器从「孤立的兜底
变成「体系里的一员

公共播放器原本是孤立的兜底,装着动态音源(Flymelink、CarLink、浏览器)和跨屏分身应用。我把它并入了应用之间的音源切换体系——一个稳定的切换控件,在任何应用页和公播之间互通。

后排公播页实景与体系全图
改前 用户自己"重新开始" · 5 步 起点 在公播页 想切到覆盖外 1 回到桌面 退出当前页 2 应用不在 Dock 扫一遍 Dock 没有 3 上滑列表找应用 视觉扫描定位 4 点击应用进入 应用启动 5 重新点播放 恢复播放 SAVED · 省掉"找"的过程 改后 系统替用户消化掉 · 3 步 起点 在公播页 想切到覆盖外 1 点音源切换控件 位置稳定 · 不需要找 2 点目标应用 弹出菜单中选择 3 重新点播放 恢复播放 改前 5 步 改后 3 步 SAVED · 节省 "找"的成本 不只是步骤数

下一步:让公播把音源直接交给应用接管,用户播控不中断。需要应用侧二次适配,正在推进中。

06 · The Bigger Picture · 项目地图

音乐小窗只是更大多媒体系统的一环

同一套方法,我也用在了其他媒体业务上。

Project Summation · 项目沉淀

这个项目里我做的
不是几个界面,是音乐在车机里的行为规则

13 种音源、3 块屏幕、多种场景、两代后排框架——所有判断都守在三条主线上。

01
一致性 · 对用户
让 13 种音源看起来一样

三屏框架与应用内一致、封面模式作为默认态、阅读落点跨音源稳定——让小窗在任何音源下都是可预期的容器。

02
差异化 · 对系统
让 13 种音源被区别对待

识别颗粒度从类别级推进到任务级、能力级开放给三方应用——让系统真正知道每种音源需要什么。

03
协调性 · 对系统组件
让多个承载一起守住体系

黑盒边界定义、公共播放器在体系里的角色、后排两代框架的承载思维一致——让小窗、应用、公播之间的关系是设计过的,不是拼出来的。