前言

切圖不僅是「存為 Web」，更是設計師與開發、產品協作的橋梁。一套規範的切圖流程能消除溝通成本、避免資源錯漏、支援多平台（PC/Android/iOS）差異化輸出。本文分享實戰總結的標準化切圖方法論。

核心原則

• 圖層命名規範：語義化、帶尺寸後綴、狀態前綴（normal/pressed/disabled）。
• 群組結構映射代碼結構：頁面 → 模組 → 組件 → 元素，圖層面板即文檔樹。
• 切片/導出設置統一：統一命名規則、輸出目錄、倍圖策略（@1x/@2x/@3x）。
• 版本管理友好：PSD 源檔進 Git，切圖產物走 CI/CD 自動化導出。

實操流程示意（圖解）

以下截圖展示規範化的圖層面板結構、切片設置、導出配置、多平台資源目錄結構等：

關鍵細節

1. 圖層命名範例：btn_login_normal@2x、icon_home_pressed@3x、bg_banner@1x。
2. 切片命名同步圖層名：右鍵切片「編輯切片選項」或使用「圖層導出為」功能（CC 2015+）。
3. 倍圖策略：以 @1x 為基準，PSD 內按 @3x 設計（最高保真），導出時自動生成 @2x/@1x。
4. 狀態管理：同一組件不同狀態置於同群組，圖層名帶狀態後綴，開發直接映射 CSS class。
5. 標註輸出：搭配 MarkMan、PxCook、Zeplin 等標註工具，PSD 規範是前提。

避坑指南

• 避免圖層名含中文/特殊符號，導出文件名編碼錯誤。
• 避免圖層疊加模式/不透明度導致導出異常，切圖前建議「合併可見圖層到新圖層」再導出。
• 矢量圖標優先導出 SVG，位圖導出 PNG/WebP。
• 定期清理無用圖層/群組，保持 PSD 輕量。

結語

規範切圖 = 好溝通 + 少返工 + 易維護。從今天開始，把 PSD 當作代碼庫一樣嚴謹對待，團隊效率將顯著提升。