現(xiàn)在很多APP設(shè)計(jì)師小白都會(huì)稀里糊涂的在解讀這些縮放1倍，擴(kuò)大2倍或者說(shuō)擴(kuò)大1.5倍 等等之類的言論。

大家談?wù)摰膮s是也沒(méi)有錯(cuò)。如果你搭配上@1x @2x和@3x的話，你的理解就有問(wèn)題啦！

首先我們看下我們切圖的命名方式：

假設(shè)有兩張圖片名為：正確的命名方式應(yīng)該是這樣test_t@2x.png 、test_t@3x.png

這是對(duì)于ios 切圖來(lái)說(shuō)的。

iphone 4 ?5 ?6是采用test_t@2x.png 這個(gè)圖，iphone 6 plus就采用test_t@3x.png

但是對(duì)于iphone加載的順序是

在ipone4 ? ??ipone5 s、iphone6和iphone6 plus都是不需要帶上@2x/@3x的圖片后綴名，程序會(huì)優(yōu)先加載?@2x?的圖片 ，但如果需要加載?@3x?的圖片，你需要寫上?@3x?； 這個(gè)是IOS客戶端做的，但是作為APP設(shè)計(jì)師必須了解。

第一個(gè)：為解決ios分辨率而生

之所以有@1x @2x和@3x的出現(xiàn)，也是蘋果為了便于程序員的開發(fā)，不同分辨率的設(shè)備開發(fā)時(shí)統(tǒng)一為一個(gè)尺寸。例如iPad2 是768 x 1024，iPad Retina 是1536 x 2048，開發(fā)時(shí)都按 768 * 1024 操作。但實(shí)際上兩者有一倍差異。為了達(dá)到最佳效果，使用的圖片大小不一樣。這時(shí)候就用同一個(gè)名稱，但 Retina 的圖加上 @2x 后綴。系統(tǒng)加載圖片時(shí)，在 iPad2 上會(huì)加載 @1x 的圖在 1536 * 2048 的設(shè)備上，會(huì)加載 @2x 的。@3x 現(xiàn)在用于 iPhone 6/6+ 上。

第二個(gè)：@1x @2x和@3x也是xcode軟件所需要的UI資源。你命好名稱以后，ios會(huì)根據(jù)設(shè)備型號(hào)自動(dòng)挑選合適的@1x，@2x或@3x尺寸來(lái)使用。

第三個(gè)：mac電腦上的APP設(shè)計(jì)軟件Sketch，他切圖之后保存的圖片格式也是帶有@1x @2x和@3x。 ?在這里 可以解毒@1x @2x和@3x為圖片格式，成為圖片后綴名。跟我們安卓上的.9.png 類似的。

第四個(gè)：蘋果IOS程序開發(fā)不同分辨率的設(shè)備統(tǒng)一為一個(gè)尺寸而標(biāo)記的。@3X就是@1X分辨率的3倍。@3x也是倍數(shù)的解讀。

所以，在這里 安卓到底有沒(méi)有這樣的@1x @2x和@3x的格式呢。25學(xué)堂的小編認(rèn)為，肯定沒(méi)有，@1x @2x和@3x嚴(yán)格來(lái)說(shuō)是蘋果公司的專利。

適合安卓的切圖命名規(guī)范最好的是.9.png圖，當(dāng)然目前.9.png應(yīng)用在ios上也很多。

附帶一提：iOS8渲染操作中使用前綴帶有@1x、@2x 和@3x 的測(cè)試圖像，代碼會(huì)優(yōu)先載入3x 圖像。@2x圖像不被加載。

感谢您访问我们的网站，您可能还对以下资源感兴趣：