切片工具不只是「切圖」，更是設計交付規範的核心環節。本文系統梳理切片創建、命名規範、導出設定、批量處理、前端對接全鏈路，建立零溝通成本的設計交付標準。

切片創建三種模式對比

• 手動切片工具（C）：自由繪製，適合不規則模組、Hover 狀態熱區。
• 圖層式切片：右鍵圖層 → 「從圖層新建切片」，自動貼合像素邊界，圖層移動切片同步更新，強烈推薦作為主力方式。
• 引導線切片：視圖 → 新建引導線佈局 → 「基於引導線的切片」，一鍵生成網格系統切片，適配響應式斷點。

命名規範：語義化+尺寸標識+狀態後綴

格式：`模組名_功能_狀態@倍率.格式`
例：`btn_primary_default@2x.png`、`icon_search_hover@3x.webp`、`banner_hero_autoplay.jpg`
操作：雙擊切片編號 → 輸入語義名稱 → 導出時自動作為文件名。

導出設定標準化

1. 「檔案」→「導出」→「存儲為 Web 所用格式」（舊版）或「導出為」（CC 新版）。
2. 預設輸出預設：
   • 圖標/UI：PNG-24、透明、無交錯。
   • 照片類：JPEG、品質 75、漸進式、嵌入 sRGB。
   • 現代項目：WebP、品質 80、有損/無損自適應。
   • 勾選「僅存儲所選切片」避免輸出無用切片。

批量處理與自動化

• 動作面板錄製「導出切片」動作，批次處理多頁設計稿。
• Generator 技術（檔案 → 產生 → 圖像資產）：圖層/組命名加後綴 `.png` `.jpg` `.svg`，即時自動導出至同級資料夾，所見即所得。
• 配合 Zeplin/Figma/蓝湖 等協作平台，切片標註、尺寸、代碼片段一鍵同步前端。

避坑檢查清單

1. 切片邊界是否對齊像素網格（避免半像素模糊）。
2. Retina/@2x/@3x 多倍圖是否齊全對應。
3. 透明背景切片是否誤勾選「背景顏色」。
4. 文件名是否含中文/空格/特殊字符（導致部署 404）。