B 端產品服務于企業、產品、研發，目的是要幫助 B 端企業解決問題。我們在工作中對于圖標的命名規范有良好習慣非常重要的，規范的命名方式可以提高設計與開發人員的的效率，既方便設計又方便開發人員，我憑借多年工作經驗，編寫一份命名規范給大家，供大家使用。

設計師、開發工程師，包括 H5 前端開發人員都可以記住的文件命名規范。

更多命名干貨：

一、 切圖命名英文縮寫的 3 個原則

較短的單詞可以通過去掉“元音”形成縮寫。

較長的單詞可以以單詞的頭部幾個字母形成縮寫。

還有一些約定成俗的英文單詞縮寫。

二、 命名規則

通用切圖命名：組件_類別_功能_狀態@2x.png

舉例：tabbar_icon_home_default@2x.png

（對應中文：標簽欄_圖標_主頁_默認@2x.png）

模塊特有切圖命名：模塊_類別_功能_狀態@2x.png

舉例：bill_icon_search_pressed@2x.png

（對應的中文為：賬單_圖標_搜索_ 默認@2x.png）

三、 名詞解釋

「控件/組件」：比較獨立的可以操作界面元素。如 狀態欄、搜索欄、彈出窗口等。

控件專題：http://www.hx168888.com/zt/interactive-control

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

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

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

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

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

四、UI 文件命名規范常用詞

組件（系統控件庫）

資源類型

功能命名

常見狀態

界面命名

位置排序

注：所有命名全部為小寫英文字母。

我們的目標是讓開發直接拿我們的切圖進行使用，不能夠隨意修改名稱，但是我們要知道，開發小哥哥的代碼里只有小寫的英文字母，如果你給出的命名全是中文的，那么他們是一定會更改的。所以命名全部用小寫的英文字母是最基本的規則。

五、常用界面命名

啟動界面

啟動圖片：default.png

啟動：logo default.png

如：default.png\defoult@2x.png\default-568@2x.png

登錄界面

登錄背景：login_bg.png

登錄 logo：login_logo.png

輸入框：login_input.png

輸入框選中狀態：login_input_pre.png

登錄按鈕：login_btn.png

登錄按鈕選中狀態：login_btn_pre.png

導航欄按鈕 (nav) 命名

nav_功能描述.png

如：nav_menu.png\nav_menu_pre.png（同按鈕選中前后兩種狀態命名 ）

按鈕命名（btn 可重復使用按鈕)

一般：normal btn_xxx_nor.png

點擊：highlight btn_xxx_hig.png

不能點擊：disabled btn_xxx_disa.png

按下：pressed btn_xxx_pre.png

選中：selected btn_xxx_sel.png 復數選擇出現機會不高

btn_功能屬性或色彩均可.png

如：btn_blue.png\btn_blue.9.png 藍色按鈕

其他命名

圖標：icon_xxx.png

圖片：pic_xxx.png 或是 img_xxx.png

照片：pho_xxx.png

左側導航 命名 leftbar_功能描述.png

如：leftbar_info.png\leftbar_info_pre.png 個人中心

底部選項卡按鈕（TabBar）

命名 Tab_功能描述.png

如：tab_set.Png\nav_set_pre.png 設置

主頁命名

命名 home_功能屬性＋描述.png

如：home_menu_recommended.png 熱門推薦

ps：描述可用英文或拼音開頭字母組合等

列表頁命名規則

命名 List_功能屬性＋描述.png

如：list_menu_collect.png 列表頁收藏按鈕

總結

以上是總結了切圖的命名規范，之后再詳談切圖規范。

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

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

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