AISongGen logoAISongGen

四種主題、一首歌——用顏色來設計播放器

為什麼 aisonggen 一上線就帶著四種權重相等的主題,而不是單一的標準外觀,這個決定又改變了聆聽介面什麼。

閱讀 6 分鐘

音樂工具的預設外觀,會悄悄決定使用者在裡面 做出什麼樣的音樂。一個黑紫色調的 synth 工具會把人 推向 synth 曲;一個暖紙質感的民謠工具會把人推向民謠。 我們想讓 aisonggen 對曲風保持中立,所以它有四種 主題,全部平起平坐地擺在大門口。

我們最後落腳的四種氛圍

  • Sonic Teal——冷調、臨床感的預設。看起來像 午夜過後的母帶後製室內部。最適合 ambient、 techno,以及任何把歌當建築而非故事的場合。
  • Neon Orange——大聲、火熱的那一個。也是品牌預設。 看起來像凌晨兩點俱樂部出口。最適合 trap、hyperpop, 以及任何「能量本身就是重點」的曲子。
  • Studio Black——安靜而昂貴的那一個。炭灰加金。 看起來像一台用皮革做的吉他音箱。最適合 jazz、soul, 以及那些想被認真對待的創作歌手作品。
  • Electric Magenta——好玩的那一個。粉紅加鉻。 看起來像 Y2K 時期一支音樂錄影帶的內部。最適合 pop、 dance,以及任何「玩笑可以放明顯一點」的曲子。

這些主題讓我們付出的代價

為單一主題做設計,是上千個關於對比、層級、 強調的小決定。為四種主題做設計,是同樣這上千個 決定要做四遍——而且必須落在同一個元件上而 不會壞掉。我們讓它變得可控的方法,是把所有 顏色都搬進 token 系統,元件本身永遠不直接寫 色碼,只引用角色:--primary--accent--bg-elevated。主題改的是值; 元件完全不變。

這些主題給了我們什麼

我們沒料到的是:使用者開始按曲風脈絡 挑主題,而不是按個人喜好。一個正在處理 trap beat 的 製作人,即使預設是 Sonic Teal,也會切到 Neon Orange。 主題切換器不再是設定下拉選單,而是工作流程的 一部分——一種把房間調到當下這首歌的對的氛圍 的方法。

關於無障礙的一點補充

四種主題在文字對比與焦點環上都符合 WCAG AA。 它們都不單靠顏色來表達狀態——每一個 active 狀態 還會改變形狀、粗細或位置。一位看不出 Sonic Teal 和 Neon Orange 顏色差異的使用者,依然應該分得 出哪一顆按鈕被按下了。

你的下一首歌,只差一個免費 prompt

打開工作室、輸入氛圍,30 秒後聽見一首完整的歌。免費開始、免授權上架,不需信用卡。