B
封面就是播放键
把圆形封面作为按钮,图标直接叠在封面上。播放时封面慢转,暂停图标保持正向,让歌曲本身成为主操作。
适合:迷你条、音乐氛围优先的场景。深色封面需要保留图标阴影。
56dp 近景
现在的问题不是“方”或“圆”本身,而是播放态的圆角方形外面又套了一层波浪圆环。下面六版都取消方圆切换;播放状态交给图标,进度要么退到整条播放栏底部,要么融入按钮本身。点击任意播放键即可同步预览。
34dp 播放态圆角方形,外套 52dp 波浪进度环。方形随状态变化,圆环又持续起伏,视觉重心很碎。
按钮固定为 40dp 圆形;2dp 进度移到整条迷你播放栏底部。圆钮更完整,进度仍然看得见,但不围着主操作打转。
把圆形封面作为按钮,图标直接叠在封面上。播放时封面慢转,暂停图标保持正向,让歌曲本身成为主操作。
适合:迷你条、音乐氛围优先的场景。深色封面需要保留图标阴影。
去掉容器和圆环,48dp 点击区里只显示一枚主色图标。进度放到底线,整个控制区最干净。
适合:底部栏、次级播放窗格。主操作层级较弱,不建议直接用于大播放页。
固定胶囊不再变形,图标旁直接写“播放 / 暂停”。用户不需要理解形状暗语,遥控器远距离看也最明确。
适合:电视、无障碍优先。手机迷你条上会挤压歌名宽度。
外轮廓始终是圆,主色从左向右填充表示进度。图标用明暗两层同步裁切,跨过填充分界时也能保持对比。
适合:仍想让进度贴着播放键的人。实现比 A 复杂,小尺寸下填充分界更醒目。
沿用播放页 MaterialShapes 的形状语言,但按钮始终固定为七瓣,不再随状态变方。进度放到底线。
适合:想保留 Expressive 个性的方案。建议至少 40dp,更小尺寸会显得细节偏多。
A 的改动最小,也最耐看:播放键固定圆形,状态只切换三角形与双竖线;迷你条底部的 2dp 线性进度替代按钮外的波浪环,Mini / Small / Medium 三档继续共用。若一定要保留“进度贴着播放键”的关系,再选 E。
| 方向 | 按钮轮廓 | 进度位置 | 优点 | 主要代价 |
|---|---|---|---|---|
| A · 圆钮 | 固定圆形 | 整条播放栏底部 | 清晰、稳定、三端通用 | 进度不再围绕播放键 |
| B · 封面 | 固定圆形封面 | 整条播放栏底部 | 歌曲识别度最高 | 图标需要额外保证对比度 |
| C · 图标 | 无可见容器 | 整条播放栏底部 | 最轻、最安静 | 主操作不够突出 |
| D · 胶囊 | 固定文字胶囊 | 整条播放栏底部 | 动作最明确 | 占用横向空间最多 |
| E · 内嵌进度 | 固定圆形 | 按钮内部水平填充 | 只有一个轮廓,仍保留局部进度 | 双色图标裁切实现较复杂 |
| F · 七瓣 | 固定 MaterialShapes | 整条播放栏底部 | 与大播放页形状语言统一 | 小尺寸辨识度一般 |