音乐模块 · 界面改版对照稿

左边是当前实现的实际问题,右边是按建议方案重排后的目标形态。改版要点见下方图例。

红/橙标记 = 缺陷位置
Thing
我的音乐发现音乐下载任务设置
我的音乐发现音乐下载任务设置
飞牛曲库本地曲库我的歌单 ← 第二套切换控件,与上一行风格不同 3
下载到 本地目录 ▾ 下载到本地目录(musicdl) 1
输入歌名 / 歌手 / 专辑关键词
已选 3 个源 ▾ 搜索
粘贴歌单链接(网易云 / QQ 音乐等) 解析歌单
海阔天空 无损 flac 32.4 MB 320K mp3 +2
Beyond · 乐与怒
05:21 25
光辉岁月 Hi-Res flac 96.1 MB 192K mp3
Beyond · 命运派对
04:58 2
喜欢你
Beyond · 秘密警察
04:35 6
每行都是独立圆角卡片 + 8px 间距;一行内 6~8 个视觉元素,彩色徽标抢过歌名。
未播放
选择一首歌曲开始播放
--:--
--:--
🔊
4
7 8
Thing
曲库发现音乐下载任务设置
3
搜索歌名 / 歌手 / 专辑
全部来源 ▾ 全部音质 ▾ 排序 ▾ 扫描本地 ▶ 播放全部 1
#标题专辑时长
海阔天空
Beyond · 1993
乐与怒
05:21
2
光辉岁月
Beyond
命运派对
04:58
3
喜欢你
Beyond
秘密警察
04:35
4
冷雨夜
Beyond
现代舞台
04:12
5
真的爱你
Beyond
Beyond IV
04:41
行高 44px、无独立边框、hover 高亮、双击整行播放;播放中行用主色竖条 + 均衡器表示,不再用“选中框”。 2

海阔天空

Beyond · 乐与怒

今天我 寒夜里看雪飘过 怀着冷却了的心窝漂远方 风雨里追赶 雾里分不清影踪 天空海阔你与我 可会变(谁没在变)
右栏“正在播放”可折叠(窄窗口自动收起)
海阔天空
Beyond · 乐与怒
4
🔀❚❚
01:12
05:21
拖动只更新预览,松手才 seek;轨道含缓冲层,hover 加粗到 8px
5 🔊
1
首屏信息层级

“下载到 本地/飞牛”不再独占一行卡片,收进工具栏;搜索框回到首行黄金位置。

2
列表密度与徽标降噪

卡片堆 → 44px 紧凑表格行;音质徽标从 5 色降为 1 类中性 outline,档位详情收进 ⋯ 菜单。

3
两级横向 Tab → 左侧来源树

模块级 Tab + 子 Tab 合并为一条来源树,导航层级从三层降到两层。

4
播放条全宽贴底

MiniPlayer 提升到 App 全局层:任何模块都能控制播放;离开音乐模块不再丢失控制入口。

5
进度与音量交互

提交式 seek + 缓冲进度层;音量图标可点静音;滑块配色改走主题 token(原为硬编码纯白)。

6
来源与来源标识统一

本地/NAS/歌单混排时用统一图标标识来源,不再靠行内小标签。

7
内边距不对称

模块左 28px / 右 40px(含滚动条),卡片右边距明显偏窄;统一为 24px 并保留滚动条槽位。

8
播放条未贴底

被模块 p-6 包住,分隔线左右各缩进 24px,读作“漂浮卡片”而非底部坞站。