UI 開關按鈕是介面設計中最高頻元件之一。本教學演示如何用 8 步在 Photoshop 中構建一個擁有真實物理厚度、材質質感、明確狀態反饋（ON/OFF）的立體開關按鈕，掌握 UI 組件級圖標設計規範。

成品效果

按鈕擁有凸起的操作桿、凹陷的卡槽、金屬/塑膠材質區分、清晰的 ON/OFF 狀態指示、微妙的紅光呼吸效果，視覺與交互雙重滿足。

8 步製作邏輯

1. 畫布：1136×640px（iPhone 5 時代標準尺寸，現可適配調整）。
2. 按鈕側面「按鈕-下」：橢圓工具畫圓形，作為按鈕側面厚度基礎。
3. 按鈕正面「按鈕-上」：同心圓→直接選擇工具上拖底部錨點→形成頂部平面造型。
4. 正面質感「按鈕-上」圖層樣式：漸變疊加（曲面明暗）、內陰影（邊緣厚度）、內發光（邊緣高光）、描邊（邊框）、投影（懸浮感）。
5. 側面質感「按鈕-下」圖層樣式：漸變疊加（側面明暗）、內陰影（頂部陰影）、投影（底部落地）。
6. 凹槽「凹槽」層：稍大同心圓→圖層樣式：內陰影（凹陷深度）、斜面浮雕（邊緣倒角）、顏色疊加（槽底顏色）、投影（立體感）。
7. 陰影層：瘦橢圓填黑→高斯模糊→低不透明度→置於最底層，模擬真實接觸陰影。
8. 文字與氛圍：添加 OFF/ON 文字（斜面浮雕微立體）→ 紅光層（外發光/顏色減淡模式）模擬通電指示燈效果。

關鍵點：正反面分層建模、圖層樣式系統化表現材質厚度、凹槽獨立層強化凹陷感、瘦橢圓投影更真實、狀態指示燈以光代色。此工作流可直接擴展至滑塊、旋鈕、按鍵等全套 UI 控件設計體系。