一款產(chǎn)品的落地，必將先經(jīng)歷過需求分析、產(chǎn)品定位、項(xiàng)目擬定、功能分析、原型設(shè)計(jì)、再到設(shè)計(jì)稿輸出，接下來再到開發(fā)，切圖、標(biāo)注是設(shè)計(jì)與開發(fā)需要溝通的步驟之一。
問題1：切圖與標(biāo)注是什么？
切圖：APP切圖是實(shí)現(xiàn)設(shè)計(jì)效果的重要環(huán)節(jié)，開發(fā)們?cè)趯?shí)現(xiàn)的過程中需要計(jì)算好各個(gè)元素的位置sketch切圖標(biāo)注流程，排布，然后再調(diào)用我們切好的圖進(jìn)行填充。其存在是為了程序提高產(chǎn)品的開發(fā)效率和團(tuán)隊(duì)協(xié)作。
標(biāo)注：標(biāo)注能夠幫助其他團(tuán)隊(duì)理解設(shè)計(jì)頁面的布局關(guān)系、模塊大小、顏色與字體規(guī)范等等。
注意：區(qū)分iOS與的規(guī)范
問題2：為什么要制定規(guī)范？（規(guī)范存在的意義）1、方便修改與迭代
對(duì)于項(xiàng)目而言，產(chǎn)品的優(yōu)化迭代是必要的，除非打算放棄治療。
有很多人對(duì)于文檔的命名是這樣的：
遇到突發(fā)情況，比如你完成了設(shè)計(jì)后，突然要你改動(dòng)哪個(gè)icon，你要找起來也是相當(dāng)麻煩。養(yǎng)成良好的命名習(xí)慣很重要，比如可以利用版本命名，亦或時(shí)間命名都可以更清晰地標(biāo)明。
2、方便更快捷查找
對(duì)于個(gè)人而言，psd文件有時(shí)候需要修改，整齊規(guī)范的psd文檔是不是在修改圖層的時(shí)候更容易找到該圖層呢？
3、方便設(shè)計(jì)團(tuán)隊(duì)溝通
如果設(shè)計(jì)團(tuán)隊(duì)有一套完整的設(shè)計(jì)規(guī)范，那是再好不過。如果沒有這樣完整設(shè)計(jì)系統(tǒng)，那么我們就得自己通過溝通制定一套規(guī)范，才能讓溝通更加高效。建議可以多看看網(wǎng)易、、QQ等企業(yè)的設(shè)計(jì)規(guī)范進(jìn)行學(xué)習(xí)。
4、方便程序開發(fā)溝通
曾經(jīng)與程序溝通過需求，有些程序需要你切好圖，標(biāo)注好，命名好給他們，有些程序只需要你的設(shè)計(jì)檔，他們自行切圖標(biāo)注，所以設(shè)計(jì)時(shí)與開發(fā)溝通尤為重要。但是無論如何，規(guī)范的命名是最有效的溝通。
二、關(guān)于切圖命名與標(biāo)注的那些事
像以前的設(shè)計(jì)輸入都是手動(dòng)輸出，如今有了各種軟件與插件，給設(shè)計(jì)師提供了更高效與快捷的方式去解決切圖問題。但是軟件只是輔助特性，某些模塊的切圖利用軟件插件并不能切圖滿足程序所需要的尺寸，這時(shí)候還是需要人工來切圖。
這里安利下個(gè)人工作中使用的應(yīng)用
標(biāo)注與切圖工具：
（像素大廚）：是一款pc/mac上的軟件，個(gè)人經(jīng)常使用，具有與ps銜接的切圖，標(biāo)注也比較方便快捷，還能直接導(dǎo)入psd文檔與圖片sketch切圖標(biāo)注流程，自動(dòng)識(shí)別當(dāng)前像素比例判斷是什么設(shè)備。
：是一款運(yùn)行在ps中的插件，能夠自動(dòng)將你需要的圖層進(jìn)行輸出，方便你在pc、ios、等端上使用。本人使用過，是比較小也快捷的插件。
其實(shí)在輸出資源這一塊也挺方便，不過個(gè)人工作上用的最多還是，喜歡的朋友可以自行研究。
*在設(shè)計(jì)過程中要注意：舊版設(shè)計(jì)文件千萬別刪！這是很重要的point，希望所有設(shè)計(jì)同胞重視，千萬別揣摩你的公司上層、領(lǐng)導(dǎo)還是甲方需求，因?yàn)槟阌肋h(yuǎn)也預(yù)料不到他們最終決定會(huì)不會(huì)就是第一版。（不過這里的前提是，保留還不錯(cuò)的設(shè)計(jì)，摒棄掉自己都認(rèn)為不足的部分）
三、命名規(guī)范
命名規(guī)范并不是唯一的，工作上需要的命名也不相同，但是唯一的目的就是要清晰。以下的命名規(guī)則為工作中較為常用的三種規(guī)則，為大家羅列出來。
命名規(guī)則——命名也就是需要告訴開發(fā)，文件是什么、在哪里、第幾頁、什么狀態(tài)。
切圖命名英文縮寫三個(gè)原則：
較短的單詞可通過去掉“元音”形成縮寫
較長(zhǎng)的單詞可取單詞的頭幾個(gè)字母形成縮寫
此外還有一些約定成俗的英文單詞縮寫.
以下三種命名規(guī)則供大家參考，具體需求還是要和開發(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í)頁面與二級(jí)頁面。
例如上：個(gè)人頁-場(chǎng)景，個(gè)人頁里的設(shè)置頁-二級(jí)場(chǎng)景
【模塊】：一般指頁面中的部分區(qū)塊，也有指背景圖。如背景、按鈕、icon都是模塊。
【功能】：一般指的是，頁面或者模塊中，需要操作或點(diǎn)擊的某個(gè)點(diǎn)，如上圖，發(fā)現(xiàn)頁中的搜索icon。
【狀態(tài)】：一般指當(dāng)前切圖的狀態(tài)區(qū)分，像按鈕的話，有默認(rèn)狀態(tài)、點(diǎn)擊時(shí)狀態(tài)、按下狀態(tài)、不可點(diǎn)擊狀態(tài)等，網(wǎng)頁上按鈕還有懸停狀態(tài)。
注意：所有命名只能為小寫英文字母，不要為了好看或者像平時(shí)打英語一樣，首字母是大寫之類的，也不可以為中文，不然對(duì)于開發(fā)來說，是沒有意義的，因?yàn)樗麄冞€是得自己再改一遍。
注意：ios切圖需要在命名后加上@2x、@3x后綴名，安卓的切圖不需要加，不過有些安卓開發(fā)需要切圖后綴加上尺寸。
四、基本命名規(guī)范一覽名詞命名：操作命名：狀態(tài)命名：五、題外話-編碼規(guī)范建議18條
分享來自網(wǎng)絡(luò)知識(shí)。 適合手機(jī)app設(shè)計(jì)師和 工程師閱讀。
java代碼中不出現(xiàn)中文，最多注釋中可以出現(xiàn)中文
局部變量命名、靜態(tài)成員變量命名 只能包含字母，單詞首字母除第一個(gè)外，都為大寫，其他字母都為小寫
常量命名 只能包含字母和_，字母全部大寫，單詞之間用_隔開
圖片盡量分拆成多個(gè)可重用的圖片
服務(wù)端可以實(shí)現(xiàn)的，就不要放在客戶端
引用第三方庫要慎重，避免應(yīng)用大容量的第三方庫，導(dǎo)致客戶端包非常大
處理應(yīng)用全局異常和錯(cuò)誤，將錯(cuò)誤以郵件的形式發(fā)送給服務(wù)端
圖片的處理
使用靜態(tài)變量方式實(shí)現(xiàn)界面間共享要慎重
Log(系統(tǒng)名稱模塊名稱接口名稱，詳細(xì)描述)
單元測(cè)試（邏輯測(cè)試、界面測(cè)試）
不要重用父類的，對(duì)應(yīng)一個(gè)類的也不應(yīng)該讓其子類用到，否則會(huì)導(dǎo)致.what沖突
中在一個(gè)View.中處理所有的邏輯
.xml中使用%1$s實(shí)現(xiàn)字符串的通配
如果多個(gè)中包含共同的UI處理，那么可以提煉一個(gè)，把通用部分叫由它來處理，其他只要繼承它即可
使用+實(shí)現(xiàn)tab效果時(shí)，使用.(true)，確保按鈕處于選擇狀態(tài)，并使的當(dāng)前與該對(duì)應(yīng)
如果所開發(fā)的為通用組件，為避免沖突，將//menu/目錄下的文件名增加前綴 18.數(shù)據(jù)一定要效驗(yàn)，例如：字符型轉(zhuǎn)數(shù)字型，如果轉(zhuǎn)換失敗一定要有缺省值； 服務(wù)端響應(yīng)數(shù)據(jù)是否有效判斷
總結(jié)
以上是總結(jié)了切圖的命名規(guī)范與標(biāo)注，之后再詳談切圖規(guī)范。
碼前-一站式設(shè)計(jì)工具，支持一鍵切圖和標(biāo)注，大大提高設(shè)計(jì)效率。