如何讓APP設(shè)計(jì)，APP切圖高效的與開(kāi)發(fā)對(duì)接，似乎并沒(méi)有什么更高明的辦法。很多團(tuán)隊(duì)的做法是先做一套iOS的UI+標(biāo)注+切圖，再在iOS的基礎(chǔ)上縮放一套Android的UI+標(biāo)注+切圖。加上25學(xué)堂的APP設(shè)計(jì)官方群內(nèi)的小伙伴們，經(jīng)常問(wèn)到如何進(jìn)?Android尺寸標(biāo)注設(shè)計(jì)大全和Android切圖規(guī)范。

下面所講的內(nèi)容是以交互以iOS的設(shè)計(jì)為主導(dǎo)，應(yīng)用于iOS和Android兩個(gè)平臺(tái)。今天跟大家分享的Android尺寸標(biāo)注設(shè)計(jì)大全和Android切圖規(guī)范，更適用于人力資源較為匱乏的設(shè)計(jì)團(tuán)隊(duì)。

第一個(gè)認(rèn)識(shí)：對(duì)于設(shè)計(jì)環(huán)節(jié)。

對(duì)iOS和Android使用同一套iOS的交互設(shè)計(jì)這種做法不置可否，畢竟好多人都已經(jīng)這么干了。而很多情況下，到底用一套交互還是兩套，這個(gè)問(wèn)題是被設(shè)計(jì)部門的話語(yǔ)權(quán)、項(xiàng)目的周期、人力資源等多個(gè)因素影響的，并不是簡(jiǎn)單的節(jié)操問(wèn)題。所以這里不討論到底一套交互對(duì)不對(duì)，只討論這種情況下怎么干活。

那么既然是同一套設(shè)計(jì)，如果僅僅是為了達(dá)到的交付物標(biāo)準(zhǔn)，輸出兩套幾乎完全一樣的iOS和Android的UI圖，這種事情略顯蛋疼。據(jù)我所知有一些設(shè)計(jì)團(tuán)隊(duì)都在不明真相地這么干著。

第二個(gè)認(rèn)識(shí)：來(lái)看設(shè)計(jì)環(huán)節(jié)的交付物

iOS和Android開(kāi)發(fā)需要的設(shè)計(jì)交付物至少要有：高保真UI圖，標(biāo)注，切圖。

高保真UI圖所起到的作用是，開(kāi)發(fā)會(huì)參照其畫頁(yè)面，僅僅是獲知頁(yè)面樣子的一個(gè)手段，并非什么高精度的事情。僅僅基于這一條，設(shè)計(jì)師就沒(méi)有必要出iOS和Android兩套樣子一樣只是大小不同的圖的，對(duì)于開(kāi)發(fā)來(lái)說(shuō)，他們只需要看到頁(yè)面樣子即可。

標(biāo)注和切圖的作用是，開(kāi)發(fā)會(huì)按照標(biāo)注的尺寸，把切圖按照高保真UI圖的擺放方式做到界面上。那么問(wèn)題來(lái)了，iOS的開(kāi)發(fā)和Android開(kāi)發(fā)所需要的標(biāo)注和切圖是不一樣的。如何在一套iOS的高保真UI圖上做出兩套標(biāo)注和切圖呢？

眾所周知iOS設(shè)計(jì)的像素尺寸是640*960/1136，Android主流的hdpi模式下的像素尺寸是480*800。如圖，他們的換算關(guān)系是，iOS像素尺寸的75%是Android的像素尺寸。

于是很多設(shè)計(jì)團(tuán)隊(duì)就基于這個(gè)75%的關(guān)系去做Android的圖了，但是這不是個(gè)好方法，這是一個(gè)設(shè)計(jì)和開(kāi)發(fā)沒(méi)有成為好基友的狀態(tài)下所使用的方法。

我們知道Android開(kāi)發(fā)所使用的單位并非像素，而是一個(gè)叫做dp/sp的單位，人家壓根就不用像素，你費(fèi)勁半天調(diào)一個(gè)480*800又有啥用呢？你給他標(biāo)注上，這個(gè)寬度300像素，又有啥用呢？設(shè)計(jì)不懂開(kāi)發(fā)，開(kāi)發(fā)也不懂設(shè)計(jì)，Android不懂iOS，iOS也不懂Android，很多同志就在這種“矩陣式的彼此的不理解”中湊合干著。

（關(guān)于dp/sp的單位，具體知識(shí)點(diǎn)見(jiàn)下面知識(shí)擴(kuò)展）

我們以480*800像素尺寸下做的設(shè)計(jì)圖為基準(zhǔn)。開(kāi)發(fā)將部件尺寸換算成dp尺寸的方法是，像素尺寸*2/3。這也是為什么要讓Android部件尺寸能讓3整除的原因。所以在hdpi模式，480*800像素尺寸設(shè)計(jì)圖中，開(kāi)發(fā)看到300px寬度的標(biāo)注，會(huì)定義其為寬200dp，到這里Android開(kāi)發(fā)才得到一個(gè)他們真正會(huì)用于開(kāi)發(fā)的數(shù)值。

這整個(gè)過(guò)程，設(shè)計(jì)師做iOS尺寸圖并標(biāo)注，設(shè)計(jì)師調(diào)整iOS尺寸圖為Android尺寸并標(biāo)注px，Android開(kāi)發(fā)看著設(shè)計(jì)師交付的標(biāo)注，再將其換算成dp，很長(zhǎng)的一個(gè)過(guò)程。

其實(shí)經(jīng)過(guò)以上整個(gè)過(guò)程之后，我們已經(jīng)得出了一個(gè)更簡(jiǎn)單的換算關(guān)系：iOS像素尺寸*75%=Android像素尺寸，Android像素尺寸*2/3=Android的dp尺寸。進(jìn)而得出：iOS像素尺寸*75%*2/3=Android的dp尺寸。所以，iOS里一個(gè)寬600px的東西，在Android的hdpi模式下，正好300dp，正好是50%，很容易算是吧？

在這個(gè)關(guān)系的指導(dǎo)下，我們可以在同一套UI圖上做適用于兩個(gè)平臺(tái)的標(biāo)注。只要Android的開(kāi)發(fā)知道，標(biāo)注600px的東西，在hdpi模式下等于300dp這個(gè)換算關(guān)系，一切都簡(jiǎn)單了。當(dāng)然，平臺(tái)的區(qū)別要留意，例如iOS使用十進(jìn)制色值，Android使用16進(jìn)制，iOS可以繪制圓角和陰影，Android更傾向于用.9.png等。這些差異要在同一套標(biāo)注中體現(xiàn)出來(lái)，讓兩端的開(kāi)發(fā)各取所需。（如果你發(fā)現(xiàn)標(biāo)注軟件中無(wú)法在同一張圖上標(biāo)十進(jìn)制和十六進(jìn)制色值，你可以用文字標(biāo)注替代其中一個(gè)，qq的截屏工具中也是帶色值提示的，辦法很多不再贅述。）

至此，已經(jīng)可以做一套標(biāo)注，讓Android和iOS的開(kāi)發(fā)共同使用了。當(dāng)然前提是你要告訴開(kāi)發(fā)這個(gè)標(biāo)注怎么看，怎么用！

那到底如何看設(shè)計(jì)師或是前端的切圖是否合格呢？

在iOS切圖與Android切圖的轉(zhuǎn)換中，是可以使用75%的換算關(guān)系的。也就是說(shuō)iOS的切圖縮小75%之后，就是Android的hdpi模式下的切圖，而Android開(kāi)發(fā)還需要其他dpi模式的切圖，按照如下關(guān)系換算即可。

我們會(huì)發(fā)現(xiàn)xhdpi模式和hdpi模式的換算比例也是75%。也就是說(shuō)xhdpi模式下切圖尺寸跟iOS下是一樣的。所以iOS的切圖可以直接適用于Android的xhdpi模式。至于除hdpi和xhdpi之外的其他模式，如果需要適配，就需要單獨(dú)處理圖片了。

要注意的是切圖在縮放之后像素會(huì)糊在一起，很可能需要重新調(diào)整，還有各種虛邊情況，尤其是那些帶透明陰影的，都要重新調(diào)，但是這個(gè)工作量顯然要比重新調(diào)UI重新切，要小多了。

至此，我們?cè)O(shè)計(jì)一套適配iOS的高保真UI，基于該UI做一套適用于iOS和Android兩類開(kāi)發(fā)人員的標(biāo)注，再輸出一套可適用于iOS和 Android的xhdpi模式的切圖，再調(diào)整一套Android的hdpi模式切圖，基本上大部分工作就已經(jīng)完成了。

擴(kuò)展閱讀：

《Android UI界面設(shè)計(jì)指南規(guī)范》相關(guān)資料下載【設(shè)計(jì)干貨】

Android應(yīng)用程序圖標(biāo)模板（含PSD源文件）

關(guān)于Android不同dpi模式或概念介紹

從UI設(shè)計(jì)師的角度理解：

px（像素）是我們UI設(shè)計(jì)師在PS里使用的（不解釋），同時(shí)也是手機(jī)屏幕上所顯示的（也不解釋）

dp是開(kāi)發(fā)寫layout的時(shí)候使用的尺寸單位，sp是開(kāi)發(fā)寫layout時(shí)關(guān)于字體的字號(hào)單位，且dp與sp總為1：1關(guān)系。

Android支持四種不同的dpi模式：ldpi mdpi hdpi xhdpi

一般地，手機(jī)分辨率與所運(yùn)行的dpi模式是匹配的，例如hvga(320x480像素)的手機(jī)屏幕一般在3.5英寸左右，運(yùn)行在mdpi模式下（也有例外，稍后解釋）（這個(gè)是ROM控制的，app不能改變）。當(dāng)運(yùn)行在mdpi下時(shí)，1dp=1px：也就是說(shuō)設(shè)計(jì)師在PS里定義一個(gè)item高48px，開(kāi)發(fā)就會(huì)定義該item高48dp；Photoshop中14px大的字體，開(kāi)發(fā)會(huì)定義為14sp。

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

所以，當(dāng)你的app需要適配多個(gè)dpi模式的時(shí)候（例如同時(shí)適配mdpi與hdpi），若你在wvga下做設(shè)計(jì)，你需要將你的各數(shù)值都為3的倍數(shù)，并在切圖標(biāo)注時(shí)將所有的數(shù)字除以3乘以2換算成dp，這樣開(kāi)發(fā)的同一套layout就能用在兩個(gè)不同的dpi模式下，而不是寫兩套layout。

mdpi與hdpi是2：3的關(guān)系

mdpi與xhdpi是1：2的關(guān)系

ldpi與mdpi是3：4的關(guān)系

Galaxy Nexus 是720P屏幕，就是運(yùn)行在xhdpi下的。

可以想見(jiàn)為什么iOS的開(kāi)發(fā)者升級(jí)到 Retina Display 是多么的無(wú)痛

再補(bǔ)充一種例外，有些比較山寨的Pad有可能是7英寸屏幕，分辨率為wvga（480x800）運(yùn)行在mdpi下，所以一部wvga手機(jī)是320x533dp，一部wvga平板是480x800dp，可以顯示的內(nèi)容會(huì)多很多。