QQ 音乐大屏 UI 规格
QQ 音乐页面以推荐、搜索、个人资产、智能电台和正在播放为核心。共享视觉、按键、Footer Legend 和宿主安全规则见 steam-deck-ui-rules.md。
全局结构
- 顶部内容首行:QQ 音乐 Logo、顶层 Tabs、
L1/R1提示、当前播放状态徽章。 - 内容区:按当前 Tab 渲染全宽页面,不保留常驻左侧栏。
- 播放控制:无底部固定 MiniPlayer;
Start盲操播放 / 暂停,Y打开队列浮层,完整控制在“正在播放”或“智能电台”页。 - 登录:QQ 基本播放依赖扫码登录态。未登录时,播放相关入口显示登录提示或跳转扫码登录,不渲染空个人资产。
顶层页面
| 页面 | 目的 | 关键交互 |
|---|---|---|
| 推荐 | 默认入口,展示个性化推荐、新歌和智能电台入口。 | A 播放或进入,X 更多操作,L1/R1 切页。 |
| 搜索 | 主动找歌入口。 | 搜索框 A 唤键盘;结果行 A 播放,X 菜单;L2/R2 翻页或切分类。 |
| 我的音乐 | 登录态资产入口。 | 二级 Tab 展示红心、最近、自建、收藏;内容区全宽列表 / 网格。 |
| 智能电台 | “猜你喜欢 / 雷达推荐”沉浸播放。 | 无上一首;Y 红心,X 下一首,Start 播放 / 暂停。 |
| 正在播放 | 封面、歌曲信息、同步歌词和完整播放控制。 | 十字键上下手动滚动歌词,左右微调进度;B 恢复自动跟随。 |
推荐页
结构:
- 顶部两张大入口卡:猜你喜欢、雷达推荐。
- 中部推荐歌单横向条带或网格。
- 下方新歌 / 推荐歌曲网格。
- 顶层 Tab 行右侧状态徽章显示当前播放,不参与焦点。
数据要求:
| 数据 | 用途 | QQ API |
|---|---|---|
| 推荐歌单 | 首页条带 / 网格。 | recommend.get_recommend_songlist,待 provider 暴露。 |
| 新歌 / 推荐歌曲 | 首页歌曲网格。 | recommend.get_recommend_newsong,待 provider 暴露。 |
| 猜你喜欢 | 智能电台入口。 | recommend.get_guess_recommend,待 provider 暴露。 |
| 雷达推荐 | 智能电台入口。 | recommend.get_radar_recommend,待 provider 暴露。 |
| 封面缩略图 | 前端直接加载 CDN 缩略图,失败显示占位图。 | 现有 _song_brief() 可拼装。 |
搜索页
结构:
- 顶部搜索框和提交按钮。
- 分类 Tab:单曲、歌单、专辑、歌手。
- 结果列表:歌名、歌手、专辑、时长、VIP / HQ 标识。
交互:
- 搜索框按
A唤起软键盘。页面无底部固定栏,避免键盘压缩视口时遮挡内容。 - 单曲结果按
A播放,并按当前搜索结果建立普通队列。 - 结果行按
X打开上下文菜单。 - 长结果集用
L2/R2翻页;分类切换如也使用L2/R2,翻页需落到列表焦点内才生效。
我的音乐
采用 Steam 官方库页面范式:全宽二级 Tab 行 + 全宽内容区。
未登录:
- 显示扫码登录入口或提示从 QAM 登录。
- 不渲染空红心、歌单、收藏列表。
已登录:
- 不重复大头像 / 大横幅;账号信息放 QAM 或小型状态区。
- 二级 Tab 带计数徽章:我喜欢、最近播放、自建歌单、收藏歌单、本地缓存(后置)。
- “我喜欢”Tab 使用全宽高密度歌曲列表。
- 自建 / 收藏歌单 Tab 使用全宽封面网格。
L2/R2或十字键左右切二级 Tab,十字键向下进入内容区。
智能电台
“猜你喜欢”和“雷达推荐”共用同一个沉浸播放器,但入口和模式标识必须明确。
规则:
- 不提供上一首。
- 当前批次播到阈值时由 bridge / provider 拉下一批。
- 页面只保留三类主要操作:红心、播放 / 暂停、下一首。
Y可覆盖为红心,X可覆盖为下一首;Footer Legend 必须显示覆盖后的真实语义。- 不显示全局队列浮层里的未来曲目,保持电台未知感。
正在播放
布局:
- 左侧三分之一:大封面、歌名、歌手、VIP / HQ 标识。
- 右侧三分之二:同步歌词;当前行高亮,非当前行暗化。
- 下方或左侧控制组:进度、音量、上一首 / 下一首、播放模式。该页是完整控制入口。
交互:
- 十字键上下进入歌词手动滚动。
- 十字键左右在进度滑块上微调。
B或超时恢复歌词自动跟随。Start始终播放 / 暂停。
上下文菜单和队列
歌曲行和歌单卡片通过 X 打开菜单。P3 最小菜单项:
- 下一首播放。
- 添加到队列末尾。
- 收藏到歌单。
- 查看歌手或专辑。
菜单项不可用时要禁用或隐藏,不显示会失败的入口。普通页面按 Y 打开队列浮层;智能电台页可覆盖 Y,队列入口改为页内按钮或不展示未来曲目。
P3 API 缺口
| 能力 | UI 用途 | 状态 |
|---|---|---|
| 推荐歌单 | 推荐页条带 / 网格。 | 待暴露 get_recommend_songlist。 |
| 新歌或推荐歌曲 | 推荐页歌曲网格。 | 待暴露 get_recommend_newsong。 |
| 猜你喜欢 / 雷达推荐 | 智能电台。 | 待暴露 get_guess_recommend / get_radar_recommend。 |
| 搜索分类 | 搜索页单曲 / 歌单 / 专辑 / 歌手 Tab。 | 待扩展 search_by_type。 |
| 搜索联想 / 热词 | 输入前或输入中提示;可后置。 | 待暴露 complete / get_hotkey。 |
| 我喜欢的音乐 | 我的音乐核心入口。 | 待暴露 user.get_fav_song。 |
| 自建 / 收藏歌单 | 我的音乐资产区。 | 待暴露 get_created_songlist / get_fav_songlist。 |
| 歌词 | 正在播放页同步歌词。 | 待暴露 lyric.get_lyric。 |
| 收藏到歌单 | 上下文菜单操作。 | 待暴露自建歌单列表 + songlist.add_songs。 |
| 歌手 / 专辑详情 | 上下文菜单跳转;可后置。 | 待暴露 singer.get_info / album.get_detail。 |
验收
- 未登录时,不渲染空资产或会失败的播放入口。
- 纯手柄能完成推荐播放、搜索播放、上下文菜单、队列浮层、正在播放页控制。
- 智能电台没有上一首入口。
- 软键盘弹出时没有底部播放条被顶起。
- 后端返回缺字段、空列表、不可播歌曲时 UI 保持可恢复错误态。