最小的解析度是320x480，我們把這個尺寸定為基準介面尺寸（baseline），基準尺寸所用的圖示定為1倍圖（1x）。 

在實際設計過程中，為了降低設計成本，一般拿裝置最高的解析度作為設計稿的原始尺寸，拿iPhone來說就是iphone5或5s的640x1136啦，當然也可以用iPhone4或4s的640x960，因為寬度都是640px，他們切圖的標準是一樣的。顯然，以1倍圖的基準尺寸（寬320px）為相對的參考依據，寬640px的設計稿，以原始尺寸切出來的圖示稱為2倍圖（2x）。

有人可能會問：為什麼不拿320px作為設計稿的原始尺寸呢？因為1倍圖放大成為2倍圖遠比2倍圖縮小成1倍圖來得模糊！

於是，在不考慮iPhone 

Android - 更為繁多的介面尺寸

Android開源自由的代價就是裝置規範的不可控，市面上充斥著各種品牌的android手機，有著各種各樣的尺寸和解析度，為了適配各種不同解析度的裝置，同一個圖示需要切成N份，每一份對應一個尺寸。

另外需要注意的是，Android裡面開發用的尺寸單位是dp或sp（dp為元素表現尺寸，sp為字型尺寸）而不是iphone中的px。。。

對於解析度繁多的android裝置，為了方便原生應用的介面適配，Google按照dpi大小將它們分成了4中模式（MDPI、HDPI、XHDPI和XXHDPI，也許有一天會增加第五種XXXHDPI，誰知道呢）：

 看到這裡，傳統的web前端同學可能已經凌亂了，iphone用px，android用dp，而視覺設計稿則統一用的px，怎麼將使用px作為單位的psd給使用dp作為單位的android app切圖啊???

顯然，我們得花點腦細胞去弄清楚px與dp的換算關係。

px與dp的換算關係

一般情況下，手機解析度與所執行的dpi模式是匹配的，例如hvga(320x480畫素)的手機螢幕一般在3.5英寸左右，執行在mdpi模式下。當執行在mdpi下時，1dp=1px：也就是說設計師以320x480作為設計稿的尺寸時，在PS裡定義一個item高48px，開發就會定義該item高48dp；Photoshop中14px大的字型，開發會定義為14sp。

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

iPhone應用切圖尺寸與Android應用切圖尺寸的對應關係

在Android應用中，以MDPI為基準介面尺寸，恰好對應上面提及的iPhone應用的基準介面尺寸（320x480），所需的切圖圖示為iPhone中對應的1倍圖；XHDPI則對應2倍圖，HDPI和XXHDPI可依此類推。

換一種說法再看看：如果要以最低的設計成本做一個app，iPhone版和android版用的同一套設計稿，那麼設計稿的尺寸最好是640x960畫素。因為這個尺寸切出來的圖示尺寸涵蓋了iPhone 3~5的解析度，以及android的MDPI、HDPI、XHDPI模式。XXHDPI模式會自動利用低一級的XHDPI的圖示進行放大展示。

把切圖交給工具

看了上面提及的各種介面尺寸，如果全手工切，一次切完你能忍。如果切完了還有各種圖示的增加、修改，沒幾次你多半會崩潰血噴螢幕～

幸好我們有一些很好的切圖工具可以用，具體使用方法可參考它們的官網教程。

注：damao推薦，看了官網好像很強悍的樣子，但是收費哦。

小結

藉助工具，原生App中的切圖變得簡易，但是“一個圖示要切多套尺寸”的問題依舊沒有改變，有沒有更好的圖示解決方案呢？譬如應用網頁應用中的圖示字型？ 敬請期待《Iconfont在原生App中的應用》。

參考資料