做一全套的APP設(shè)計(jì)，無非就是

1.界面設(shè)計(jì)：設(shè)計(jì)iOS界面，設(shè)計(jì)Android界面;

切圖：切iOS的2倍圖和3倍圖，切Android的hdpi,xhdpi,xxhdpi這三個(gè)尺寸的圖;

2.標(biāo)注：以px為單位標(biāo)注iOS界面的尺寸，以dp,sp為單位標(biāo)Android的尺寸。

iOS/Android

(一)屏幕尺寸

指實(shí)際的物理尺寸，為屏幕對(duì)角線的測(cè)量。

手機(jī)尺寸計(jì)算方式=對(duì)角線尺寸/2.54

目前，iPhone實(shí)際屏幕有3.5英寸/4英寸/4.7英寸/5.5英寸的屏幕大小，而為了簡單起見，Android把實(shí)際屏幕尺寸分為五個(gè)廣義的大小。

(二)分辨率與像素密度，倍率與邏輯像素

PPI(PixelsPerInch)：像素密度，指屏幕上顯示的像素個(gè)數(shù)，單位尺寸內(nèi)像素點(diǎn)越多，顯示的圖像就越清楚。Retina屏比普通屏清晰很多，就是因?yàn)樗南袼孛芏确艘槐?。它不是一個(gè)測(cè)量物理大小的單位，這項(xiàng)指標(biāo)是連接數(shù)字世界與物理世界的橋梁?？梢杂幸粋€(gè)2560*1440的屏幕可以跟墻一樣大，也可以跟腦袋一樣小。就像iPhone3gs的屏幕像素是320×480，iPhone4s的屏幕像素是640×960。剛好兩倍，然而兩款手機(jī)都是3.5英寸的。

DPI(DotsPerInch)：指每英寸有多少個(gè)顯示點(diǎn)

市場(chǎng)上iOS分辨率有：640×960、640×1136、750×1334、1242×2208

目前iOS采用750×1334的分辨率來設(shè)計(jì)。(iPhone6/6s)

市場(chǎng)上Android主流分辨率有：480×800、720×1280、1080×1920(其他的早該淘汰了，忽略不計(jì))。

目前，Android把像素密度分為了五個(gè)廣義的大?。?/p>

ldpi(low低密度)[0.75倍]~120dpi→1dp=0.75px

mdpi(medium標(biāo)準(zhǔn)密度)[1倍]~160dpi→1x→1dp=1px=1pt→@1x(iPhone3gs)

hdpi(high高密度)[1.5倍]~240dpi(480*800)→1dp=1.5px

(這里240dpi并不一定是480*800的分辨率，同樣的屏幕密度可以得到無數(shù)種分辨率，只需要改變屏幕尺寸就可以了。相同密度下不同分辨率只是在這個(gè)范圍內(nèi)共用一套資源切圖而已。設(shè)計(jì)效果圖時(shí)不用考慮這些，可以把480*800的分辨率“當(dāng)成”是在240dpi下的設(shè)計(jì)。)

xhdpi(extra-high超高密度)[2倍]~320dpi(720*1280)→2x→1dp=2px=1pt→@2x(iPhone4/4s/5/5c/5s/6/6s~326ppi)

目前Android采用720×1280的分辨率來設(shè)計(jì)。(目前為止720*1280的市場(chǎng)占有率還是比較高。但是由于技術(shù)水平的不斷提升，今后一定會(huì)采用1080*1920的來設(shè)計(jì))

(在5種輸出的分辨率MDPI，HDPI，XHDPI，XXHDPI，XXXHDPI中按中間值XHDPI設(shè)計(jì)，讓開發(fā)進(jìn)行適配。即以720px*1280px為標(biāo)準(zhǔn)，72像素英寸)

xxhdpi(extra-extra-high超清密度)[3倍]~480dpi(1080*1920)→3x→1dp=3px=1pt→@3x(iPhone6/6splus~401ppi)

(于設(shè)計(jì)來說，選取一個(gè)合適的尺寸作為正常大小和中等屏幕密度，然后向下和向上做小、大、特大和低、高、超高的尺寸與密度。)

(三)單位

PX：像素=DP×(DPI/160)

例如，在一個(gè)240dpi的屏幕里，1DP等于1.5PX。

PT：指點(diǎn)，PT用在Apple上，DP用在Android上，本質(zhì)相同。簡而言之，它們能定義獨(dú)立于設(shè)備的像素比的大小，這會(huì)包含在不同角色(如設(shè)計(jì)師與工程師)之間的討論規(guī)則中。

DP(Dip)：指獨(dú)立于設(shè)備的像素點(diǎn)。android開發(fā)中用于描述尺寸和間距。相當(dāng)于一種比例換算單位，它可以保證控件在不同密度的屏幕上按照這個(gè)比例單位換算顯示相同的效果。

SP：和DP、PT用途上來講不同，工作方式相同，SP表示與比例無關(guān)的像素，只是用于描述字號(hào)和行距。同時(shí)也是為了保證文字在不同密度的屏幕上顯示相同的效果。

單位決定了我們的思考方式。在設(shè)計(jì)和開發(fā)過程中，應(yīng)該盡量使用邏輯像素尺寸來思考界面。設(shè)計(jì)Android應(yīng)用時(shí)，有的設(shè)計(jì)師喜歡把畫布設(shè)為1080×1920，有的喜歡設(shè)成720×1280。給出的界面元素尺寸就不統(tǒng)一了。Android的最小點(diǎn)擊區(qū)域尺寸是48x48dp，這就意味著在xhdpi的設(shè)備上，按鈕尺寸至少是96x96px。而在xxhdpi設(shè)備上，則是144x144px。

無論畫布設(shè)成多大，我們?cè)O(shè)計(jì)的是基準(zhǔn)倍率的界面樣式，而且開發(fā)人員需要的單位都是邏輯像素。所以為了保證準(zhǔn)確高效的溝通，雙方都需要以邏輯像素尺寸來描述和理解界面，無論是在標(biāo)注圖還是在日常溝通中。不要再說“底部標(biāo)簽欄的高度是96像素，我是按照xhdpi做的”這樣的話了。

(四)切圖

iOS的切圖需要切二倍圖(@2x)，三倍圖(@3x)，命名需要注意，如btn_xxx_xxx@2x，btn_xxx_xxx@3x

(盡量用下劃線，命名規(guī)則遵照?qǐng)D片類型_分類_用途_狀態(tài).png，比如：btn_share_facebook_normal.png)

Android的切圖需要切三個(gè)尺寸的：hdpi,xhdpi,xxhdpi，但是說起來只需要提供一套切圖即可。

(Android切圖只吃_，iOS切圖則是是-和_都吃，(Web沒差)。如果你常遇到切一次圖要給多個(gè)平臺(tái)使用，那就用_底線吧)

720*1280下的切圖資源基本可以適配其他機(jī)型，有些特殊的切圖需要單獨(dú)適配的，比如icon等。

適配480*800機(jī)型=720*1280下的切圖大小*0.75

適配1080*1920機(jī)型=720*1280下的切圖大小*1.5

(適配1080*1920的時(shí)候，不要單獨(dú)硬生生的將圖標(biāo)放大1.5倍。這就要求在720*1280下畫圖的時(shí)候，盡量采用矢量圖形來畫圖。比如在720*1280下圖圖標(biāo)是48px*48px的時(shí)候，適配1080*1920時(shí)候，48px*1.5=72px。把矢量圖形調(diào)整為72px即可。把切圖資源給開發(fā)，開發(fā)會(huì)把切圖單獨(dú)放到xxhdpi的文件目錄下，就會(huì)自動(dòng)適配1080*1920的了。同樣要是適配480*800的，48px*0.75=32px，把切圖給開發(fā)，開發(fā)會(huì)把切圖資源單獨(dú)放到hdpi的目錄下，就會(huì)自動(dòng)適配的。720*1280下的切圖資源，開發(fā)是放到xhdpi的目錄下的。)