From 70d2d4e1d035e1663d6495607a480aa238446d4a Mon Sep 17 00:00:00 2001 From: LFeng Date: Sat, 12 Sep 2026 15:59:46 +0800 Subject: [PATCH] =?UTF-8?q?=E5=88=A0=E9=99=A4=20music-redesign-mockup.html?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- music-redesign-mockup.html | 430 ------------------------------------- 1 file changed, 430 deletions(-) delete mode 100644 music-redesign-mockup.html diff --git a/music-redesign-mockup.html b/music-redesign-mockup.html deleted file mode 100644 index 2583ec9..0000000 --- a/music-redesign-mockup.html +++ /dev/null @@ -1,430 +0,0 @@ - - - - - -音乐模块 · 界面改版对照稿 - - - -
-

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

-

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

- -
-
- - -
- 红/橙标记 = 缺陷位置 -
- - -
-
-
- 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.2k - 本地曲库 318 - 我的歌单 7 -

其他

- 发现音乐 - 下载任务 2 - 设置 - 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，读作“漂浮卡片”而非底部坞站。

-
-
- - - -