最終效果圖：

本教程完整演示一款深色系音樂播放器介面的 Photoshop 設計流程，涵蓋：背景紋理程序化生成、主框架圖層樣式堆疊、自定義紋理置入與混合模式、高光/陰影精細控制、進度條/拖動按鈕/音量條等交互組件樣式標準化、按鈕三狀態（正常/懸停/按下）樣式邏輯、倒影效果製作、整體色調擴展。適合 UI 設計師建立設計系統組件庫、學習深色介面質感營造技巧。

11 步驟核心構建流程

1. 背景：程序化紋理生成

• 新建 600×400 px，徑向漸變 #1A1A2E（中心）→ #0D0D1A（邊緣）。
  「濾鏡＞雜色＞添加雜色」（105%，均勻分布、單色）製造顆粒感。
  

2. 主框架：圓角矩形 + 複合圖層樣式

• 新建圖層，圓角矩形（半徑 5 px），填充 0%。添加樣式：
  - 倒角與浮雕：外部倒角，深度 150%，大小 5 px，高光 #3A3A4A 30%，陰影 #000000 60%。
  - 內陰影：距離 2 px，大小 4 px，#000000 50%。
  - 漸變疊加：線性 #2A2A3E→#1A1A2E，角度 90°。
  - 描邊：1 px，#0A0A1A，內部。
  

3. 內嵌紋理：自製金屬拉絲置入

• 新建 600×600 px 文件，填 #767676 → 雜色 80% 高斯單色 → 徑向模糊 100% 旋轉最佳 → Ctrl+F 疊加一次。拖入主文檔，模式「疊加」，貼合框架形狀（蒙版）。
  

4. 框架邊緣高光線：1px 筆觸 + 蒙版柔化

• 新建圖層，1 px 鉛筆畫直線（頂/底邊）。添加蒙版，黑色柔邊筆刷 50% 不透明度擦除兩端，製造「中間亮、兩端淡」高光線。
  

5. 內側裝飾條：圖案疊加 + 內陰影 + 雙高光

• 框架內兩側矩形，添加「圖案疊加」（細線條紋理），內陰影向內過渡，內部再加兩條 1 px 白高光線（模式「線性減淡」）。
  
• 三小按鈕（上一曲/播放/下一曲）：圓形/三角形狀，圖層樣式統一：倒角浮雕（內部，大小 3px）、漸變疊加（#3A3A4A→#1A1A2A）、描邊 1px #0A0A1A、投影 1px。圖標放大繪製，完成後縮放，添加 1px 向下投影。
  

6. 顯示區：內嵌矩形 + 多層次高光/分隔線

• 內側矩形漸變 #303A44→#4A5968。頂部 1px 白線 54% 不透明度，底部 1px 高光。內部長條白色區域 3% 不透明度（細微分隔）。
  Ctrl+點擊矩形縮圖載入選區，新建層白色柔邊筆刷點一下 → 高光點。
  

7. 文字與進度條：字體選擇與組件標準化

• 時間數字：DS-Digital（七段顯示風）。歌曲資訊：系統字體。
  進度條：圖層樣式描邊 1px #4A545D，內部漸變。拖動按鈕：內發光 + 描邊。
  

8. 音量控制區：鋼筆繪製弧形滑塊 + 樣式分離技巧

• 鋼筆繪製弧形滑軌，樣式：漸變疊加 #4D5C6A→#2C2329→#303A43，描邊 #50575D。
  技巧：下方描邊多餘 → 「圖層＞圖層樣式＞創建圖層」分離樣式圖層 → 刪除下方描邊圖層多餘段 → 給分離圖層重新加描邊 #030A12。添加高光點綴。
  

9. 底部功能按鈕組：統一樣式 + 內發光邊緣柔化

• 四小按鈕統一：漸變疊加 + 描邊 + 內發光。
  內發光分離圖層後刪除下方，只留上邊高光，蒙版柔化邊緣。文字 Arial。
  

10. 音量圖標與條：鉛筆繪製 + 共用樣式

• 音量圖標放大用鉛筆工具像素級繪製。樣式與播放按鈕共用。
  音量條類進度條，上方 10 顆球：前 6 顆共用播放按鈕樣式，後 4 顆深灰→灰漸變（禁用狀態視覺區分）。
  

11. 倒影與色調擴展

• 隱藏背景，頂層蓋印圖層 (Ctrl+Alt+Shift+E) → 垂直翻轉 → 兩側添加半圓修飾 → 高斯模糊 1-2 px → 蒙版黑白漸變淡出。
  
• 擴展：頂層新建填充任意色，模式「疊加」，一鍵換膚。
  

設計系統輸出建議

• 將框架、按鈕、進度條、滑塊、文字樣式分別存為「圖層樣式庫」與「智能對象組件庫」。
• 定義「設計 Token」：色板、間距、圓角、陰影、動畫時長，配合 Figma/Sketch/PS 同步。
• 三狀態樣式邏輯文檔化，開發交付零歧義。