教程定位

基礎入門級 UI 設計教程，通過鼠繪製作具備強烈金屬/塑膠質感的開關按鈕，涵蓋形狀構建、圖層樣式立體化、狀態切換（開/關）設計，難度適中，適合 UI 新手夯實基本功。

最終效果預覽

核心製作邏輯（文中圖示為主，關鍵步驟文字重構）

1. 基礎幾何：圓角矩形/橢圓工具構建按鈕本體、滑塊、指示燈區域；路徑面板保存備用。
2. 圖層樣式堆疊立體感：
   • 倒角與浮雕：內部/外部倒角、大小、深度、光源角度 → 主體厚度。
   • 內發光/內陰影：邊緣陰影過渡。
   • 漸變疊加：金屬/塑膠表面色彩流向。
   • 投影：懸浮感與接地陰影。
3. 滑塊/指示燈獨立圖層樣式：滑塊更強倒角高光；指示燈外發光/脈動動畫預留。
4. 狀態切換設計：群組管理「開/關」兩組圖層，圖層可見性控制狀態；滑塊位置、指示燈顏色、背景亮度同步變化。
5. 細節潤色：邊緣鋸齒檢查、像素對齊、導出 @2x/@3x 規範切圖。

避坑指南

• 圖層樣式參數過強易產生「塑膠感」過重，需通過「輪廓」曲線微調高光銳度。
• 投影距離/大小/不透明度需與界面整體光源一致。
• 狀態切換動畫在 PS 中用幀動畫/時間軸預覽，實際開發交互由代碼實現。