我們都知道一套完整的 App 通常會有很多張切圖，不管是 iPhone 需要 1x、2x、3x 圖檔，Android 需要至少 3 種 hdpi、xhdpi、xxhdpi。在龐大的切圖數量下如何讓負責套圖的 RD 快速找到所需圖檔，檔名的命令方式就需要雙方統一格式方便大家作業。所以，制定一套非常有效而方便的APP切圖命名規範非常有用的。

下面就跟隨小編來詳細瞭解APP切圖命名的流程和命名規範。

ios切圖尺寸規則

目前iPhone有10種型號，5種螢幕尺寸，再加上6plus的“降取樣”（Downsampling）（1080-1920），還有iPhone6和6+上的放大模式（1125-2001）和預設模式（1242-2208），是不是感覺好恐怖？但是不用怕，我分享一套超簡單的適配方法，看完你都不信有這麼簡單~

美術交付給開發的資料有
1、  標註圖（以640為寬度尺寸為基準標註）
2、  2x切圖（以640為寬度尺寸為基準切圖）
3、  3x切圖（以1280為寬度尺寸為基準切圖）

開發看到這份標註圖，可以自己用上面的數字，乘以1.5得出3X的數字。

1.為什麼3x切圖要以1280來為寬度？
其實iPhone6+的尺寸1242*2208作為3X，怎麼算都又難記又不能整除，我們直接640*2得到1280跟1242相差也沒幾十個畫素，最重要的是不虛邊啊，放在真機上看（處女座除外）看不出差別的。
2.為什麼只設寬度？
為了保持長寬比例。iPhone的這幾個尺寸不是正好的，寬度放大後高度總差那麼幾個畫素，這不要緊，千萬別去改高度，手機螢幕是可以上下滑動的嘛。不可以滑動必須保證一屏顯示的除外，手動去調整好了。

Android切圖尺寸規則

px（畫素）是我們UI設計師在PS裡使用的（不解釋），同時也是手機螢幕上所顯示的（也不解釋）
dp是開發寫layout的時候使用的尺寸單位，sp是開發寫layout時關於字型的字號單位，且dp與sp總為1：1關係。

Android支援四種不同的dpi模式：ldpi mdpi hdpi xhdpi xxhdpi

一般地，手機解析度與所執行的dpi模式是匹配的，例如hvga(320×480畫素)的手機螢幕一般在3.5英寸左右，執行在mdpi模式下（也有例外，稍後解釋）（這個是ROM控制的，app不能改變）。當執行在mdpi下時，1dp=1px：也就是說設計師在PS裡定義一個item高48px，開發就會定義該item高48dp；Photoshop中14px大的字型，開發會定義為14sp。

對於一部wvga（480×800）手機（G7、N1、NS），一般是執行在hdpi模式下。當執行在hdpi模式下時，1dp=1.5px：也就是說設計師在PS裡定義一個item高72px，開發就會定義該item高48dp；Photoshop中21px大的字型，開發會定義為14sp。

所以，當你的app需要適配多個dpi模式的時候（例如同時適配mdpi與hdpi），若你在wvga下做設計，你需要將你的各數值都為3的倍數，並在切圖標註時將所有的數字除以3乘以2換算成dp，這樣開發的同一套layout就能用在兩個不同的dpi模式下，而不是寫兩套layout。

mdpi與hdpi是2：3的關係
mdpi與xhdpi是1：2的關係
ldpi與mdpi是3：4的關係

Galaxy Nexus 是720P螢幕，就是執行在xhdpi下的。

再補充一種例外，有些比較山寨的Pad有可能是7英寸螢幕，解析度為wvga（480×800）執行在mdpi下，所以一部wvga手機是320x533dp，一部wvga平板是480x800dp，可以顯示的內容會多很多。

從2013年開始ldpi mdpi hdpi相繼退出了歷史舞臺！以1280*720的720P主要機型佔據了主流，即xhdpi。

2015年預計將會是1080P的天下了，因為從14年下半年到2015年推出的android手機均為1080P，可以預見未來的趨勢！

以下是當前android主要機型規範：

手機常見解析度:

4:3
VGA     640*480 (Video Graphics Array)
QVGA  320*240 (Quarter VGA)
HVGA  480*320 (Half-size VGA)
SVGA  800*600 (Super VGA)

5:3
WVGA  800*480 (Wide VGA)

16:9
FWVGA 854*480 (Full Wide VGA)
HD        1920*1080 High Definition
QHD     960*540
720p    1280*720  標清
1080p  1920*1080 高清

手機:
小米1             854*480(FWVGA)
小米2             1280*720

小米4             1920*1080

解析度對應DPI
"HVGA    mdpi"

"WVGA   hdpi "
"FWVGA hdpi "
"QHD      hdpi "
"720P     xhdpi"
"1080P   xxhdpi "

 APP切圖命名規則

基本上 App 的切圖可分為下面幾大類：

背景、按鈕、圖示、圖片、照片、TabBar icon 等。

為了讓切圖便於管理，通常會依圖片性質命名。例如 bg-xxx.png、btn-xxx.png、img-xxx.png、tab-xxx.png。當圖檔要做給 Retina 螢幕使用時，只要在副檔名前加上「@2x」就可以了。如[email protected]、[email protected] 、[email protected]。在命名時 bg-xxx.png 中間的 – 可以改為 _ 。

iOS HIG 上寫著 Desktop icon 檔案命名使用 -，如果切圖只給 iOS 使用，可以和 iOS 採用相同的命名方式。請注意 Android 不支援 – 的命名方式，如果圖檔要運用在 Android 上，請把所有的 – 改成 _ 底線。最好不要把數字或符號當成檔名的開頭，如 3-icon.png 、+abc.png之類。

背景
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，最基本的按鈕外觀。

點選（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。