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

一、概述

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

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

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

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

注意：區(qū)分iOS與Android的規(guī)范

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

1、方便修改與迭代

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

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

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

2、方便更快捷查找

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

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

3、方便設計團隊溝通

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

4、方便程序開發(fā)溝通

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

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

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

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

標注與切圖工具：

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

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

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

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

三、命名規(guī)范

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

命名規(guī)則——命名也就是需要告訴開發(fā)，文件是什么、在哪里、第幾頁、什么狀態(tài)。

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

1. 較短的單詞可通過去掉“元音”形成縮寫
2. 較長的單詞可取單詞的頭幾個字母形成縮寫
3. 此外還有一些約定成俗的英文單詞縮寫.

以下三種命名規(guī)則供大家參考，具體需求還是要和開發(fā)溝通：

1、產品模塊_類別_功能_狀態(tài).png

例：發(fā)現(xiàn)_圖標_搜索_點擊狀態(tài)

2、場景_模塊_狀態(tài).png

例：登錄_按鈕_默認狀態(tài)

3、產品模塊_場景_二級場景_狀態(tài).png

按鈕_個人_設置_默認狀態(tài)

名詞解析：

【場景和二級場景】：一般指app的一級頁面與二級頁面。

例如上：個人頁-場景，個人頁里的設置頁-二級場景

【模塊】：一般指頁面中的部分區(qū)塊，也有指背景圖。如背景、按鈕、icon都是模塊。

【功能】：一般指的是，頁面或者模塊中，需要操作或點擊的某個點，如上圖，發(fā)現(xiàn)頁中的搜索icon。

【狀態(tài)】：一般指當前切圖的狀態(tài)區(qū)分，像按鈕的話，有默認狀態(tài)、點擊時狀態(tài)、按下狀態(tài)、不可點擊狀態(tài)等，網頁上按鈕還有懸停狀態(tài)。

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

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

四、基本命名規(guī)范一覽

名詞命名：

• 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：視頻

狀態(tài)命名：

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

五、題外話-Android編碼規(guī)范建議18條

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

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

總結

以上是總結了切圖的命名規(guī)范與標注，之后再詳談切圖規(guī)范。

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

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

作者：JaylonG 一位對產品有著濃厚興趣的UI/UX設計師。

本文由 @Jaylon 原創(chuàng)發(fā)布于人人都是產品經理。未經許可，禁止轉載。

題圖來自PEXELS，基于CC0協(xié)議