APP切圖規範和換算標準

很多初學者總是搞不清楚，在設計APP介面的時候，到底要出幾套圖？今天 ofollow,noindex">原始碼時代 UI老師就給大家講解一下切圖原理，保證以後你再也不會迷失方向。

我們知道IOS系統的設計介面尺寸基於：750px*1334px，而Andriod系統是基於：720px*1280px，那為什麼往往我們在實際應用中只做IOS的介面，程式就可以實現兩種系統的適配呢，細心的同學在用cuttman切圖的時候明顯可以發現：

對比之下，原來他們有一個共同的引數：750，程式就是通過這個共同的引數進行相應的換算從而完美適配兩種系統。

在這裡為了讓大家看得明白，我把他們之間的關係給大家理一下：

在Andriod系統中

XXXHDPI是XHDPI的2倍；

XXHDPI是XHDPI的1.5倍；

HDPI是XHDPI的0.75倍；

MDPI是XHDPI的0.5倍；

接下來我們來看一下IOS系統

@2X是@1X的2倍；

@3X是@2X的1.5倍；

即3/2=1.5，2/1=2；

由此可見：IOS與Andriod的關係就是

IOS的@1X=Andriod的MDPI；

IOS的@2X=Andriod的XMDPI；

IOS的@3X=Andriod的XXMDPI；

現在看來，大家已經想明白了，實際上，我們只需要把IOS的切出來後，Andriod的也切出來了，不過在這裡大家需要特別注意的就是，由於IOS裡匯出的圖帶有@2X等，所以將這個圖給Andriod時需要去掉@2X；

當然這僅僅只是解決了圖示大小適配的問題，在間距上還是會存在一定的誤差，畢竟兩種系統的標準尺寸大小不一樣（IOS：750px*1334px，Andriod：720px*1280px），比例上或多或少都有些出入，所以，如果想做到完全規範的話，建議老老實實出兩套圖，一套IOS，一套Andriod。

大家都知道點九切圖吧，它是andriod平臺的應用軟體開發裡的一種特殊的圖片形式，可以將圖片橫向和縱向同時進行拉伸，以實現在多解析度下的完美顯示效果，但是，點九切圖的侷限性很大，一般只適用於buttom、對話方塊、按鈕等規則的圖示裡，不規則的icon在應用的時候，還是需要我們進行切圖。