B 端產(chǎn)品服務(wù)于企業(yè)、產(chǎn)品、研發(fā)，目的是要幫助 B 端企業(yè)解決問(wèn)題。我們?cè)诠ぷ髦袑?duì)于圖標(biāo)的命名規(guī)范有良好習(xí)慣非常重要的，規(guī)范的命名方式可以提高設(shè)計(jì)與開(kāi)發(fā)人員的的效率，既方便設(shè)計(jì)又方便開(kāi)發(fā)人員，我憑借多年工作經(jīng)驗(yàn)，編寫一份命名規(guī)范給大家，供大家使用。

設(shè)計(jì)師、開(kāi)發(fā)工程師，包括 H5 前端開(kāi)發(fā)人員都可以記住的文件命名規(guī)范。

一、 切圖命名英文縮寫的 3 個(gè)原則

較短的單詞可以通過(guò)去掉"元音"形成縮寫。

較長(zhǎng)的單詞可以以單詞的頭部幾個(gè)字母形成縮寫。

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

二、 命名規(guī)則

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

舉例：tabbar_icon_home_default@2x.png

（對(duì)應(yīng)中文：標(biāo)簽欄_圖標(biāo)_主頁(yè)_默認(rèn)@2x.png）

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

舉例：bill_icon_search_pressed@2x.png

（對(duì)應(yīng)的中文為：賬單_圖標(biāo)_搜索_ 默認(rèn)@2x.png）

三、 名詞解釋

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

控件專題：https://www.uisdc.com/zt/interactive-control

「模塊」：一般指頁(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)。

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

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

四、UI 文件命名規(guī)范常用詞

組件（系統(tǒng)控件庫(kù)）

資源類型

功能命名

常見(jiàn)狀態(tài)

界面命名

位置排序

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

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

五、常用界面命名

啟動(dòng)界面

啟動(dòng)圖片：default.png

啟動(dòng)：logo default.png

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

登錄界面

登錄背景：login_bg.png

登錄 logo：login_logo.png

輸入框：login_input.png

輸入框選中狀態(tài)：login_input_pre.png

登錄按鈕：login_btn.png

登錄按鈕選中狀態(tài)：login_btn_pre.png

導(dǎo)航欄按鈕 (nav) 命名

nav_功能描述.png

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

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

一般：normal btn_xxx_nor.png

點(diǎn)擊：highlight btn_xxx_hig.png

不能點(diǎn)擊：disabled btn_xxx_disa.png

按下：pressed btn_xxx_pre.png

選中：selected btn_xxx_sel.png 復(fù)數(shù)選擇出現(xiàn)機(jī)會(huì)不高

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

如：btn_blue.png\btn_blue.9.png 藍(lán)色按鈕

其他命名

圖標(biāo)：icon_xxx.png

圖片：pic_xxx.png 或是 img_xxx.png

照片：pho_xxx.png

左側(cè)導(dǎo)航 命名 leftbar_功能描述.png

如：leftbar_info.png\leftbar_info_pre.png 個(gè)人中心

底部選項(xiàng)卡按鈕（TabBar）

命名 Tab_功能描述.png

如：tab_set.Png\nav_set_pre.png 設(shè)置

主頁(yè)命名

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

如：home_menu_recommended.png 熱門推薦

ps：描述可用英文或拼音開(kāi)頭字母組合等

列表頁(yè)命名規(guī)則

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

如：list_menu_collect.png 列表頁(yè)收藏按鈕

總結(jié)

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

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

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

作者：GivesDesign