App 切圖規範

如何切圖？ 

瞭解iphone界面的尺寸

最小的分辨率是320x480，咱們把這個尺寸定爲基準界面尺寸（baseline），基準尺寸所用的圖標定爲1倍圖（1x）。 

在實際設計過程當中，爲了下降設計成本，通常拿設備最高的分辨率做爲設計稿的原始尺寸，拿iphone來講就是iphone5或5s的640x1136啦，固然也能夠用iphone4或4s的640x960，由於寬度都是640px，他們切圖的標準是同樣的。顯然，以1倍圖的基準尺寸（寬320px）爲相對的參考依據，寬640px的設計稿，以原始尺寸切出來的圖標稱爲2倍圖（2x）。

有人可能會問：爲何不拿320px做爲設計稿的原始尺寸呢？由於1倍圖放大成爲2倍圖遠比2倍圖縮小成1倍圖來得模糊！

因而，在不考慮iphone6和iphone 6 plus的狀況下，爲了適配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像素）的手機（G七、N一、NS），通常是運行在hdpi模式下。當運行在hdpi模式下時，1dp=1.5px：也就是說設計師以480x800做爲設計稿的尺寸時，在PS裏定義一個item高72px，開發就會定義該item高48dp；Photoshop中21px大的字體，開發會定義爲14sp。

關於px與dp的更多詳細信息，請參考文章http://www.zhihu.com/question/19625584

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的圖標進行放大展現。

把切圖交給工具

看了上面說起的各類界面尺寸，若是全手工切，一次切完你能忍。若是切完了還有各類圖標的增長、修改，沒幾回你多半會崩潰血噴屏幕～

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

推薦切圖工具1 - cut&slice me

  

推薦切圖工具2 - cutterman

推薦切圖工具3 - devRocket

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

小結

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

參考資料

1. http://www.zcool.com.cn/article/ZNTMwOTI=.html

2. http://blog.csdn.net/iunion/article/details/9449703