音樂工具的預設外觀,會悄悄決定使用者在裡面 做出什麼樣的音樂。一個黑紫色調的 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 顏色差異的使用者,依然應該分得 出哪一顆按鈕被按下了。