打造極具質感的工業風視頻播放器 UI

本教程展示如何通過多層紋理疊加、圖層樣式組合與矢量圖形精細控制，構建一個擁有金屬質感、機械細節與氛圍光影的專業級視頻播放器界面設計。

最終界面效果圖

背景氛圍構建（步驟 1-12）

創建 1152×864px 文檔，通過 12 步紋理疊加構建工業感背景：

1. 基底紙紋理，正常混合模式
2. 疊加第二層紙紋理，混合模式「正片疊底」
3. 色相/飽和度調整層降低飽和度傾向黑灰
4. 古董書紋理，「正片疊底」不透明度 48%
5. 老紙紋理，「覆蓋」不透明度 58%
6. 黑白調整層移除色彩
7. 新建圖層填充黑白，濾鏡「渲染→雲彩」
8. 雲彩圖層「正片疊底」不透明度 8%
9. 徑向漸變（白到黑）圖層，「螢幕」模式 67%
10. 色相/飽和度「著色」賦予整體冷暖基調
11. 撓金屬紋理，「正片疊底」20% 增加金屬質感

工業條紋元素製作（步驟 13-20）

使用 Illustrator 繪製矩形條紋陣列（黃色基底+黑色細節），複製排列後作為智能對象貼入 PS。添加圖案疊加（骯髒紋理）、投影、內陰影、斜面浮雕等樣式，頂底添加矩形飾條強化機械感。

播放器主視窗構建（步驟 21-31）

基礎視窗框架

矩形形狀 #313029，填充 50%，添加投影、內陰影、斜面浮雕、描邊等樣式。關鍵技巧：在圖層樣式對話框勾選「圖層蒙版隱藏效果」，添加蒙版用黑白漸變隱藏工業條紋投影於視窗上方的部分，解決陰影穿透問題。

內容區域細化

• 疊加較小矩形，添加鏽紋理「正片疊底」10%
• 創建減去模式路徑挖空內部區域
• 重複形狀調整內部路徑形成巢狀結構
• 同樣處理蒙版隱藏多餘陰影

設計思維總結

工業風關鍵在於「受控的髒亂」：基底紋理建立氛圍，矢量圖形保證結構精確，圖層樣式賦予材質物理屬性，蒙版控制細節邊界。此流程可延伸至儀表盤、控制面板等硬核 UI 設計。