以錘子科技 Smartisan 風格為藍本，教你用極簡幾何語言繪製極具辨識度的音樂播放器 App 圖標。核心技法：基礎幾何體布爾運算建模 + 統一圓角半徑體系 + 雙色調漸層系統 + 精準像素對齊。適合 UI 設計師快速掌握品牌級圖標設計規範。

設計規範與視覺語言

• 幾何純粹性：圓、正方形、圓角矩形三大基本元素組合，零手繪自由曲線。
• 圓角體系：大圓角 12px(外輪廓)、中圓角 6px(功能區)、小圓角 2px(細節)，全局統一。
• 雙色調漸層：主色 #FF6B00(錘子橙)→ #FF9500(暖黃) 線性漸層 90°；輔色 #FFFFFF → #F0F0F0 亮面漸層。
• 像素完美：所有關鍵尺寸為偶數，關鍵坐標落在像素網格，確保導出無模糊。

繪製步驟拆解

步驟 1：外輪廓 —— 圓角正方形

畫布 1024×1024px。圓角矩形工具，半徑 12px，繪製 800×800px 基礎形狀，置中。填充：線性漸層 #FF6B00 → #FF9500 (90°)。描邊：無。

步驟 2：唱片主體 —— 同心圓系統

• 外圓：直徑 560px，填充 #1A1A1A(深空灰)，描邊 2px #333333(內側)。
• 中圓：直徑 480px，填充 #0D0D0D，無描邊。
• 內圓：直徑 120px，填充 #FF6B00(品牌橙)，描邊 1px #FF9500(內側)。
• 中心孔：直徑 40px，扣除(減去頂層形狀)，透明。

步驟 3：播放三角 —— 幾何構造

• 多邊形工具，3 邊，半徑 80px，向上指向，置中於內圓。
• 填充 #FFFFFF，不透明度 90%。
• 添加內發光效果：螢幕模式、#FF6B00、不透明度 40%、大小 8px，模擬發光感。

步驟 4：聲波動態標識(可選動態版)

• 三條弧線：橢圓工具畫弧，描邊 4px #FF6B00，端點圓頭，漸變不透明度(內強外弱)。
• 置於播放三角右側，形成「聲音傳播」視覺隱喻。

步驟 5: 細節潤飾與導出規範

• 全局添加細微內陰影：頂部 1px #FF9500(高光邊)、底部 1px #CC4400(陰影邊)，增強壓紋感。
• 導出規格：iOS 1024×1024、512×512、180×180、120×120、87×87、80×80、58×58、40×40、29×29；Android 512×512、192×192、144×144、96×96、72×72、48×48。全部 PNG-24，sRGB。
• 命名規範：`icon_@x.png` (iOS) / `ic_launcher_.png` (Android)。

進階：構建品牌圖標設計系統

1. 建立元件庫：將外輪廓、唱片體系、播放三角、聲波標識做成 Symbol/元件，支援嵌套覆寫。
2. 定義設計 Token：色彩 Token、圓角 Token、間距 Token、陰影 Token，用 Figma/Sketch/Adobe XD 管理，一鍵換膚。
3. 動態延展：在 Principle/After Effects/Lottie 中實現：點擊播放 → 三角變暫停雙豎條 → 聲波弧線脈動展開 → 專輯封面旋轉。
4. 無障礙適配：提供高對比度版本(漸層改純色)、減弱動態版本(關閉聲波動畫)、深色模式適配(背景色自適應)。

💡 設計師進階心法：優秀的品牌圖標不是「畫」出來的，是「定義」出來的。從幾何規範、色彩體系、動態語言、導出流程、無障礙標準五個維度建立設計系統，才能支撐品牌長期演進。