每次看到設計師命名的「最終版_final_final2.png」，我都忍不住想翻白眼。
切圖命名沒規範，RD 找圖像大海撈針。
想讓專案順利進行？統一命名規則是關鍵！
一個 App 通常會有很多張切圖，不管是 iPhone 需要 1x、2x 圖檔，Android 需要至少 3 種 hdpi、xhdpi、xxhdpi。
在龐大的切圖數量下如何讓負責套圖的 RD 快速找到所需圖檔，檔名的命令方式就需要雙方統一格式方便大家作業。
補充：圖中出現的 AAA-1.png 之類命名方式是錯誤示範，早期不懂事，請用「圖片類型_分類_用途_狀態.png」這種方式命名。
基本上 App 的切圖可分為數大類：背景、按鈕、圖示、圖片、照片、TabBar icon 等。
為了讓切圖便於管理，通常會依圖片性質命名。
例如 bg-xxx.png、btn-xxx.png、img-xxx.png、tab-xxx.png。
當圖檔要做給 Retina 螢幕使用時，只要在副檔名前加上「@2x」就可以了。
如 bg-xxx@2x.png、btn-xxx@2x.png 、icon-xxx@2x.png。
在命名時 bg-xxx.png 中間的 - 可以改為 _ 。
iOS HIG 上寫著 Desktop icon 檔案命名使用 -，如果切圖只給 iOS 使用，可以和 iOS 採用相同的命名方式。
請注意 Android 不支援 - 的命名方式，如果圖檔要運用在 Android 上，請把所有的 - 改成 _ 底線。
最好不要把數字或符號當成檔名的開頭，如 3-icon.png、+abc.png 之類。
以下由「微波效應」這個（年代久遠）的 iPhone App 為範例。
背景
bg-xxx.png，從整個頁面的大底圖、某個 TableView 的欄位底圖、Navigation Bar 的底圖都可算在背景範圍內。
頁面背景
要留意整個畫面的高度，大多數的頁面需要扣除狀態列和 Navigation Bar 高度，如果畫面上有 Tab Bar 的話，底圖尺寸會更小。
TableView 欄位底圖
運用在列表。
列表欄位內容可能包含縮圖、說明文字、箭頭等。
為了美感或是加快開發效率，有時會將縮圖和箭頭等直接做在底圖上，遇到這種情形請先向 RD 討論確認單一欄位內擁有哪些元素、又有哪些元素要直接做在底圖上。
按鈕底圖
按鈕有很多種不同的作法，有的是將整個按鈕連帶文字一起切圖，有的運用在內建按鈕上、底圖和文字是分開的。
在這邊指的是底圖和文字分開的按鈕，這種作法優點在於按鈕可隨文字長度自行加長縮短，底圖也會自行延展，不需將 App 內所有的按鈕都切圖出來。
按鈕的切圖常以 btn-xxx.png 來命名 。
App 裡的按鈕擁有 4 種屬性，分別為一般、點擊、不能點擊、選中。
但不追求精緻與完整度的話，只出一般屬性按鈕圖檔就可以了，在 iOS 上 RD 能在使用者點擊按鈕時將原圖檔變暗做為點擊提示。
（Android App 按鈕就一定要 2 張圖，一般狀態、點擊狀態。）
一般（normal）
btn-xxx-n.png，最基本的按鈕外觀。
一般（normal）
btn-xxx-n.png，最基本的按鈕外觀。
點擊（highlight）
btn-xxx-h.png，使用者觸摸螢幕碰到按鈕，為了告知使用者有點擊到而出現的回應提示。
不能點擊(disabled)
btn-xxx-d.png，代表App有這功能但使用者無法使用。
例如如安裝在iPod上的App有播打電話功能時。
既然不能被點擊乾脆直接隱藏的作法也是有的。
要直接將按鈕隱藏或是以不能被點擊的狀態呈現需視情況決定。
選中(selected)
btn-xxx-s.png，選中出現在有複數選項時，但通常不會把按鈕拿去做複數選項控件，這種按鈕狀態出現的機會不高。
此外，圖示、圖片、照片我也習慣有固定的命名方式。
主要是讓 RD 能夠快速套圖，並沒有硬性規定該如何將圖檔分類命名。
圖示：icon-xxx.png。
圖片：pic-xxx.png 或是 img-xxx.png。
照片：pho-xxx.png。
PS.如果是流水號的話，要從 0 開始編號喔！
TabBar 上的 icon 作法較特殊，雖然它是 icon，但我不會以 icon-xxx.png 來命名。
為了和其他 icon 作區隔，我會使用 tab-xxx.png 來表示。
（App：App Store）
若使用 iOS 內建的 TabBar，則 icon 尺寸、製圖方式都需依照規範。
在 iOS5 之後 TabBar 可以變更 底圖和 icon 圖，不受黑底白 icon 的限制。
TabBar 可分成三層：底圖層、選中時的高光層、icon層。
（App：Find my friends）
底圖層、高光層會因為 TabBar 個數不同而自動延伸，高度為 49px。
icon 需依 Guideline 製作 30x30px。
加上選中時 icon 會改變，因此 TabBar 的切圖共有 4 個部份：底圖、選中時的高光、一般情況下的 icon、被選中時的 icon。
又是一篇很久以前就寫好的文，截圖有點舊，大家就加減看吧。
遇到圖檔案數非常多的大型 App，我會在命名時多一層區隔，註明這張圖是用在什麼地方，比如 icon-side-setup.png，從檔名就能大概猜出這張 icon 圖應該是用在 Side Menu 。
以上命名方式是我慣用的，每位 UI 習慣的命名方式都不太一樣，沒有標準格式。
總而言之，檔名這回事也是 RD 說好就好，不確定要怎麼做的話，就去問他們吧。
