教程性質

純圖解教程，展示一款具有頹廢/工業風質感的滑動按鈕 UI 設計過程。通過 10 張步驟圖完整呈現從基礎形狀到最終質感的構建。

效果與步驟圖示

從圖解反推的製作邏輯

1. 基礎幾何構建

• 圓角矩形/矩形形狀圖層構建按鈕軌道與滑塊主體
• 矢量形狀保證無損縮放與邊緣銳利

2. 金屬基礎質感（漸變疊加 + 斜面浮雕）

• 多層線性/徑向漸變模擬金屬陽極氧化流向與反光帶
• 斜面與浮雕「內斜面/外斜面」刻畫邊緣倒角與表面微細起伏

3. 頹廢/磨損細節（核心風格）

• 圖案疊加：刮痕/氧化/指紋紋理（模式「疊加/柔光」低不透明度）
• 雜色/雜色濾鏡：表面顆粒感
• 邊緣磨損：蒙版+畫筆/濾鏡「風格化→風」制作邊緣漆面剝落
• 鏽跡/污漬：暖棕/橙黃不規則形狀，模式「正片疊底/顏色加深」

4. 交互狀態區分

• 滑塊「開/關」兩態：位置、高光方向、投影位置同步變化
• 指示燈：外發光/內發光 表現通電狀態

5. 環境光整合

• 頂部高光帶（白色柔光漸變）
• 底部反射光（環境色柔光）
• 整體曲線/色階統一色調

UI 設計師實戰啟示

• 風格關鍵詞（頹廢/工業/賽博朋克/極簡）決定紋理庫選擇
• 組件狀態圖層組規範命名：Base/Track/Knob/On/Off/Hover/Disabled
• 樣式預設儲存：將核心質感存為「圖層樣式」或「智能對象」便於組件庫複用
• 導出規範：@1x/@2x/@3x PNG + SVG 矢量源文件