AISongGen logoAISongGen

四套主题,一首歌——用色彩设计播放器

为什么 aisonggen 同时上线四套等权重的主题,而不是一套标准外观,以及这个决定如何改变了听歌界面。

阅读 6 分钟

音乐工具的默认外观会决定人们用它做什么风格的音乐。 一套黑紫合成器工具会把人推向合成器音轨,一套暖纸民谣工具 会把人推向民谣音轨。我们希望 aisonggen 对风格保持中立, 所以入口就摆了四套地位平等的主题。

我们最终选定的四种基调

  • 声波青——冷静、临床的默认款。看上去像午夜过后的母带工作室。 适合 ambient、techno,以及那些更像建筑而非叙事的歌曲。
  • 霓虹橙——喧闹、灼热的那一套。品牌默认款。看上去像凌晨 两点的夜店出口。适合 trap、hyperpop,以及一切以能量本身为主角的音乐。
  • 录音棚黑——安静而昂贵的那一套。炭灰配金。看上去像一台 皮革包裹的吉他音箱。适合 jazz、soul,以及想被认真对待的创作型歌手作品。
  • 电气品红——俏皮的那一套。粉色加铬。看上去像 Y2K 音乐 MV 的内部。适合 pop、dance,以及那种允许笑点摆在台面上的音乐。

四套主题的代价

为一套主题做设计,是关于对比、层级、强调的上千个小决策。 为四套做设计,是同一批上千决策做四遍——而且必须落在同一个 组件上不出问题。我们让这件事变可控的方法,是把所有颜色搬进 token 系统:组件本身永远不引用 hex 色值,只引用角色: --primary--accent--bg-elevated。 主题切的是值,组件本身完全不动。

它带来的回报

一个我们没预料到的结果:人们开始按风格情境选主题, 而不是按个人审美。一个做 trap 的制作人,哪怕默认是声波青, 做这首时也会切到霓虹橙。主题切换不再是一个设置项下拉框, 而成了工作流的一部分——一种把房间调到当下这首歌该有的氛围里的方式。

关于无障碍

四套主题在文字对比度和聚焦边框上都达到 WCAG AA。 没有一套依赖颜色单独传达状态——任何激活态都会同时改变形状、 字重或位置。看不出声波青与霓虹橙颜色差别的用户, 依然能判断一个按钮是否被按下。

下一首作品,离一段免费提示词只差一步

打开工作室,输入氛围,30 秒后听到成品。免费起步、免版税出片、无需绑卡。