想自行設計一款精致小巧的音樂播放器介面嵌入網頁？這份教學將引導你完全使用圖層樣式，通過倒角浮雕、內發光、漸變疊加等非破壞性手法，逐層構建出具有真實質感的播放器外殼、按鈕、螢幕與圖示。掌握圖形層次邏輯，即可輕鬆駕馭各類 UI 圖標設計。

成品預覽

核心製作邏輯：圖層樣式疊加建模

1. 深色徑向漸變背景

新建文件，背景填充黑色，添加「徑向漸變」圖層樣式，從中心向四周過渡，營造舞台聚光氛圍。

2. 播放器主體：圓角矩形形狀圖層

使用圓角矩形工具 (半徑 20px) 繪製主體，勾選「創建新形狀圖層」以保留向量可編輯性。

3. 表面色彩與發光感

雙擊圖層開啟樣式面板，在「顏色疊加」選擇淺灰 #E1E0E0，賦予金屬拉絲質感。

4. 參考線輔助構建等寬斜面

拖出水平垂直參考線定位邊緣，確保後續斜面邊距一致，為立體倒角打好基礎。

5. 斜面圖層 0% 填充度技巧

複製主體圖層縮小形成內斜面，將「填充不透明度」歸零，僅保留圖層樣式產生的 2px 邊緣高光/陰影，極大簡化圖層結構。

6-11. 疊加描邊、內發光、漸變、斜面浮雕、內陰影

依序添加：1px 深色描邊分隔控制區、2px 內發光增強層次、柔性漸變模擬凸起曲面、MP3 標誌的擠壓斜面與浮雕光效、內陰影加深前表面厚度感。每一項樣式參數精細到像素級，共同構建照片級寫實質感。

12-17. 複製斜面快速生成按鈕群

複製主斜面圖層並編輯路徑，快速產生上一曲、下一曲、音量等控制按鈕。主播放/暫停鈕採用圓形路徑水平放大 10% 取斜面，配合 3px 羽化蒙版並勾選「圖層蒙版隱藏效果」，完美解決蒙版遮罩圖層樣式的難題。

18-22. 黑色亞克力螢幕與鏡面反射

螢幕區域疊加陰影斜面、徑向漸變 (黑 49%/白 50% 緊貼中心)、取消「與圖層對齊」擴大漸變範圍、1px 黑色描邊+2px 內發光營造鏡面高光，呈現銳利清晰的顯示效果。

23-28. 圖示文字與像素字體銳利顯示

控制圖標採用通用符號字體，文字使用像素字體並關閉「反走樣」保持銳利。淺浮雕樣式 (內陰影) 統一所有文字圖標質感，完成整套 UI 設計。