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

一、概述

一款產(chǎn)品的落地，必將先經(jīng)歷過(guò)需求分析、產(chǎn)品定位、項(xiàng)目擬定、功能分析、原型設(shè)計(jì)、再到設(shè)計(jì)稿輸出，接下來(lái)再到開(kāi)發(fā)，切圖、標(biāo)注是設(shè)計(jì)與開(kāi)發(fā)需要溝通的步驟之一。

問(wèn)題1：切圖與標(biāo)注是什么？

切圖：APP切圖是實(shí)現(xiàn)設(shè)計(jì)效果的重要環(huán)節(jié)，開(kāi)發(fā)們?cè)趯?shí)現(xiàn)的過(guò)程中需要計(jì)算好各個(gè)元素的位置，排布，然后再調(diào)用我們切好的圖進(jìn)行填充。其存在是為了程序提高產(chǎn)品的開(kāi)發(fā)效率和團(tuán)隊(duì)協(xié)作。

標(biāo)注：標(biāo)注能夠幫助其他團(tuán)隊(duì)理解設(shè)計(jì)頁(yè)面的布局關(guān)系、模塊大小、顏色與字體規(guī)范等等。

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

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

1、方便修改與迭代

對(duì)于項(xiàng)目而言，產(chǎn)品的優(yōu)化迭代是必要的，除非打算放棄治療。

有很多人對(duì)于文檔的命名是這樣的：

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

2、方便更快捷查找

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

（以上來(lái)自網(wǎng)絡(luò)，圖層命名沒(méi)有固定性）

3、方便設(shè)計(jì)團(tuán)隊(duì)溝通

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

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

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

二、關(guān)于切圖命名與標(biāo)注的那些事

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

這里安利下個(gè)人工作中使用的應(yīng)用

標(biāo)注與切圖工具：

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

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

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

*在設(shè)計(jì)過(guò)程中要注意：舊版設(shè)計(jì)文件千萬(wàn)別刪！這是很重要的point，希望所有設(shè)計(jì)同胞重視，千萬(wàn)別揣摩你的公司上層、領(lǐng)導(dǎo)還是甲方需求，因?yàn)槟阌肋h(yuǎn)也預(yù)料不到他們最終決定會(huì)不會(huì)就是第一版。（不過(guò)這里的前提是，保留還不錯(cuò)的設(shè)計(jì)，摒棄掉自己都認(rèn)為不足的部分）

三、命名規(guī)范

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

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

切圖命名英文縮寫(xiě)三個(gè)原則：

1. 較短的單詞可通過(guò)去掉“元音”形成縮寫(xiě)
2. 較長(zhǎng)的單詞可取單詞的頭幾個(gè)字母形成縮寫(xiě)
3. 此外還有一些約定成俗的英文單詞縮寫(xiě).

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

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

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

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

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

3、產(chǎn)品模塊_場(chǎng)景_二級(jí)場(chǎng)景_狀態(tài).png

按鈕_個(gè)人_設(shè)置_默認(rèn)狀態(tài)

名詞解析：

【場(chǎng)景和二級(jí)場(chǎng)景】：一般指app的一級(jí)頁(yè)面與二級(jí)頁(yè)面。

例如上：個(gè)人頁(yè)-場(chǎng)景，個(gè)人頁(yè)里的設(shè)置頁(yè)-二級(jí)場(chǎng)景

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

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

【狀態(tài)】：一般指當(dāng)前切圖的狀態(tài)區(qū)分，像按鈕的話，有默認(rèn)狀態(tài)、點(diǎn)擊時(shí)狀態(tài)、按下?tīng)顟B(tài)、不可點(diǎn)擊狀態(tài)等，網(wǎng)頁(yè)上按鈕還有懸停狀態(tài)。

注意：所有命名只能為小寫(xiě)英文字母，不要為了好看或者像平時(shí)打英語(yǔ)一樣，首字母是大寫(xiě)之類的，也不可以為中文，不然對(duì)于開(kāi)發(fā)來(lái)說(shuō)，是沒(méi)有意義的，因?yàn)樗麄冞€是得自己再改一遍。

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

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

名詞命名：

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

操作命名：

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

狀態(tài)命名：

• selected：選中
• disabled：無(wú)法點(diǎn)擊
• highlight：點(diǎn)擊時(shí)
• default：默認(rèn)
• normal：一般
• pressed：按下
• slide：滑動(dòng)

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

分享來(lái)自網(wǎng)絡(luò)知識(shí)。 適合手機(jī)app設(shè)計(jì)師和android 工程師閱讀。

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

總結(jié)

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

其實(shí)管理文件也是門(mén)學(xué)問(wèn)，它能讓你省下沒(méi)必要耗費(fèi)的時(shí)間與精力。溝通也是能夠幫助你更好地與團(tuán)隊(duì)，不同部門(mén)更高效地推進(jìn)項(xiàng)目的開(kāi)展。

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

作者：JaylonG 一位對(duì)產(chǎn)品有著濃厚興趣的UI/UX設(shè)計(jì)師。

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

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