前言
設計師和程序猿溝通總是需要花費不少時間，並且很多時候因為沒有規范可依最終導致設計師修改設計或切圖（開發童鞋一般比設計師更強勢）。凡是這類問題都可以通過規范來改善和提高效率。網上很多編碼規范和設計規范，但是缺乏程序猿和設計師之間溝通的規范。下面我和大家分享一下目前我工作中程序猿和設計師的溝通規范--切圖命名及切圖管理。如果你有更好溝通規范歡迎留言分享，也可以加群溝通：196761677、311536202。
命名規范
目前存在的問題
- 設計師不知切圖如何命名，尤其是圖片多了之后。
- 設計師不知道應該命名成中文還是英文，使用中文的話那么在程序這邊用的時候還需要程序猿重新命名，使用英文的話估計只有自己看得懂。
命名規則
統一的命名規則：功能_ 尺寸 _ 主題 _ 狀態，當然其中有一部分是可以省略的。
命名元素
- 名稱（按功能）。這個切圖的名稱。
- 尺寸。通常是指大小。
- 主題。通常包括兩部分，一部分是主題名，一部分是主題樣式。
- 狀態。我們常用的包括4個狀態：正常、點擊、不能點擊、選中。
示例說明
完整命名
我們有一個消息按鈕圖標。下面是我們應該考慮的幾個點。
- 名稱。圖標的功能是消息。
- 尺寸。暫且我們認為消息圖標有2個界面都在使用，而且一個是大圖標一個是小圖標。
- 主題。一般情況都不會有換皮膚的要求（畢竟這個工作量大），暫且我們認為這個消息會有深色和淺色的樣式。
- 狀態。按鈕的狀態通常有三種，正常（通常都是設計的時候考慮的自然狀態）、點擊（手指點擊上去沒有釋放時候的狀態）、不可點擊（不滿足條件時不可點擊的狀態）。 根據以上的一些點，那么我們消息切圖命名分別為。
- msg _ small _ light _ normal
- msg _ small _ light _ pressed
- msg _ small _ light _ disable
- msg _ small _ dark _ normal
- msg _ small _ dark _ pressed
- msg _ small _ dark _ disable
- msg _ large _ light _ normal
- msg _ large _ light _ pressed
- msg _ large _ light _ disable
- msg _ large _ dark _ normal
- msg _ large _ dark _ pressed
- msg _ large _ dark _ disable 這是一個比較全的命名，基本上可以應付我們工作做的絕大部分截圖的命名。設計師也可以根據自己的需求簡化命名。
簡化命名
還是上面的栗子。只是條件變了，我們認為這個消息按鈕圖標只有一個地方在用。
- msg_normal
- msg_pressed
- msg_disable 所謂的簡化命名其實是我們去掉了命名中固定屬性部分（大小、主題樣式）。
- 看看我們實際切圖是如何做的，如圖：
命名總結
- 這樣有章可循的命名規則可以讓設計師不用為命名發愁，唯一需要確定的就是名稱部分。
- 這樣命名的切圖在多個平台上（android、ios）直接使用不需要再重命名，最明顯的好處是有兩點。
- 程序猿完全不用考慮圖片命名的問題。
- 設計師換切圖的時候可以直接拷貝到程序資源中覆蓋掉之前的就可以了。（尤其是換圖比較多的時候可以體現出優勢）
切圖管理
目前存在的問題
- 切圖到底放在哪了，我找不到。
- 切圖目錄太多、太亂，我只關心我需要的那部分。
- 項目多了之后應該如果管理，完全沒有套路。
歸類管理
- 管理工具。圖片資源托管在gitlab上(大部分設計師不熟悉git，所有暫時不涉及分支)。
- gitlab項目命名規范。采用命名規則為：平台 _ 項目名，eg：移動端p2p項目->app_p2p。
- 項目目錄層級結構：項目名->版本號->切圖倍率（@2x/@2.88x/@3x）。
- 所有的切圖都放在上面對應的目錄中，程序猿這邊使用git拉下了就行了。
示例（如圖）
效果圖管理
目前存在的問題
- 目前用的比較多是方式是文件拷貝或者文件共享。但此方式不適合異地配合。
- 以文件拷貝的方式那么每次更改的內容說明比較麻煩。
- 效果圖上標准不全，不准確。
- 效果圖標注工作量較大，而且都是苦力活，浪費人生。
更好的方式
使用瀏覽器就能時時看到效果圖及標注。
使用的工具
- 設計工具。app的設計使用sketch。使用插件不用擔心切圖和標准不規范（不過偶爾還是有小誤差，完全可以接受）。
- 使用gitlab進行版本管理。
- 使用jenkins監控gitlab的更新，自動發布到web服務器。
- 需要一個web服務器。
總結
一旦確定了切圖的命名方式和切圖的目錄，那么程序猿和設計師溝通上面會省很多溝通時間，並且我們也希望凡是和UI相關的內容都由設計師這邊來主導。