DECKYMUSIC
开发文档Docs › QQ 音乐界面规格QQ Music UI spec

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 最小菜单项:

  1. 下一首播放。
  2. 添加到队列末尾。
  3. 收藏到歌单。
  4. 查看歌手或专辑。

菜单项不可用时要禁用或隐藏,不显示会失败的入口。普通页面按 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 保持可恢复错误态。

在 GitHub 上查看 / 编辑此文档View or edit this page on GitHub ↗