圖標設計不僅是繪製，更是「觀察→分析→簡化→重構」的產品思維過程。本教程以一款古董 MP3 為參考，通過草圖推演交互邏輯，最終在 Photoshop 中純向量繪製一枚具備金屬質感、圓角扇形按鍵、程序化紋理的極簡播放器圖標。適合 UI 圖標設計入門與進階。

前期觀察與草圖推演

• 實物觀察：一體式按鍵缺乏科技感 → 決定拆分為五獨立按鍵（播放/暫停、音量+/-、上/下曲）。
• 草圖階段：圓珠筆+筆記本頁快速推演輪廓比例、按鍵佈局、透視關係，不求精美，求邏輯通順。

Photoshop 精細繪製流程

1. 畫布與背景質感

• 新建 1000×600px，前景白 #ffffff、背景淺灰 #cfcfcf，徑向漸變（中心亮→邊緣暗）。
• 濾鏡 > 雜色 > 添加雜色（1%、高斯、單色），強化材質顆粒感。

2. 同心圓結構體系（外圓→內圓→播放鍵）

• 外圓：450px 正圓 #cecece，圖層樣式：斜面與浮雕（外凸）、內陰影、漸變疊加（金屬拉絲）、投影。
• 內圓：400px 正圖，圖層樣式：斜面與浮雕（內凹）、內陰影、顏色疊加（深灰）、漸變疊加，構建凹陷轨道感。
• 播放鍵：180px 正圓，圖層樣式：斜面與浮雕（外凸）、內陰影、漸變疊加（金屬高光）、外發光（微弱呼吸感）。
• 三圓對齊面板「水平/垂直居中對齊」，確保同心精準。

3. 圓角扇形按鍵——創意形狀構建技巧

需求：四個方向按鍵，形狀為「圓角扇形」（比尖銳扇形更友好、科技感）。

1. 圓角矩形工具繪製 130×75px 圓角矩形（圓角半徑默認）。
2. 編輯 > 變換 > 扭曲 > 扇形，彎曲 45°，獲得圓角扇形。
3. 經驗值：圓角矩形扇形變形後長度約擴展 1.7 倍，高度不變，預估尺寸需反推計算。
4. 微調位置至內圓環中心 → Ctrl+T 中心點設畫布中心、旋轉 90° → Ctrl+Alt+Shift+T 連續複製變換三次，得四方向按鍵（每個獨立圖層）。

關鍵技巧：直接選擇工具選中路徑變換會複製路徑而非新建圖層；必須用移動工具選中整個圖層執行 Ctrl+Alt+Shift+T，確保四按鍵獨立圖層、可分別賦予不同圖層樣式。

4. 四按鍵差異化圖層樣式（功能語義化）

• 上：音量+ 高光最強、邊緣最亮，視覺權重最高。
• 右：下一曲 右側高光增強，暗示「向前」。
• 下：音量- 高光最弱、邊緣最暗，視覺後退。
• 左：上一曲 左側高光增強，暗示「向後」。
• 核心參數差異：斜面與浮雕「高光/陰影模式不透明度」、內陰影「距離/大小」、漸變疊加「角度/不透明度」。

5. 按鍵圖標繪製（基本形狀布爾運算/組合）

播放▶、暫停❚❚、音量±、上/下曲箭頭，均由矩形、三角形、直線等基本形狀組合/減疊而成，純向量、可無限縮放。

成果展示與複用建議

• 保存為 .psd 模板：修改「漸變」圖層樣式顏色即可產出深色/淺色/品牌色多主題版本。
• 導出 .asl 樣式庫：一鍵套用至其他圖標組件。
• 向量形狀可直接複製至 Illustrator/Figma/Sketch 繼續編輯，跨工具協作無損。

「理解著做，而非照抄」。圖標設計核心在於結構邏輯與光影模型的建立，工具只是表達手段。建議嘗試用相同邏輯繪製「設定齒輪」「搜尋放大鏡」「麥克風」等圖標，建立個人圖標設計系統。