iOS 及 Android 應用開發中,怎樣命名和管理切圖資源最科學?

這裡主要指當應用功能較複雜,切圖很多時,如何命名和管理切圖更方便開發查找。

比如 The ustwo? Pixel Perfect Precision Handbook 中推薦的命名方式是「type_location_identifier_state」,如 btn_home_add_pressed.png。這樣是否科學合理?看起來 location 放最前面更方便查找。

另外在管理上,應該把切圖放在同一個目錄里還是把它們按不同功能分放在不同目錄下?


0、首先,一切都要建立在iOS和Android自身規律的前提下(比如iOS的@2X 和Android中各dpi文件夾下的同名文件),如果兩個平台使用的是同一套設計和資源,一定要搞好對應,尤其是在批量替換圖片的時候,寫個自動化工具吧。
1、不管是圖片資源,還是開發自己用XML/代碼寫的背景/selector,文件名字只應該表明「這是幹什麼用的」,而不應該描述「這是長什麼樣的」。諸如@劉少鵬 提到一個不太恰當的例子「tabbar_btn_red_n.png」,相信我,如果你的產品有多個分支,每個分支都是不同皮膚,出現「red」字樣的圖片資源真的很不合適,用「text_title」真的要比「text_black」科學得多。這不僅應該貫穿在圖片命名中,也應體現在代碼的編寫中。
2、命名時,第一個單詞最重要,因為它決定了順序和檢索效率。個人不推薦「 btn_home_add_pressed.png」這樣的寫法,這種看起來很科學,但是使用起來尤其不方便,我說的是,工程師在代碼中引用圖片名稱的時候,輸入四個字元「btn_」後,會有很長一列搜索結果,如果你把跟詳細的描述放在首位,效果會好很多,工程師們會感激你的~
3、如果版本分支複雜到一定程度,圖片資源也使用VCS吧。


談談我的切圖管理經驗:

  1. 切圖分層級命名+分文件夾管理:命名盡量不要太多,一般是 「定位+類型+一級屬性+二級屬性」,例如一個切圖文件的命名是「tabbar_btn_red_n.png」,tabbar 導航欄,btn 按鈕,n normal 狀態(這個方法@侯智 提出的命名要優於這個命名方法,所以實踐起來我在慢慢轉向侯智提的方法);後來,跟開發溝通後有必要增加以文件夾分類,因為切圖量大了之後對於開發來說仍然不好定位切圖,實際操作中,定位這個層級我會在相應文件夾中用其他更加細節(例如 home 頁面專門用到的就加上home)來代替;
  2. 分版本同等級管理:例如該項目的名字是「項目甲」,那麼在項目甲中是「版本+文件類型」命名的文件夾分類,例如:1.0源文件、1.0切圖、1.0規範、2.0源文件、2.0切圖等......
  3. 不同項目同樣按照「項目+項目屬性」命名管理:多個項目往往是有不同的平台,例如我命名是:項目甲 iPhone、項目甲 Android、項目甲 Web......諸如此類。如果項目不大,則會把平台直接併入切圖的分類。

說說我這麼做的原因:

  1. 減少層級,名字+屬性就是為了減少層級,而且不引起混淆去命名的;
  2. 能快速查找到該項目,一般查找起來的話,直接找到那個切圖不太可能,靠譜的是找到切圖所在項目的具體版本的平台;蘋果的 spotlight 使用起來非常方便;

拋個大磚塊,期待其他人的分享。

2013年7月21日增加:

感謝@侯智 指出來我的錯誤。
他認為命名時應該以使用導向命名,這樣對於檢索效率有很大提升,這點非常贊同,為此也請教了一位開發朋友,這說明溝通很重要。


感謝@@侯智@劉少鵬分享的經驗,在命名中說明圖片的用途確實是很有效的方法;把更詳細的信息放在首位。


推薦閱讀:

iOS 系統中,H.264 視頻流可以硬體解碼嗎? 具體如何實現?
iOS 8 新增 4000 多個 API,重要的有哪些?
一個IOS程序員,每天其實就坐著,偶爾寫寫代碼,大部分時間就看看文檔,一天8小時工作,為何還是累到爆每天?
下圖中兩種樣式的返回按鈕,視覺上的主要差別在哪?

TAG:設計 | iOS開發 | Android開發 | 應用開發 | 切圖 |