如今有不少產品爲了下降設計成本並保持多平臺體驗的一致性,都以iOS爲主作一套交互設計,應用於iOS和Android兩個平臺。可是在標註與切圖的環節,如何高效的與開發對接,彷佛並無什麼更高明的辦法。不少團隊的作法是先作一套iOS的UI+標註+切圖,再在iOS的基礎上縮放一套Android的UI+標註+切圖。事實上這樣的作法是低效,且無效的。爲何且如何作呢?工具
首先本文大前提是,交互以iOS的設計爲主導,應用於iOS和Android兩個平臺。本文描述的方法更適用於人力資源較爲匱乏的設計團隊。設計
對於設計環節。圖片
我對iOS和Android使用同一套iOS的交互設計這種作法不置能否,畢竟好多人都已經這麼幹了。而不少狀況下,到底用一套交互仍是兩套,這個問題是被設計部門的話語權、項目的週期、人力資源等多個因素影響的,並非簡單的節操問題。因此這裏不討論到底一套交互對不對,只討論這種狀況下怎麼幹活。資源
那麼既然是同一套設計,若是僅僅是爲了達到的交付物標準,輸出兩套幾乎徹底同樣的iOS和Android的UI圖,這種事情略顯蛋疼。據我所知有一些設計團隊都在不明真相地這麼幹着。開發
來看設計環節的交付物。get
iOS和Android開發須要的設計交付物至少要有:高保真UI圖,標註,切圖。產品
高保真UI圖所起到的做用是,開發會參照其畫頁面,僅僅是獲知頁面樣子的一個手段,並不是什麼高精度的事情。僅僅基於這一條,設計師就沒有必要出iOS和Android兩套樣子同樣只是大小不一樣的圖的,對於開發來講,他們只須要看到頁面樣子便可。io
標註和切圖的做用是,開發會按照標註的尺寸,把切圖按照高保真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,不少同志就在這種「矩陣式的彼此的不理解」中湊合幹着。
關於dp與dpi等概念,請參考文章:http://www.zhihu.com/question/19625584
咱們以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模式的切圖,按照以下關係換算便可。
關於Android不一樣dpi的參考文章:http://www.zhihu.com/question/20697111
咱們會發現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/)