移動APP如何切圖
發(fā)表日期:2015/7/28 11:40:19 文章編輯: 瀏覽次數(shù):2409
移動APP切圖是UI設(shè)計必須學(xué)會的一項技能,切圖雖然簡單,但還是有很多地方需要注意的,下面由tgideas的 LV主唱大人 跟大家講講原生App切圖的那些事兒,對UI入門或需了解APP切圖的設(shè)計師來說會有幫助哦。
如何切圖?
了解iphone界面的尺寸
最小的分辨率是320×480,我們把這個尺寸定為基準(zhǔn)界面尺寸(baseline),基準(zhǔn)尺寸所用的圖標(biāo)定為1倍圖(1x)。
在實(shí)際設(shè)計過程中,為了降低設(shè)計成本,一般拿設(shè)備最高的分辨率作為設(shè)計稿的原始尺寸,拿iphone來說就是iphone5或5s的640×1136啦,當(dāng)然也可以用iphone4或4s的640×960,因?yàn)閷挾榷际?40px,他們切圖的標(biāo)準(zhǔn)是一樣的。顯然,以1倍圖的基準(zhǔn)尺寸(寬320px)為相對的參考依據(jù),寬640px的設(shè)計稿,以原始尺寸切出來的圖標(biāo)稱為2倍圖(2x)。
有人可能會問:為什么不拿320px作為設(shè)計稿的原始尺寸呢?因?yàn)?倍圖放大成為2倍圖遠(yuǎn)比2倍圖縮小成1倍圖來得模糊!
于是,在不考慮iphone6和iphone 6 plus的情況下,為了適配iphone,每個圖標(biāo)需要切兩份。
Android - 更為繁多的界面尺寸
Android開源自由的代價就是設(shè)備規(guī)范的不可控,市面上充斥著各種品牌的android手機(jī),有著各種各樣的尺寸和分辨率,為了適配各種不同分辨率的設(shè)備,同一個圖標(biāo)需要切成N份,每一份對應(yīng)一個尺寸。
另外需要注意的是,Android里面開發(fā)用的尺寸單位是dp或sp(dp為元素表現(xiàn)尺寸,sp為字體尺寸)而不是iphone中的px。。。
對于分辨率繁多的android設(shè)備,為了方便原生應(yīng)用的界面適配,Google按照dpi大小將它們分成了4中模式(MDPI、HDPI、XHDPI和XXHDPI,也許有一天會增加第五種XXXHDPI,誰知道呢):
看到這里,傳統(tǒng)的web前端同學(xué)可能已經(jīng)凌亂了,iphone用px,android用dp,而視覺設(shè)計稿則統(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下時,1dp=1px:也就是說設(shè)計師以320×480作為設(shè)計稿的尺寸時,在PS里定義一個item高48px,開發(fā)就會定義該item高48dp;Photoshop中14px大的字體,開發(fā)會定義為14sp。
對于一部wvga(480×800像素)的手機(jī)(G7、N1、NS),一般是運(yùn)行在hdpi模式下。當(dāng)運(yùn)行在hdpi模式下時,1dp=1.5px:也就是說設(shè)計師以480×800作為設(shè)計稿的尺寸時,在PS里定義一個item高72px,開發(fā)就會定義該item高48dp;Photoshop中21px大的字體,開發(fā)會定義為14sp。
關(guān)于px與dp的更多詳細(xì)信息,請參考文章http://www.zhihu.com/question/19625584
IPhone應(yīng)用切圖尺寸與Android應(yīng)用切圖尺寸的對應(yīng)關(guān)系
在Android應(yīng)用中,以MDPI為基準(zhǔn)界面尺寸,恰好對應(yīng)上面提及的iphone應(yīng)用的基準(zhǔn)界面尺寸(320×480),所需的切圖圖標(biāo)為iphone中對應(yīng)的1倍圖;XHDPI則對應(yīng)2倍圖,HDPI和XXHDPI可依此類推。
換一種說法再看看:如果要以最低的設(shè)計成本做一個app,iphone版和android版用的同一套設(shè)計稿,那么設(shè)計稿的尺寸最好是640×960像素。因?yàn)檫@個尺寸切出來的圖標(biāo)尺寸涵蓋了iphone 3 ~ 5的分辨率,以及android的MDPI、HDPI、XHDPI模式。XXHDPI模式會自動利用低一級的XHDPI的圖標(biāo)進(jìn)行放大展示。
把切圖交給工具
看了上面提及的各種界面尺寸,如果全手工切,一次切完你能忍。如果切完了還有各種圖標(biāo)的增加、修改,沒幾次你多半會崩潰血噴屏幕~
幸好我們有一些很好的切圖工具可以用,具體使用方法可參考它們的官網(wǎng)教程。
推薦切圖工具1 - cut&slice me
推薦切圖工具2 - cutterman
推薦切圖工具3 - devRocket
注:damao推薦,看了官網(wǎng)好像很強(qiáng)悍的樣子,但是收費(fèi)哦。
--------北京網(wǎng)站建設(shè)公司 北京傳誠信 --------
-
免費(fèi)SSL證書申請網(wǎng)站topssl.cn上線
日期:2024-09-23 瀏覽次數(shù):1089
-
如何在北京順義尋找一個踏實(shí)的網(wǎng)站建設(shè)公司
日期:2023-08-10 瀏覽次數(shù):4141
-
順義網(wǎng)站建設(shè):北京順義網(wǎng)站建設(shè)的優(yōu)點(diǎn)
日期:2023-05-25 瀏覽次數(shù):4565
-
選擇網(wǎng)站公司需要考慮哪些因素
日期:2023-05-25 瀏覽次數(shù):3425
-
北京模板建站
日期:2023-03-28 瀏覽次數(shù):3606
-
關(guān)于2019年設(shè)計用戶界面的思考
日期:2019-02-27 瀏覽次數(shù):2243
-
優(yōu)秀網(wǎng)站設(shè)計公司特性
日期:2018-10-25 瀏覽次數(shù):2402
-
設(shè)計網(wǎng)站的設(shè)計師要練習(xí)適當(dāng)?shù)奈淖珠g格。
日期:2015-07-17 瀏覽次數(shù):2420
-
如何使用頁面停留時間來提升您的SEO
日期:2019-03-07 瀏覽次數(shù):2445
-
如何減少網(wǎng)站加載時間
日期:2019-04-15 瀏覽次數(shù):2173