寫這篇文章也是總結了以前剛接觸的時候遇到的問題，還有來自其他朋友的提問。關于切圖的命名規范給人的第一印象就是全英文，看不懂，讓很多人望而卻步，當你有所了解之后，你就會發現其實沒那么復雜。本文主要為了給想了解命名規范的朋友解解惑。

一. 概述

一款產品的落地，必將先經歷過需求分析、產品定位、項目擬定、功能分析、原型設計、設計稿輸出，接下來再到開發，切圖、標注是設計與開發需要溝通的步驟之一。

問題1：切圖與標注是什么？

切圖：APP切圖是實現設計效果的重要環節，開發們在實現的過程中需要計算好各個元素的位置，排布，然后再調用我們切好的圖進行填充。其存在是為了程序提高產品的開發效率和團隊協作。

標注：標注能夠幫助其他團隊理解設計頁面的布局關系、模塊大小、顏色與字體規范等等。

注意：區分iOS與Android的規范。

問題2：為什么要制定規范？（規范存在的意義）

1. 方便修改與迭代

對于項目而言，產品的優化迭代是必要的，除非打算放棄治療。

有很多人對于文檔的命名是這樣的：

遇到突發情況，比如你完成了設計后，突然要你改動哪個icon，要找起來也是相當麻煩。養成良好的命名習慣很重要，比如可以利用版本命名，亦或時間命名都可以更清晰地標明。

2. 方便更快捷查找

對于個人而言，psd文件有時候需要修改，整齊規范的psd文檔是不是在修改圖層的時候更容易找到該圖層呢？

△ 以上來自網絡，圖層命名沒有固定性

3. 方便設計團隊溝通

如果設計團隊有一套完整的設計規范，那是再好不過。如果沒有這樣完整設計系統，那么我們就得自己通過溝通制定一套規范，才能讓溝通更加高效。建議可以多看看網易、Google、QQ等企業的設計規范進行學習。

4. 方便程序開發溝通

曾經與程序員溝通過需求，有些程序員需要你切好圖，標注好，命名好給他們，有些程序員只需要你的設計檔，他們自行切圖標注，所以設計時與開發溝通尤為重要。但是無論如何，規范的命名是最有效的溝通。

二. 關于切圖命名與標注的那些事

像以前的設計輸入都是手動輸出，如今有了各種軟件與插件，給設計師提供了更高效與快捷的方式去解決切圖問題。但是軟件只是輔助特性，某些模塊的切圖利用軟件插件并不能滿足程序所需要的尺寸，這時候還是需要人工來切圖。

這里安利下個人工作中使用的應用。

標注與切圖工具

PxCook（像素大廚）：是一款pc/mac上的軟件，個人經常使用，具有與ps銜接的切圖，標注也比較方便快捷，還能直接導入psd文檔與圖片，自動識別當前像素比例判斷是什么設備。

Cuttman：是一款運行在ps中的插件，能夠自動將你需要的圖層進行輸出，方便你在pc、ios、Android等端上使用。本人使用過，是比較小也快捷的插件。

Sketch其實在輸出資源這一塊也挺方便，不過個人工作上用的最多還是Photoshop，喜歡的朋友可以自行研究。

在設計過程中要注意：舊版設計文件千萬別刪！這是很重要的point，希望所有設計同胞重視，千萬別揣摩你的公司上層、領導還是甲方需求，因為你永遠也預料不到他們最終決定會不會就是第一版。（不過這里的前提是，保留還不錯的設計，摒棄掉自己都認為不足的部分）

三. 命名規范

命名規范并不是唯一的，工作上需要的命名也不相同，但是唯一的目的就是要清晰。以下的命名規則為工作中較為常用的三種規則，為大家羅列出來。

命名規則——命名也就是需要告訴開發，文件是什么、在哪里、第幾頁、什么狀態。

切圖命名英文縮寫三個原則：

• 較短的單詞可通過去掉「元音」形成縮寫。
• 較長的單詞可取單詞的頭幾個字母形成縮寫。
• 此外還有一些約定成俗的英文單詞縮寫。

三種命名規則

以下三種命名規則供大家參考，具體需求還是要和開發溝通。

1. 產品模塊_類別_功能_狀態.png

例：發現_圖標_搜索_點擊狀態

2. 場景_模塊_狀態.png

例：登錄_按鈕_默認狀態

3. 產品模塊_場景_二級場景_狀態.png

按鈕_個人_設置_默認狀態

名詞解析

「場景和二級場景」：一般指app的一級頁面與二級頁面。例如：個人頁-場景，個人頁里的設置頁-二級場景。

「模塊」：一般指頁面中的部分區塊，也有指背景圖。如背景、按鈕、icon都是模塊。

「功能」：一般指的是，頁面或者模塊中，需要操作或點擊的某個點。如上圖，發現頁中的搜索icon。

「狀態」：一般指當前切圖的狀態區分，像按鈕的話，有默認狀態、點擊時狀態、按下狀態、不可點擊狀態等，網頁上按鈕還有懸停狀態。

注意：所有命名只能為小寫英文字母，不要為了好看或者像平時打英語一樣，首字母是大寫之類的，也不可以為中文，不然對于開發來說，是沒有意義的，因為他們還是得自己再改一遍。

注意：ios切圖需要在命名后加上@2x、@3x后綴名，安卓的切圖不需要加，不過有些安卓開發需要切圖后綴加上尺寸。

四. 基本命名規范一覽

名詞命名：

• bg（backgrond）： 背景
• nav（navbar）：導航欄
• tab（tabbar）：標簽欄
• btn（button）：按鈕
• img（image）：圖片
• del（delete）：刪除
• msg（message）：信息
• icon：圖標
• content：內容
• left/center/right：左/中/右
• logo：標識
• login：登錄
• register：注冊
• refresh：刷新
• banner：廣告
• link：鏈接
• user：用戶
• note：注釋
• bar：進度條
• profile：個人資料
• ranked：排名
• error：錯誤

操作命名：

• close：關閉
• back：返回
• edit：編輯
• download：下載
• collect：收藏
• comment：評論
• play：播放
• pause：暫停
• pop：彈出
• audio：音頻
• video：視頻

狀態命名：

• selected：選中
• disabled：無法點擊
• highlight：點擊時
• default：默認
• normal：一般
• pressed：按下
• slide：滑動

五. 題外話-Android編碼規范建議18條

分享來自網絡知識。 適合手機app設計師和android 工程師閱讀。

• java代碼中不出現中文，最多注釋中可以出現中文。
• 局部變量命名、靜態成員變量命名只能包含字母，單詞首字母除第一個外，都為大寫，其他字母都為小寫。
• 常量命名只能包含字母和_，字母全部大寫，單詞之間用_隔開。
• 圖片盡量拆分成多個可重用的圖片。
• 服務端可以實現的，就不要放在客戶端。
• 引用第三方庫要慎重，避免應用大容量的第三方庫，導致客戶端包非常大。
• 處理應用全局異常和錯誤，將錯誤以郵件的形式發送給服務端。
• 圖片的處理。
• 使用靜態變量方式實現界面間共享要慎重。
• Log(系統名稱、模塊名稱、接口名稱，詳細描述)。
• 單元測試（邏輯測試、界面測試）。
• 不要重用父類的handler，對應一個類的handler也不應該讓其子類用到，否則會導致message.what沖突。
• activity中在一個View.OnClickListener中處理所有的邏輯。
• strings.xml中使用%1$s實現字符串的通配。
• 如果多個Activity中包含共同的UI處理，那么可以提煉一個CommonActivity，把通用部分將由它來處理，其他activity只要繼承它即可。
• 使用button+activitgroup實現tab效果時，使用Button.setSelected(true)，確保按鈕處于選擇狀態，并使activitygroup的當前activity與該button對應。
• 如果所開發的為通用組件，為避免沖突，將drawable/layout/menu/values目錄下的文件名增加前綴 18.數據一定要效驗，例如：字符型轉數字型，如果轉換失敗一定要有缺省值； 服務端響應數據是否有效判斷。

總結

其實管理文件也是門學問，它能讓你省下沒必要耗費的時間與精力。溝通也是能夠幫助你更好的與團隊，不同部門更高效地推進項目的開展。

每個公司都有自己的命名和輸出模式的，以上是和大家交流下自己工作中的方法和心得，希望對大家有所幫助。如果覺得以上有什么補充的，歡迎大家留言告知，不勝感激。

作者微信號：JJ865477301

歡迎關注作者的微信公眾號：「JAYGO」

「超全面！設計新手必備的切圖指南」

• 《UI實戰教程！從零開始做APP 系列之切圖標注篇》
• 《UI新手必備！iOS+Android的切圖與標注方法》
• 《基礎知識！寫給UI設計新手的切圖命名規則手冊》
• 《新手福利！超全面的UI設計切圖規范指南》

================明星欄目推薦================

優優教程網： UiiiUiii.com 是優設旗下優質中文教程網站，分享了大量PS、AE、AI、C4D等中文教程，為零基礎設計愛好者也準備了貼心的知識樹專欄。開啟免費自學新篇章，按照我們的專欄一步步學習，一定可以迅速上手并制作出酷炫的視覺效果。

設計導航：國內人氣最高的設計網址導航，設計師必備： http://hao.uisdc.com