CloudSound 播放器移动端体验重构记录

从 YesPlayMusic 到 CloudSound：一次播放器移动端体验重构

CloudSound 是我基于开源项目 YesPlayMusic 做的二次开发版本。今天这轮主要聚焦在底部播放器：它在 PC 端看起来还不错，但一旦进入手机或窄屏尺寸，按钮会拥挤、偏移，弹窗也容易遮挡播放器。

问题背景

底部播放器原本包含很多能力：

• 播放 / 暂停
• 上一首 / 下一首
• 播放列表
• 循环播放
• 随机播放
• 音量
• 音质选择
• 均衡器
• 歌词入口

这些功能在桌面端横向铺开问题不大，但移动端宽度有限，如果继续把按钮塞进一行，就会出现明显问题：

• 第二行、第三行控件整体偏左。
• 播放控制按钮组不再视觉居中。
• 音量条占用横向空间。
• 歌词按钮挤在右侧工具区里。
• 音量弹窗容易被播放器圆角卡片裁剪。

解决思路

这次没有继续靠 margin-left 或 .blank 去硬推布局，而是重新梳理按钮职责。

播放器底部可以拆成三类：

• 当前播放信息：封面、歌曲名、歌手。
• 核心播放控制：播放模式、上一首、播放/暂停、下一首、歌词。
• 工具控制：播放列表、音量、音质、均衡器。

这个拆分之后，移动端排版就清楚了：核心播放控制必须稳定居中，工具控制单独占一行。

播放模式合并

原来循环播放和随机播放是两个独立按钮。移动端空间紧张，所以我把它们合并成一个播放模式按钮。

切换顺序是：

顺序播放 -> 随机播放 -> 循环播放 -> 顺序播放

这样做的好处是减少一个按钮，同时保留常用播放模式。

歌词按钮移入中间控制组

歌词按钮原来在右侧工具组里，会让工具区更拥挤。现在它被移动到中间播放控制组中，但不影响播放按钮居中。

实现方式是三列 Grid：

[左侧占位] [播放核心按钮组] [歌词按钮]

中间列放播放核心按钮组，右侧列放歌词按钮。这样视觉上播放按钮仍然稳稳居中。

音量控制改为弹窗

横向音量条在移动端很占空间，所以改成类似 QQ 音乐的交互：

• 底部只展示音量图标。
• 点击后弹出竖向音量面板。
• 面板中有音量滑杆、百分比、静音按钮。

移动端播放器卡片仍保留圆角视觉，但允许音量弹窗向外溢出，避免被裁剪。

多分辨率审查

这次改完后，我没有只看一个尺寸，而是审查了多个断点：

• 390x844
• 430x932
• 778x912
• 820x912
• 1280x720

重点检查：

• 是否横向溢出。
• 播放核心按钮组是否居中。
• 歌词按钮是否在中间控制组右侧。
• 音量弹窗是否可见。
• 音量弹窗是否遮挡 controls。

最终结果是：五个尺寸下均无横向溢出，播放核心按钮组中心偏移为 0，音量弹窗可见且不遮挡 controls。

桌面端打包

完成移动端播放器调整后，我也尝试将当前版本打包为 Windows 桌面端。

项目使用 Electron Builder 打包，命令为：

npm run electron:build-win

第一次打包时需要下载 Electron 运行时和 NSIS 等构建资源，因此网络环境会直接影响打包是否成功。下载完成后，项目成功生成了便携版、安装版和解压版桌面端产物。

小结

这次重构最大的收获不是“把按钮挪了位置”，而是重新划分了播放器里的功能层级。

移动端适配不是简单缩小元素，而是要判断哪些功能属于主流程，哪些功能属于工具区。主流程要稳定、居中、可预期；工具区可以折叠、弹出、换行。

这也是 CloudSound 后续继续移动端适配时会遵循的原则。