現在有很多產品為了降低設計成本並保持多平臺體驗的一致性，都以iOS為主做一套互動設計，應用於iOS和Android兩個平臺。但是在標註與切圖的環節，如何高效的與開發對接，似乎並沒有什麼更高明的辦法。很多團隊的做法是先做一套iOS的UI+標註+切圖，再在iOS的基礎上縮放一套Android的UI+標註+切圖。事實上這樣的做法是低效，且無效的。為什麼且如何做呢？

　　首先本文大前提是，互動以iOS的設計為主導，應用於iOS和Android兩個平臺。本文描述的方法更適用於人力資源較為匱乏的設計團隊。

　　對於設計環節。

　　我對iOS和Android使用同一套iOS的互動設計這種做法不置可否，畢竟好多人都已經這麼幹了。而很多情況下，到底用一套互動還是兩套，這個問題是被設計部門的話語權、專案的週期、人力資源等多個因素影響的，並不是簡單的節操問題。所以這裡不討論到底一套互動對不對，只討論這種情況下怎麼幹活。

　　那麼既然是同一套設計，如果僅僅是為了達到的交付物標準，輸出兩套幾乎完全一樣的iOS和Android的UI圖，這種事情略顯蛋疼。據我所知有一些設計團隊都在不明真相地這麼幹著。

　　來看設計環節的交付物。

　　iOS和Android開發需要的設計交付物至少要有：高保真UI圖，標註，切圖。

　　高保真UI圖所起到的作用是，開發會參照其畫頁面，僅僅是獲知頁面樣子的一個手段，並非什麼高精度的事情。僅僅基於這一條，設計師就沒有必要出iOS和Android兩套樣子一樣只是大小不同的圖的，對於開發來說，他們只需要看到頁面樣子即可。

　　標註和切圖的作用是，開發會按照標註的尺寸，把切圖按照高保真UI圖的擺放方式做到介面上。那麼問題來了，iOS的開發和Android開發所需要的標註和切圖是不一樣的。如何在一套iOS的高保真UI圖上做出兩套標註和切圖呢？

　　眾所周知iOS設計的畫素尺寸是640*960/1136，Android主流的hdpi模式下的畫素尺寸是480*800。如圖，他們的換算關係是，iOS畫素尺寸的75%是Android的畫素尺寸

　　於是很多設計團隊就基於這個75%的關係去做Android的圖了，但是這不是個好方法，這是一個設計和開發沒有成為好基友的狀態下所使用的方法。

　　我們知道Android開發所使用的單位並非畫素，而是一個叫做dp/sp的單位，人家壓根就不用畫素，你費勁半天調一個480*800又有啥用呢？你給他標註上，這個寬度300畫素，又有啥用呢？設計不懂開發，開發也不懂設計，Android不懂iOS，iOS也不懂Android，很多同志就在這種“矩陣式的彼此的不理解”中湊合幹著。

　　我們以480*800畫素尺寸下做的設計圖為基準。開發將部件尺寸換算成dp尺寸的方法是，畫素尺寸*2/3。這也是為什麼要讓Android部件尺寸能讓3整除的原因。所以在hdpi模式，480*800畫素尺寸設計圖中，開發看到300px寬度的標註，會定義其為寬200dp，到這裡Android開發才得到一個他們真正會用於開發的數值。

　　這整個過程，設計師做iOS尺寸圖並標註，設計師調整iOS尺寸圖為Android尺寸並標註px，Android開發看著設計師交付的標註，再將其換算成dp，很長的一個過程。

　　其實經過以上整個過程之後，我們已經得出了一個更簡單的換算關係：iOS畫素尺寸*75%=Android畫素尺寸，Android畫素尺寸*2/3=Android的dp尺寸。進而得出：iOS畫素尺寸*75%*2/3=Android的dp尺寸。所以，iOS裡一個寬600px的東西，在Android的hdpi模式下，正好300dp，正好是50%，很容易算是吧？

　　在這個關係的指導下，我們可以在同一套UI圖上做適用於兩個平臺的標註。只要Android的開發知道，標註600px的東西，在hdpi模式下等於300dp這個換算關係，一切都簡單了。當然，平臺的區別要留意，例如iOS使用十進位制色值，Android使用16進位制，iOS可以繪製圓角和陰影，Android更傾向於用.9.png等。這些差異要在同一套標註中體現出來，讓兩端的開發各取所需。（如果你發現標註軟體中無法在同一張圖上標十進位制和十六進位制色值，你可以用文字標註替代其中一個，qq的截圖工具中也是帶色值提示的，辦法很多不再贅述。）

　　至此，已經可以做一套標註，讓Android和iOS的開發共同使用了。當然前提是你要告訴開發這個標註怎麼看，怎麼用！

　　下面看切圖

　　在iOS切圖與Android切圖的轉換中，是可以使用75%的換算關係的。也就是說iOS的切圖縮小75%之後，就是Android的hdpi模式下的切圖，而Android開發還需要其他dpi模式的切圖，按照如下關係換算即可。

　　我們會發現xhdpi模式和hdpi模式的換算比例也是75%。也就是說xhdpi模式下切圖尺寸跟iOS下是一樣的。所以iOS的切圖可以直接適用於Android的xhdpi模式。至於除hdpi和xhdpi之外的其他模式，如果需要適配，就需要單獨處理圖片了。

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

　　至此，我們設計一套適配iOS的高保真UI，基於該UI做一套適用於iOS和Android兩類開發人員的標註，再輸出一套可適用於iOS和 Android的xhdpi模式的切圖，再調整一套Android的hdpi模式切圖，基本上大部分工作就已經完成了。

　　是不是感覺這種方法的工作量，一個人能幹三個人的活了？

（作者：hoovay，http://www.origintel.com/）