本教程拆解一個極具設計感的音樂播放器界面：核心視覺焦點「黑膠唱片」質感營造，配合「折疊紙播放列表」交互隱喻，展示圖層樣式、濾鏡、變換路徑、智慧物件在 UI 設計中的綜合應用。

最終效果

核心設計拆解

模塊	關鍵技術	視覺目的
背景	徑向漸變 #aac6d1 → #fafbfd	溫和呼吸感，非純白減輕眼部疲勞
黑膠唱片	濾鏡/漸變/圖層樣式合成 (另教程) + 投影	主視覺錨點，材質真實感建立信任度
折疊紙列表	矩形 → 自由變換透視/變形 → 橢圓選區刪除 → 漸變疊加模擬折痕	物理隱喻，暗示可展開/交互
專輯封面	置入圖片 + 投影 + 透視變形	內容載體，強化品牌識別
播放控制元件	矩形+透視做三角播放鍵、鉛筆工具畫進度條/時間、圖標	功能清晰，視覺統一
環境光/氛圍	矩形選區半透明漸變 + 高斯模糊 + 填充 30%	空間深度、視覺層次

關鍵製作步驟詳解

1. 背景與唱片佈局

• 新建 800×600 px → 背景徑向漸變
• 置入預製黑膠唱片 (智慧物件) → Ctrl+T 縮放置中上方 → 添加投影 (距離 10px, 大小 15px, 不透明度 30%)

2. 折疊紙播放列表構建 (核心技術點)

1. 唱片圖層下方新建矩形形狀圖層 (淺灰) → 添加投影
2. 複製該圖層 → 取消投影 → Ctrl+T → 拖動頂部中間控制點向下壓縮至 3/5 高度
3. Edit > Transform Path > Perspective → 按 Shift 拖動左上角向左展開 → 形成透視梯形
4. Edit > Transform Path > Warp → 按 Shift 向內拖動兩側控制點 → 彎曲邊緣模擬紙張彈性
5. 確定 → 移至唱片圖層上方
6. 柵格化圖層 → 橢圓選框工具選取唱片下方區域 → Delete 刪除 → 形成唱片壓住紙張效果
7. 圖層樣式 → 漸變疊加 (線性, 角度 90°) → 深淺交替模擬紙張折痕明暗

3. 環境光氛圍營造

• 背景上方新建圖層 → 矩形選區頂部區域 → 前景透明漸變 (白→透明) 填充
• Ctrl+D 取消選區 → Filter > Blur > Gaussian Blur 半徑 10px
• 圖層填充 30% (關鍵：填充不影響層樣式，僅影響像素)

4. 專輯封面與播放控制元件

• 置入專輯封面 → 縮放定位頂層 → 投影 (距離 5px, 大小 8px, 不透明度 40%)
• 播放鍵：矩形工具畫正方形 → Edit > Transform Path > Perspective → 拖動頂部兩點向中間重合 → 形成三角形
• 進度條/時間：鉛筆工具 1-2px 畫線條，雙色疊加 (深色線 + 白色高光線) 增強精緻度
• 收藏/下載/歌名/專輯名：文字工具 + 圖層樣式投影/內陰影

5. 細節潤色與最終輸出

• 折疊紙邊緣：白色 1px 鉛筆畫上邊高光、灰色 2px 畫下邊陰影
• 專輯圖投影透視變形增強空間感
• 整體色階/曲線微調對比度與色溫
• 導出：UI 交付 @2x/@3x PNG，展示用 JPEG/WebP

UI 設計師進階思考

1. 物理隱喻的克制：折疊紙暗示「可展開」，但不要過度擬真喧賓奪主
2. 材質系統化：建立「材質樣式庫」(玻璃/金屬/紙張/塑膠/布料)，新專案直接套用
3. 智慧物件組件化：唱片、按鈕、卡片封裝為智慧物件，雙擊編輯源文件自動同步所有實例
4. 設計系統輸出：輸出 Figma/Sketch/Adobe XD 組件庫，而非單純 PS 扁平圖

優秀的 UI 設計不只是「畫得像」，而是「邏輯通、材質真、交互明、系統全」。這個播放器案例展示了如何在 PS 中以非破壞流程實現高保真視覺表達，是向專業 UI 設計師進階的必經之路。