項目背景：15 天高強度迭代，重塑音樂客戶端視覺標桿

2011 年 7 月 QQ 音樂 2011 Beta 版確立品牌色「綠色」為默認主色調，綠色代表和平、希望、生長、環保，差異化於競品常見的黑/藍配色，提升識別度。2012 賀歲版項目自 12 月 31 日啟動，15 天完成設計與快速迭代，核心目標：圍繞綠色與細節進行全面體驗優化。

工作流變革：設計師主導的並行協作模式

傳統「產品→交互→視覺→開發」瀑布流無法適應 15 天工期。採用「設計師發揮最大主觀能動性，與產品/開發無縫對接，減少溝通成本，驅動更適合體驗落地」的並行模式。設計師深度參與需求定義、交互邏輯梳理、前端實現驗收，實現「設計驅動開發」。

設計理念：清新、精致、綠色——自然純粹的感官體驗

基於 2000+ 用戶問卷：41.6% 選「清新」（第一位），其次「陽光白雲飛翔」、「憂傷」。視覺關鍵詞鎖定：清新、精致、綠色，營造自然純粹、融入萬物的感官體驗。

綠色的重新提煉：尋找最接近春天的那抹綠

綠色在色盤上偏黃暖、偏藍冷。團隊針對不同感覺綠輸出多稿視覺，邀請內部人員選擇，發現：

• 男性偏好低明度深綠；女性偏好高明度嫩綠。
• 內向性格偏好低飽和度灰綠；外向性格偏好高飽和純正綠。

綜合界面配色、圖標適配、品牌傳達目標，最終選定偏暖、最接近春天的綠色作為基準色調，兼顧科技感與自然感。

圖標系統重構：飽滿造型、均衡視覺、換膚適配

• 造型飽滿：消除細碎細節，強化幾何基礎形，保證小尺寸下辨識度。
• 視覺均衡：所有圖標納入統一視覺重心校驗框，光學面積一致。
• 質感統一：單色、輕薄、邊緣清晰不銳利，適配換膚系統（深色/淺色/主題色模式）。
• 光源統一：90° 正上方光源，投影/高光邏輯一致。

界面深度優化：從宏觀佈局到微觀細節

1. 質感打磨：輕量化、透氣感、細膩度

弱化重邊框、重陰影、重質感，採用細微線條、淡漸變、半透明層疊，讓面板「呼吸」，減輕視覺負擔。

2. 頭部佈局：做減法，聚焦核心業務入口

梳理業務優先級，砍掉低頻入口，核心功能（搜索、推薦、我的）一層直達，減少認知負荷。

3. 文字圖標排版：四方向對齊法則

尋找左對齊、右對齊、頂對齊、底對齊四個方向的對齊點，建立無形對齊網格，實現視覺平衡與整潔。非關鍵文字弱化，關鍵操作強化。

最終效果與數據驗證

發版 2 個月後數據：日聽歌用戶數、安裝覆蓋率較上版本顯著增長。開發同學視覺還原高度配合，產品經理理解支持，是項目成功關鍵。

後記：自然賦予萬物聲響，音樂是人類獻給世間的第二自然

QQ 音樂作為情感與思想傳遞者，持續追求最完美音樂體驗。此次改版是經驗與力量的蓄積，未來在用戶體驗道路上將做得更好。