切圖標註是設計交付開發的「最後一公里」，也是事故高發區。本文制定一套雙端通用、可落地、可檢查的切圖標註命名規範，覆蓋圖層命名、切圖導出、標註輸出、驗收清單，讓設計與開發「零溝通成本」對接。

一、圖層命名規範（PS/Sketch/Figma 通用）

1. 基礎結構：`頁面/模塊/組件/狀態` 四級制

// 頁面
Home / Mine / OrderDetail

// 模塊
Header / Banner / ProductList / TabBar

// 組件
Btn_Primary / Icon_Search / Avatar_User / Card_Goods

// 狀態
Default / Hover / Pressed / Disabled / Loading / Selected

完整範例：`Home/Banner/Img_Banner1_Default`、`OrderDetail/ProductList/Card_Goods_Selected`

2. 切圖標識前綴（強制）

• `@` — 單圖導出（如 `@Icon_Home_Default`）
• `@2x` / `@3x` — 多倍圖導出（如 `@2x@Icon_Home_Default`，導出器自動生成 1x/2x/3x）
• `#` — 切片組/九宮格（如 `#Btn_Primary_Default`，導出 9 張切片）
• `$` — 矢量圖標（SVG/PDF 導出，如 `$Icon_Search`）

3. 禁用規則

• ❌ 中文命名、空格、特殊符號（除上述前綴）。
• ❌ 圖層組未命名（如「Group 1」、「圖層 2 複製」）。
• ❌ 同名圖層存在於不同組未加前綴區分。

二、切圖導出規範

類型	格式	倍率	命名輸出	壓縮/優化
UI 圖標/插畫	SVG (矢量優先) / PNG	@1x, @2x, @3x	`$Icon_Name.svg` / `@2x@Icon_Name.png`	SVGO 優化 / TinyPNG 壓縮
照片/複雜圖片	WebP (優先) / JPG	@1x, @2x	`@2x@Img_Banner1.webp`	質量 80-85%，漸進式 JPG
九宮格/可拉伸背景	PNG (保留透明)	@1x, @2x, @3x	`#Btn_Primary.9.png` (Android) / `#Btn_Primary@2x.png` + `.json` 切片信息	最小化透明像素
動畫幀/序列圖	PNG 序列 / WebP 動畫 / Lottie JSON	@1x	`@Anim_Loading_00.png` ~ `@Anim_Loading_59.png`	合並精靈圖或 Lottie 體積 < 50KB

三、標註輸出標準（Zeplin / Figma DevMode / 蓝湖）

1. 顏色：十六進制 + 透明度（如 `#0066FF` / `rgba(0,102,255,1)`），語義化命名（Primary/Success/Warning/Error/TextPrimary/Background）。
2. 字體：字體族、字重、字號、行高、字間距、顏色、對齊方式。中英文混排需分開標註（PingFang SC / SF Pro / Roboto）。
3. 間距/尺寸：8pt 基線網格，所有間距、尺寸為 4 的倍數。標註：外邊距、內邊距、元件間距、安全區適配。
4. 圓角/陰影/邊框：圓角半徑、陰影（X/Y/模糊/擴散/顏色）、邊框寬度/顏色/樣式。
5. 響應式斷點：320/375/414/768/1024/1440px 關鍵斷點佈局變化標註（欄數、邊距、字號、顯隱邏輯）。
6. 交互狀態：Default/Hover/Active/Focus/Disabled/Loading/Error/Success 每態完整標註。
7. 動效參數：時長、緩動曲線、延遲、屬性變化（位移/縮放/透明度/顏色/旋轉）。

四、交付驗收清單

• [ ] 所有圖層命名符合規範，無「圖層 1」、「Group 副本」。
• [ ] 所有需導出圖層已加前綴（@/@2x/@3x/#/$）。
• [ ] 切圖資產已導出至指定資料夾結構（`assets/images/@2x/`、`assets/icons/svg/`）。
• [ ] 標註連結可訪問，含所有頁面、狀態、斷點、動效。
• [ ] 異常狀態覆蓋：空狀態、錯誤狀態、加載骨架屏、無網絡、權限拒絕。
• [ ] 設計系統組件庫同步更新（Figma Library / Sketch Library）。
• [ ] 開發確認會：走查核心流程、確認技術可行性、約定交付時間節點。

五、工具鏈推薦

• Figma DevMode：一站式設計稿檢視、代碼片段複製、資產導出、註釋協作。
• Zeplin：成熟標註平台，支持 Styleguide、Components、Flows、Jira 集成。
• 蓝湖：國內主流，中文支持好、私有化部署、微信小程序代碼片段生成。
• PXCook：本地客戶端，支持 PSD/Sketch/XD 直開，標註+切圖一體，離線可用。

規範不是束縛，是「共同語言」。建立並強制執行這套規範，設計師少改 80% 標註錯誤，開發少查 80% 圖層結構，專案交付速度提升 30%+。從下一個專案開始，把規範寫進專案啟動文檔，讓它成為團隊肌肉記憶。