開關圖標看似簡單，實則考驗設計師對材質對比、狀態切換邏輯與微交互視覺反饋的把控。本教程將示範如何繪製一組風格清新、狀態清晰、具備 APP 級質感的開關圖標，涵蓋「開/關」兩態設計與關鍵細節處理。

效果展示

最終輸出包含兩態圖標：開態呈現薄荷綠活力色系與內發光效果；關態採用暖灰靜默色系，質感溫潤如磨砂玻璃：

設計規範與參數設定

屬性	開態	關態
畫布尺寸	512×512 px（輸出 @1x/@2x/@3x）
主體形狀	圓角矩形 320×200 px，圓角半徑 100 px（胶囊形）
滑塊尺寸	直徑 176 px 正圓
主色調	#4CD964 (iOS 綠)	#E5E5EA (系統灰)
滑塊顏色	#FFFFFF 純白
光源方向	左上 135°，模擬頂光環境

核心制作流程

階段一：基礎幾何與智能對象架構

1. 新建圖層組「Switch_Base」，內建兩個圖層組「On_State」「Off_State」
2. 在各態組中建立矢量形狀：
   • 背景軌道：圓角矩形工具，固定參數
   • 滑塊：橢圓工具，按 Shift 繪製正圓
   
3. 將背景軌道與滑塊分別轉為智能對象，便於後續非破壞編輯

階段二：關態——磨砂玻璃質感構建

雙擊「Off_State」背景軌道智能對象編輯內容：

• 填充 #E5E5EA
• 圖層樣式：
  斜面浮雕：風格「內部斜面」，技巧「鑿刻清晰」，深度 30%，大小 4 px，柔化 2 px，光源 135°/30°，高光「螢幕」#FFFFFF 40%，陰影「正片疊底」#BBBBBB 30%
  內陰影：距離 1 px，大小 3 px，噪點 5%，#000000 20%
  色彩疊加：#F5F5F7，混合模式「柔光」，不透明度 15%（提亮通透感）
  描邊：1 px，內部，#D1D1D6，不透明度 60%

滑塊關態：填充白，添加「投影」（距離 2 px，大小 4 px，#000 15%）與「內陰影」（距離 1 px，大小 2 px，#000 10%）製造薄片懸浮感。

階段三：開態——活力發光質感構建

編輯「On_State」背景軌道智能對象：

• 填充 #4CD964
• 圖層樣式：
  斜面浮雕：風格「外部斜面」，大小 3 px，高光「線性減淡」#8EFF9E 60%，陰影「線性加深」#2A8A3A 40%
  內發光：混合模式「線性減淡」，#6BFF7B，不透明度 35%，技巧「精確」，大小 12 px
  外發光：混合模式「線性減淡」，#4CD964，不透明度 25%，大小 20 px，範圍 50%（營造發光氛圍）
  描邊：1 px，內部，#3AB84F，不透明度 80%

滑塊開態：白色基礎上添加「內發光」（#4CD964，線性減淡，15%，大小 8 px）呼應背景光暈；「投影」增強至距離 3 px、大小 6 px、#000 20%。

階段四：微細節與狀態切換邏輯

• 滑塊軌道間隙：滑塊直徑比軌道高度小 24 px，上下各留 12 px 間隙，視覺上更輕盈
• 觸控熱區提示：在滑塊中心添加 2 px 寬、高度 60% 的豎向凹槽（鋼筆繪製 → 斜面浮雕內部斜面），暗示可拖拽
• 狀態標識：開態軌道右側內部微淡顯示「I」，關態左側顯示「O」（文字圖層不透明度 15%，字體 San Francisco / PingFang SC Medium）
• 動效預留：將滑塊位置、背景色、發光強度做為動畫關鍵幀屬性，便於開發還原

進階質感技巧：程序化磨砂紋理

為避免位圖紋理解析度依賴，推薦使用程序化方法：

1. 新建填充圖層「50% 灰」→ 轉智能對象
2. 濾鏡 → 雜色 → 添加雜色：數量 8%，高斯分布，單色
3. 濾鏡 → 模糊 → 高斯模糊：半徑 0.8 px
4. 圖層混合模式「疊加」，不透明度 10-15%
5. 添加向量蒙版限制於軌道形狀內

此法優勢：任意縮放不失真、參數可隨時調整、文件體積極小。

多尺寸導出與命名規範

switch_on@1x.png   (512×512)
switch_on@2x.png   (1024×1024)
switch_on@3x.png   (1536×1536)
switch_off@1x.png  (512×512)
...                (...)

建議同時輸出 SVG 矢量版本（形狀圖層 → 右鍵「匯出內容」→ SVG），滿足 Web 端響應式需求。

設計師自我檢查清單

• [ ] 兩態視覺權重平衡，無一方顯著更重/更輕
• [ ] 滑塊在兩態位置幾何中心對齊，無像素級偏移
• [ ] 光源一致性：所有高光/陰影/投影角度統一
• [ ] 最小尺寸 (24×24 px) 下狀態仍清晰可辨
• [ ] 色盲模式模擬下（Protanopia/Deuteranopia）綠/灰對比度 ≥ 3:1
• [ ] 檔案命名符合團隊規範，圖層結構清晰可維護

清新風格的關鍵在於「留白與呼吸感」——克制陰影濃度、保留邊緣通透、讓發光效果服務於狀態語義而非炫技。完成基礎版本後，建議嘗試設計「禁用態」（降低飽和度 60%、不透明度 50%）、「載入態」（滑塊位置中間、背景脈動動畫）等擴展狀態，構建完整圖標系統。