滑動開關是移動端介面中最高頻的交互組件之一。本教程將示範如何在 15 分鐘內，使用 Photoshop 基礎形狀工具與圖層樣式，快速產出一枚視覺平衡、狀態清晰、具備輕量質感的滑動開關按鈕，適合快速原型與設計系統組件庫建設。

效果預覽

最終輸出包含「開/關」兩態，風格極簡現代，適配 iOS/Android 設計規範：

設計參數速查表

屬性	數值	備註
畫布尺寸	400×240 px	導出 @1x/@2x/@3x
軌道尺寸	200×36 px	圓角半徑 18 px（膠囊形）
滑塊尺寸	32×32 px	正圓，留 2 px 間隙
開態主色	#007AFF (iOS 藍) / #1A73E8 (Material 藍)	品牌色優先
關態主色	#E5E5EA (系統灰)	中性靜默色
滑塊顏色	#FFFFFF	純白，微陰影
動效時長	200ms	Ease-out 曲線

快速制作流程（5 步完成）

步驟 1：建立基礎幾何結構

1. 新建 400×240 px 文檔，背景透明
2. 圖層組「Switch」→ 圖層組「Track」→ 圓角矩形工具（U），半徑 18 px，繪製 200×36 px 路徑，填充 #E5E5EA，命名「Track_Base」
3. 同組內新建圖層組「Thumb」→ 橢圓工具（U），按 Shift 繪製 32×32 px 正圓，置於軌道左側（距左緣 2 px），填充 #FFFFFF，命名「Thumb_Shape」

步驟 2：軌道材質——關態基礎樣式

雙擊「Track_Base」套用圖層樣式：

• 斜面浮雕：風格「內部斜面」，技巧「鑿刻清晰」，深度 20%，大小 3 px，柔化 1 px，角度 120°，高度 30°，高光「螢幕」#FFFFFF 30%，陰影「正片疊底」#BBBBBB 20%
• 內陰影：距離 1 px，大小 2 px，噪點 3%，#000000 15%
• 描邊：1 px，內部，#D1D1D6，不透明度 50%

步驟 3：滑塊質感——懸浮白卡片感

雙擊「Thumb_Shape」套用：

• 投影：混合模式「正片疊底」，#000000 15%，角度 120°，距離 2 px，展開 0%，大小 4 px
• 內陰影：距離 1 px，大小 2 px，#000000 10%（底部微凹感）
• 描邊：0.5 px，內部，#E5E5EA，不透明度 40%（邊緣定義）

步驟 4：開態構建——非破壞狀態切換

1. 複製「Track」組 → 重命名「Track_On」
2. 選中「Track_On」內的「Track_Base」：
   • 填充改為 #007AFF
   • 修改圖層樣式：斜面浮雕高光改「線性減淡」#80BFFF 40%，陰影「線性加深」#0040AA 30%；內陰影取消；添加內發光：混合模式「線性減淡」，#4DA3FF，不透明度 25%，大小 8 px
3. 選中「Track_On」內的「Thumb_Shape」：
   • 位置移至軌道右側（距右緣 2 px）
   • 投影增強：距離 3 px，大小 6 px，#000000 20%
   • 添加內發光：#007AFF，線性減淡，15%，大小 6 px（呼應軌道發光）
4. 將「Track」組可見性關閉，「Track_On」組可見 → 完成雙態切換架構

步驟 5：微細節與導出

• 觸控提示：在滑塊中心添加 2 px 寬、高度 16 px 的豎向凹槽（矩形工具 → 減去頂層形狀 → 斜面浮雕內部斜面大小 1 px）
• 像素對齊：放大 400% 檢查所有邊緣落在像素網格上，必要時 Ctrl+T 微調 0.5 px
• 導出：檔案 → 匯出 → 另存為 Web 格式 → PNG-24，輸出：
  switch_off@1x/2x/3x.png
  switch_on@1x/2x/3x.png
  並匯出 SVG（形狀圖層右鍵 → 匯出內容 → SVG）

設計系統整合建議

• 元件化：將雙態組存為 CC Library 元件，或 Figma/Sketch Symbol，支援跨工具同步
• 狀態擴展：在同一結構下擴展：
  • Disabled：不透明度 50%，滑塊鎖定左側
  • Loading：滑塊置中，軌道脈動動畫（CSS/JS 實現）
  • Error：軌道色 #FF3B30，滑塊帶 ⚠ 圖標
• 主題適配：建立色彩 Token（--switch-track-on, --switch-track-off, --switch-thumb），支援亮/暗模式一鍵切換
• 無障礙：確保開/關態對比度 ≥ 3:1（WCAG AA），色盲模擬下可辨識

進階質感升級（可選，+10 分鐘）

• 磨砂質感：軌道添加程序化雜色（50% 灰智能對象 → 雜色 5% → 高斯模糊 0.5 px → 疊加 8%）
• 玻璃質感：軌道填充 0%，添加「斜面浮雕」（內部斜面，大小 4 px，高光 40%，陰影 20%）+「內發光」（白，螢幕，10%，大小 6 px）
• 鋼琴烤漆：軌道添加銳利倒角高光（1 px 白線，線性減淡 80%），滑塊添加倒影（複製滑塊 → 垂直翻轉 → 漸變蒙版淡出 → 不透明度 15%）

極簡風格的核心哲學是「少即是多」——每一個像素、每一個樣式參數都必須為功能語義服務。完成基礎版後，建議實際放入 App 原型中測試：在真機上觀察 24×24 px 導航欄尺度下的識別度，在暗模式背景下的可讀性，在動態切換時的視覺連貫性。真正的 UI 組件設計，始於像素，終於體驗。