切圖不只是「存檔」，是「設計交付給開發」的關鍵橋樑

本文從實戰角度梳理切圖全流程核心知識點，涵蓋輸出格式選擇、代碼基礎認知、切圖判斷標準、多分辨率策略、命名規範、標註要點與高效方法工具。

1. 輸出格式選擇策略

格式	適用場景	關鍵參數
PNG-24 / PNG-8	UI 圖標、透明背景元素、需無損品質	PNG-24 真彩+Alpha；PNG-8 256 色+布林透明/Alpha (需工具支援)
JPEG	照片、複雜漸變、無透明需求的大圖	品質 60-80%；Progressive 漸進式載入
WebP	現代瀏覽器全支援，體積比 JPEG/PNG 小 25-35%	有損/無損模式；建議作為首選輸出
SVG	矢量圖標、Logo、簡單幾何圖形	無限縮放不失真；需從 AI/Sketch/Figma 匯出，PS 僅支援匯入
GIF / APNG	簡單動畫	256 色限制；複雜動畫建議用影片/ Lottie

2. 代碼基礎認知 (設計師也要懂)

• 盒模型：`width/height` + `padding` + `border` + `margin` 決定實際佔據空間。
• 背景圖屬性：`background-size: cover/contain/100% 100%`、`background-position`、`background-repeat` 決定切圖在容器中如何顯示。
• Retina / 高 DPR：設計稿通常為 @2x 或 @3x，CSS 中 `background-image: url(@2x.png); background-size: 50% 50%;` 或使用 `srcset`/`picture` 標籤響應式載入。

3. 什麼圖需要切、什麼不用切

• 必須切圖：非 CSS 可繪製的圖標、插圖、照片、複雜漸變/陰影/模糊效果、字體圖標 (若不使用 Web Font)。
• 可用 CSS 替代：純色塊、邊框、圓角、陰影 (`box-shadow`)、線性/徑向漸變 (`linear/radial-gradient`)、簡單幾何圖形 (配合 `border-radius`/`clip-path`)、動畫過渡。
• 字體圖標：優先使用 Icon Font (FontAwesome 等) 或 SVG Symbol，避免切大量小圖標。

4. 切圖分辨率與多倍圖策略

目標平台	設計稿基準	輸出倍率	命名後綴
iOS	@1x (pt)	@2x, @3x	`icon@2x.png`, `icon@3x.png`
Android	mdpi (1x)	hdpi(1.5x), xhdpi(2x), xxhdpi(3x), xxxhdpi(4x)	放入對應 `drawable-xxxhdpi` 資料夾
Web 響應式	@1x (邏輯像素)	@1x, @2x, @3x	`img@2x.webp` 或 `srcset` 統一管理

原則：以最高規格設計 (如 @3x/@4x)，導出時由工具自動下採樣生成低倍圖，確保銳度。

5. 命名規範 (團隊協作生命線)

• 結構化命名：`模塊_頁面_元件_狀態_倍率.格式` 例：`header_home_logo_default@2x.png`、`btn_login_pressed@3x.webp`。
• 全小寫 + 下劃線，避免中文、空格、特殊字元，跨平台/版控/構建工具零問題。
• 語意化而非外觀化：用 `btn_primary` 不用 `btn_blue`；用 `icon_search` 不用 `icon_magnifier`。

6. 標註交付清單

• 尺寸、間距、字體大小/行高/字重/顏色 (十六進位)。
• 圖層/元件對應關係 (哪個圖層對應哪個代碼組件)。
• 互動狀態 (默認/懸停/按下/禁用/載入中) 截圖或連結原型。
• 動畫參數 (時長、緩動函數、關鍵幀)。
• 響應式斷點行為 (元素如何換行/隱藏/縮放)。

推薦工具：Zeplin、Figma、蓝湖、MarkMan，可直接從 PSD/Sketch/Figma 產生標註與切圖下載，避免人工截圖標註。

7. 高效切圖方法與工具鏈

1. PS 內建：圖層右鍵「快速導出為 PNG」/「匯出為...」(CC 2015+)；切片工具 + 存儲為 Web 所用格式 (舊流程)。
2. 圖層命名自動導出：圖層/群組命名加後綴 `.png` `.jpg` `.svg`，啟用「檔案 > 產生 > 圖像資產」，即時輸出至資料夾。
3. 專用切圖工具：Cutterman (PS 外掛，支援多倍率/格式/命名規則/一鍵導出)、**Slicy** (Mac)、**Sketch/Figma 切片導出** (現代主流)。
4. 自動化腳本：Node/Gulp/Webpack + `imagemin`/`svgo`/`webp-converter` 批次優化壓縮。

總結

切圖核心 = 正確格式 + 標準命名 + 完整標註 + 自動化流程。設計師應建立「切圖即交付物」意識，善用工具鏈減少重複勞動，將精力投入設計決策而非機械存檔。