建站纪事 / Field Radio/2026 · 10 · 12/5 分钟阅读
把电台从页面改成聆听空间
记录场域电台的这一轮本地迭代:从封面与歌词同屏,到纯净模式、曲目目录和更安静的音乐响应场景。
Field RadioCatalogueLyricsMotion
01
先把正在播放的歌放回中心
早期电台页把歌曲发现、播放信息和歌词分散在不同区域。访客需要在页面与悬浮控制器之间来回寻找同一首歌的状态。这一轮把曲目、封面、歌词和基本控制放进一个连续的画面:左侧找歌,中央看见当前作品,右侧跟随歌词。手机则优先呈现封面,再用标签切换目录和歌词。
目录经过几次调整,最终让曲目列表直接展示封面、歌名和歌手;搜索不再以先选歌手为前提。目录里明确标出当前曲目,并让列表本身可以滚动,避免看得见下一首却滑不到。
02
给专注聆听留一个入口
点击控制区的唱片可以进入纯净模式,画面收起普通页面的信息密度,留下球体、歌词、方格地面和必要的播放控制。目录没有被排除在外,而是变成覆盖在场景上的轻量面板;找歌之后可以直接回到正在播放的画面。此模式下隐藏网站顶栏,让听歌界面拥有完整的视觉空间。
歌词当前句放大,前后句退后,随播放进度平滑移动;没有可用歌词时,保留歌曲名和封面并说明原因。切换模式和曲目时,场景维持底色与轮廓,避免突然露出黑屏。
03
让方格听见节奏,也学会停下
最初让大量方格同时起伏,画面显得拥挤。后来把响应限制在局部,并把雨滴作为另一个稀疏的触发源:落点附近的方格抬起,涟漪沿网格向外减弱。颜色改为同色系的柔和深浅,雨滴频率与涟漪传播分别控制。它们不需要每一拍都出现,少一些变化反而让单次落点更清楚。
这一轮工作的判断标准不是动效数量,而是暂停时画面能否安静地停住、切歌后能否保持连续,以及访客是否始终找得到目录、歌词和退出入口。它仍是本地持续打磨的界面,后续将继续围绕实际聆听感受调整。