Nexus 播客
每周一期，聊设计与前端的协作现场，单集 30–45 分钟。
第 12 期 · 已听 14:32
128 期
Media / 04
音频播放器
音频条只有三件事需要说清楚：现在放的是什么、放到哪儿了、还能怎么操作。均衡器给出「正在响」的反馈，歌词行负责把听众钉在内容上，电台卡片则承担列表入口。
标准播放条
.aplayer / .ap-ic / .ap-body第 12 期 · 组件库的维护成本
Nexus 播客 · 主播 陈嘉禾 / 林晓棠
14:32 / 38:06 · 剩余 23:34
进度
轨道 4px，已播部分用主色填充；外层 data-bar 给出目标百分比，进入视口后会自动补齐宽度。
时间
等宽字体显示「已播 / 总长」，需要时再补一个「剩余」，避免只给一个无法估算的百分比。
均衡器
五根细柱各自循环升降，是「正在出声」最省空间的表达，暂停时整组隐藏或静止即可。
默认 · 迷你 · 带封面
同一结构，三种密度默认 · 完整播放条
城市夜行 · 第一章
05:12 / 08:04
图标 40px 圆角方块，标题、进度、时间自上而下排布，右侧留给状态与操作。
迷你 · 列表内联
晚风电台 · 第 07 期
02:41 / 26:15
深夜书房 · 白噪音
45:00 / 45:00
设计播报 · 第 31 期
00:00 / 31:20
迷你形态压掉进度条，只留标题与时间，适合放在列表行内，滚动浏览时不会喧宾夺主。
带封面 · 节目详情
设计如何降低沟通成本
从命名规范到组件边界，聊聊为什么同一份设计稿在不同团队手里会产出完全不同的结果。本期邀请到三位一线前端一起复盘。
11:42 / 42:18
封面 104px 圆角方块，标题、简介、进度与操作在右侧纵向展开；窄屏时封面与内容自动改为上下排布。
歌词滚动与音量
.lyric / .eq / .bar正在播放 · 逐行歌词
03:26
穿过一条没有名字的街
路灯把影子拉得很长
我数着每扇窗里的灯
有一盏亮着，像在等我
风把旧报纸吹到脚边
上面印着去年的秋天
我把手插进口袋
听见自己的脚步变得很轻
当前行加粗放大并用主色文字，其余行降为次要色；悬停任意一行会轻微提亮，方便手动跳转到该句。
音量
72%
静音最大
均衡器
播放中 · 五柱循环
暂停时降低不透明度
播放控制
电台与播客卡片
card + aplayer 组合晚风电台
深夜白噪音与城市环境音，适合写作与专注时循环播放。
第 07 期 · 02:41 / 26:15
循环中
设计播报
十分钟速览一周设计圈动态，通勤路上刚好听完。
第 31 期 · 未播放
31 期
.aplayer横向弹性容器，悬停时边框加深；尺寸、圆角与内边距由外层工具类决定
.ap-ic40px 反色方块，承载播放或暂停图标；迷你形态可用 !w-8 !h-8 压缩
.ap-progress4px 圆角轨道，已播部分用反色填充，配合 data-bar 进入视口后补齐
.lyric .ly-line歌词行，默认次要色，当前行加 .on 后加粗放大并转为主色文字