myMusic · 播放按钮重设计

播放按钮,
只留一个轮廓。

现在的问题不是“方”或“圆”本身,而是播放态的圆角方形外面又套了一层波浪圆环。下面六版都取消方圆切换;播放状态交给图标,进度要么退到整条播放栏底部,要么融入按钮本身。点击任意播放键即可同步预览。

状态
38%

现在

两层轮廓互相争抢

34dp 播放态圆角方形,外套 52dp 波浪进度环。方形随状态变化,圆环又持续起伏,视觉重心很碎。

B

封面就是播放键

把圆形封面作为按钮,图标直接叠在封面上。播放时封面慢转,暂停图标保持正向,让歌曲本身成为主操作。

适合:迷你条、音乐氛围优先的场景。深色封面需要保留图标阴影。

56dp 近景
C

只留图标

去掉容器和圆环,48dp 点击区里只显示一枚主色图标。进度放到底线,整个控制区最干净。

适合:底部栏、次级播放窗格。主操作层级较弱,不建议直接用于大播放页。

56dp 近景
D

动作写进胶囊

固定胶囊不再变形,图标旁直接写“播放 / 暂停”。用户不需要理解形状暗语,遥控器远距离看也最明确。

适合:电视、无障碍优先。手机迷你条上会挤压歌名宽度。

56dp 近景
E

把进度装进圆钮

外轮廓始终是圆,主色从左向右填充表示进度。图标用明暗两层同步裁切,跨过填充分界时也能保持对比。

适合:仍想让进度贴着播放键的人。实现比 A 复杂,小尺寸下填充分界更醒目。

56dp 近景
F

七瓣单轮廓

沿用播放页 MaterialShapes 的形状语言,但按钮始终固定为七瓣,不再随状态变方。进度放到底线。

适合:想保留 Expressive 个性的方案。建议至少 40dp,更小尺寸会显得细节偏多。

56dp 近景

建议先上 A,
E 留作备选。

A 的改动最小,也最耐看:播放键固定圆形,状态只切换三角形与双竖线;迷你条底部的 2dp 线性进度替代按钮外的波浪环,Mini / Small / Medium 三档继续共用。若一定要保留“进度贴着播放键”的关系,再选 E。

方向按钮轮廓进度位置优点主要代价
A · 圆钮固定圆形整条播放栏底部清晰、稳定、三端通用进度不再围绕播放键
B · 封面固定圆形封面整条播放栏底部歌曲识别度最高图标需要额外保证对比度
C · 图标无可见容器整条播放栏底部最轻、最安静主操作不够突出
D · 胶囊固定文字胶囊整条播放栏底部动作最明确占用横向空间最多
E · 内嵌进度固定圆形按钮内部水平填充只有一个轮廓,仍保留局部进度双色图标裁切实现较复杂
F · 七瓣固定 MaterialShapes整条播放栏底部与大播放页形状语言统一小尺寸辨识度一般