UI設計命名方法新手必知！

ui設計中規範的命名，有助於對項目中要修改的文件快速查找修改，節約時間成本提高工作效率；如果命名不統一，大家就很難達成共識，任務交接時需要很大的學習成本，所以規範的命名對於團隊協同也有極大的推動作用。ui設計中有哪些命名規範呢？

一、所有文件以小寫英文字母

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

二、命名格式

眾所周知，一個大型項目會分很多模塊，每個模塊由不同的設計師來獨立完成，還有人會專門管理公共的組件，如tabbar、navbar等等，這種情況下就會分為兩種切圖，一種是通用類型的切圖，還有一種就是各個模塊特有的切圖。

通用切片命名格式：

組件_類別_功能_狀態@2x.png

舉例：tabbar_icon_home_default@2x.png

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

模塊特有切圖命名規則：

模塊_類別_功能_狀態@2x.png

舉例：mail_icon_search_pressed@2x.png

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

當然這兩個例子都是比較基本的情況，有很多時候可能一個單詞並不能清楚的描述功能，比如有兩個名字相同的搜索圖標，大小不一，那這種情況你就可以這樣命名：mail_icon_search_big_default@2x.png，我們的原則就是清晰的表達出切片的具體內容並且沒有重複的名稱，希望大家能夠活學活用。（大家要注意，命名中不能含有空格！）

三、常用英文單詞表

如果所有命名都寫為全稱，名字就會特別長，所以我們可以將一些常用的英文單詞進行縮寫，減少工作成本與開發代碼資源。至於怎麼縮寫，只要整個團隊能夠達成共識並且輸出一份縮寫清單，任何縮寫規則都是可以的。

下面提供一些命名時常用的英文單詞列表（有些是已經縮寫過的，僅供參考）

bg（backgrond 背景）

nav（navbar 導航欄）

tab（tabbar 標籤欄）

btn（button 按鈕）

img（image 圖片）

del（delete 刪除）

msg（message 提示信息）

pop（pop up 彈出）

icon（圖標）

selected（選中）

disabled（不可點擊）

default（默認）

pressed（按下）

back（返回）

edit（編輯）

content（內容）

left/center/right（左/中/右）

logo（標識）

login（登錄）

refresh（刷新）

banner（廣告）

link（鏈接）

user（用戶）

download（下載）

note（注釋）

有些人會覺得寫這麼多英文太麻煩，但其實為了自己專業能力的提高，這種規範的命名方式是必須要經歷的過程，當你習慣了這樣的命名方式後，你的成就感會油然而生。

別人給出的規範，不要直接拿來就用，要思考為什麼用這樣的規範，解決什麼樣的問題？你有沒有更好的解決方案？試問一下，蘋果和安卓開發的切圖文件管理機制是怎樣的？有什麼區別？如果這麼基礎的問題你都不知道，而是拿著別人的規範直接套用，那結果就是被別人牽著走。

歡迎各位UI同行及對UI感興趣的小夥伴參加6月3日在中關村3W咖啡館由UXDC舉辦的《新金融-新電商-新設計》設計沙龍分享，詳情請登錄UXDC官網，免費參加哦！