移動(dòng)APP如何切圖

發(fā)表日期：2015/7/28 11:40:19 文章編輯：瀏覽次數(shù)：2621

移動(dòng)APP切圖是UI設(shè)計(jì)必須學(xué)會(huì)的一項(xiàng)技能，切圖雖然簡(jiǎn)單，但還是有很多地方需要注意的，下面由tgideas的 LV主唱大人跟大家講講原生App切圖的那些事兒，對(duì)UI入門或需了解APP切圖的設(shè)計(jì)師來(lái)說(shuō)會(huì)有幫助哦。

如何切圖？

了解iphone界面的尺寸

App切圖的那些事兒 - 設(shè)計(jì)達(dá)人

最小的分辨率是320×480，我們把這個(gè)尺寸定為基準(zhǔn)界面尺寸（baseline），基準(zhǔn)尺寸所用的圖標(biāo)定為1倍圖（1x）。

在實(shí)際設(shè)計(jì)過(guò)程中，為了降低設(shè)計(jì)成本，一般拿設(shè)備最高的分辨率作為設(shè)計(jì)稿的原始尺寸，拿iphone來(lái)說(shuō)就是iphone5或5s的640×1136啦，當(dāng)然也可以用iphone4或4s的640×960，因?yàn)閷挾榷际?40px，他們切圖的標(biāo)準(zhǔn)是一樣的。顯然，以1倍圖的基準(zhǔn)尺寸（寬320px）為相對(duì)的參考依據(jù)，寬640px的設(shè)計(jì)稿，以原始尺寸切出來(lái)的圖標(biāo)稱為2倍圖（2x）。

有人可能會(huì)問(wèn)：為什么不拿320px作為設(shè)計(jì)稿的原始尺寸呢？因?yàn)?倍圖放大成為2倍圖遠(yuǎn)比2倍圖縮小成1倍圖來(lái)得模糊！

于是，在不考慮iphone6和iphone 6 plus的情況下，為了適配iphone，每個(gè)圖標(biāo)需要切兩份。

Android - 更為繁多的界面尺寸

Android開(kāi)源自由的代價(jià)就是設(shè)備規(guī)范的不可控，市面上充斥著各種品牌的android手機(jī)，有著各種各樣的尺寸和分辨率，為了適配各種不同分辨率的設(shè)備，同一個(gè)圖標(biāo)需要切成N份，每一份對(duì)應(yīng)一個(gè)尺寸。

另外需要注意的是，Android里面開(kāi)發(fā)用的尺寸單位是dp或sp（dp為元素表現(xiàn)尺寸，sp為字體尺寸）而不是iphone中的px。。。

對(duì)于分辨率繁多的android設(shè)備，為了方便原生應(yīng)用的界面適配，Google按照dpi大小將它們分成了4中模式（MDPI、HDPI、XHDPI和XXHDPI，也許有一天會(huì)增加第五種XXXHDPI，誰(shuí)知道呢）：

App切圖的那些事兒 - 設(shè)計(jì)達(dá)人

看到這里，傳統(tǒng)的web前端同學(xué)可能已經(jīng)凌亂了，iphone用px，android用dp，而視覺(jué)設(shè)計(jì)稿則統(tǒng)一用的px，怎么將使用px作為單位的psd給使用dp作為單位的android app切圖啊???

顯然，我們得花點(diǎn)腦細(xì)胞去弄清楚px與dp的換算關(guān)系。

px與dp的換算關(guān)系

一般情況下，手機(jī)分辨率與所運(yùn)行的dpi模式是匹配的，例如hvga(320×480像素)的手機(jī)屏幕一般在3.5英寸左右，運(yùn)行在mdpi模式下。當(dāng)運(yùn)行在mdpi下時(shí)，1dp=1px：也就是說(shuō)設(shè)計(jì)師以320×480作為設(shè)計(jì)稿的尺寸時(shí)，在PS里定義一個(gè)item高48px，開(kāi)發(fā)就會(huì)定義該item高48dp；Photoshop中14px大的字體，開(kāi)發(fā)會(huì)定義為14sp。

對(duì)于一部wvga（480×800像素）的手機(jī)（G7、N1、NS），一般是運(yùn)行在hdpi模式下。當(dāng)運(yùn)行在hdpi模式下時(shí)，1dp=1.5px：也就是說(shuō)設(shè)計(jì)師以480×800作為設(shè)計(jì)稿的尺寸時(shí)，在PS里定義一個(gè)item高72px，開(kāi)發(fā)就會(huì)定義該item高48dp；Photoshop中21px大的字體，開(kāi)發(fā)會(huì)定義為14sp。

關(guān)于px與dp的更多詳細(xì)信息，請(qǐng)參考文章http://www.zhihu.com/question/19625584

IPhone應(yīng)用切圖尺寸與Android應(yīng)用切圖尺寸的對(duì)應(yīng)關(guān)系

在Android應(yīng)用中，以MDPI為基準(zhǔn)界面尺寸，恰好對(duì)應(yīng)上面提及的iphone應(yīng)用的基準(zhǔn)界面尺寸（320×480），所需的切圖圖標(biāo)為iphone中對(duì)應(yīng)的1倍圖；XHDPI則對(duì)應(yīng)2倍圖，HDPI和XXHDPI可依此類推。

App切圖的那些事兒 - 設(shè)計(jì)達(dá)人

換一種說(shuō)法再看看：如果要以最低的設(shè)計(jì)成本做一個(gè)app，iphone版和android版用的同一套設(shè)計(jì)稿，那么設(shè)計(jì)稿的尺寸最好是640×960像素。因?yàn)檫@個(gè)尺寸切出來(lái)的圖標(biāo)尺寸涵蓋了iphone 3 ~ 5的分辨率，以及android的MDPI、HDPI、XHDPI模式。XXHDPI模式會(huì)自動(dòng)利用低一級(jí)的XHDPI的圖標(biāo)進(jìn)行放大展示。