2020年8月21日下午4點50分?黃河公園

通常我們在界面設計完成之后要切圖給到前端開發。初做UI設計時，把重點都放在設計效果圖上，對之后的切圖命名規范沒有很注重。當時我會有一些疑惑，切圖命名的原則是什么？直接命名為能表達清楚的名稱不就可以嗎？后來做的項目多了也知道了切圖命名規范的重要性。如果你直接命名為中文或者拼音給到開發，會無形之中給開發同事增加工作量，可能開發同事對你的命名沒有嚴格要求，但是在他們進行開發時都是自己去更改切圖名稱，這樣就很浪費時間，也顯得設計師不是很專業。所以在設計效果圖完成之后，我們在切圖時直接把切圖命名好，這樣極大節省程序員開發的時間成本，有助于團隊協同，也是對設計師自身的嚴格要求，讓我們對設計保持嚴謹性，專業性。

幾種切圖命名規則

控件_類別_功能_狀態

舉例：nav_icon_search_normal

對應中文：導航欄_圖標_搜索_正常

類別_功能_狀態

舉例：icon_search_normal

對應中文：圖標_搜索_正常

模塊_類別_功能_狀態

舉例：home_icon_search_pressed

對應中文：主頁_圖標_搜索_按下

注意事項

1.命名用英文

2.命名中不能含有空格

3.用下劃線連接

如果一個圖標的英文是由2個或者更多的詞匯組成，那也需要用下劃線連接，不要用空格或者其他符號

4.較長的單詞可取單詞的頭部幾個字母形成縮寫

例如：bg(background)、pic(picture)、tab(tabbar)

5.不要有重復的名字，會被覆蓋

命名中不要有重復的英文名，如果有重復的名字，上傳時會被其中一個覆蓋，如果有相同命名的圖標，我們要想辦法區分，可以換個表達方式或者功能后面加上數字1、2、3、區分開

常用英文單詞表

控件名稱：

狀態欄：status bar? ?

搜索欄：search bar? ?

導航欄：nav bar/nav_? ?

標簽欄：tab bar/tab_? ?

彈窗：popup ??

開關：switch ??

選擇器：pickers? ?

工具欄：tool bar? ?

單選框：radio? ?

復選框：checkbox? ?

背景：background? ?

標志：logo? ?

蒙版、遮罩：mask

功能命名：

添加：add??

卸載：uninstall? ?

查看：view? ?

搜索：search? ?

關閉：close? ?

下載：download? ?

取消：cancel? ??

刪除：delete? ?

暫停：pause? ?

導入：import? ?

繼續：continue? ?

等待：waiting? ?

后退：back? ??

導出：export? ?

安裝：install

常見狀態：

普通：normal? ?

默認：default? ?

按下：pressed? ?

選中：selected? ?

禁用：disabled? ?

已訪問：visited? ?

懸停：hover

總結

切圖命名不是一成不變的，在實際工作當中，還是需要多思考和靈活使用。其實命名規范主要就是為了程序員更好的進行開發工作，節約前端開發的時間成本。所以有什么不懂的地方要和開發同事多溝通，這樣才能使團隊協作更高效，也能凸顯出設計師的專業性，豈不是一舉兩得～

總結

以上是生活随笔為你收集整理的svgaps绘制时不能用中文命名吗_设计师需要了解的切图命名规范的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。