大屏iPhone的適配 +iOS 圖片尺寸要求


摘自:http://blog.ibireme.com/2014/09/16/adapted_to_iphone6/

 

蘋果公司官網設計介紹到:Retina顯示屏的超高像素密度已超過人眼能分辨的范圍。
Retina對圖像設計(圖標、啟動畫面和其它所有像素有關的東西)有什么影響呢?如果我們的app要支持Retina,就要提供高分辨率的(寬x2,高x2)的圖片。同時,為了支持沒有Retina的設備,仍舊要准備低分辨率的版本。

換言之,我們要准備兩套設計圖。

針對不同分辨率的圖片,蘋果規定了一個命名規范:假如一個普通分辨率的圖片,文件名是“abc.png”,那么與其對應的高分辨率的文件名就應該是“abc@2x.png”,多了“@2x”。

 

下面是IOSAPP 圖標格式和尺寸規范。非常詳細。

 

圖標和啟動畫面的格式:推薦使用PNG格式,可以是標准的24位顏色(紅、綠和藍各用8位),外加alpha通道的8位。不要在app圖標上使用透明色。

 

圖標的尺寸:蘋果有一份完整的文檔,列出了app所需的全部圖標尺寸,和其各自的使用環境。

ios-APP圖標尺寸和切圖規范

大屏iPhone的適配

由 ibireme 發表於 2014/09/16

自從蘋果出了大屏iPhone后,iOS開發也要做適配了,想必Android程序員正在偷着樂呢;) 這里大概總結下這幾天了解到的大屏適配的注意事項。

 

啟用高分辨率模式

從Xcode6 GM版本開始,模擬器新增了iPhone6和iPhone6 Plus兩種,如果舊的工程直接跑到這兩個模擬器中時,默認是"兼容模式",即系統會簡單的把內容等比例放大,顯示效果有些模糊但尚可接受。此時App內部獲取到的設備分辨率和iPhone5是一樣的:320*568 point。

啟用高分辨率模式有2個方法(目前我能找到的):

1.添加大屏的LaunchImage:
在Images.xcassets里,刪除舊的LaunchImage組,然后新建LaunchImage組,添加對應高分辨率的圖片。對此,這里有一篇更詳細的圖文介紹:How to Add a Launch Image for the iPhone 6。如果想要快速測試一下新的效果,這里有3張示例圖片下載。

2.添加Launch Screen File

Launch Screen是Xcode6和iOS8新加的功能,它用一個xib文件來作為啟動畫面。App在舊版iOS啟動時,該屬性會被自動忽略,不會造成異常。
首先,點擊New File ->iOS User Interface ->Launch Screen,然后在工程設置項里啟用它:

LaunchFile

 

上面兩處設置,只要啟用任意一個即可讓App進入高分辨率模式;但如果兩處都沒有設置,則App會回退到兼容模式。鑒於現在不少App還需要兼容iOS5,而第一種方法在iOS5上可能有bug,所以這里推薦用第二種方法。

 

 

資源的顯示 

一圖勝千言,首先這里是一個完整的圖表:  http://www.paintcodeapp.com/news/iphone-6-screens-demystified

 

簡單的說:iPhone4、iPhone5、iPhone6這幾個設備的ppi都是相同的,默認圖片優先是@2x。iPhone6 Plus的像素密度更高,默認圖片優先是@3x。

另外,iPhone6 Plus有一點和其他設備不同:在App內部獲得的屏幕分辨率是1242*2208,但設備實際分辨率是1920*1080,這時系統會把整體的顯示內容做一個縮放,downscale到1/1.15。這個特性在OSX上也有出現過:

DownScale

 

 

下面就是一些可能有用的數據:

  iPhone iPhone4 iPhone5 iPhone6 iPhone6+
Point 320*480 320*480 320*568 375*667 414*736
Pixel 320*480 640*960 640*1136 750*1334 1242*2208
Pexel(設備)  ~ ~ ~ ~ 1920*1080
Scale 1 2 2 2 3
PPI 163 326 326 326 401
 
 
iPhone4,iPhone4s 分辨率960*640  長寬比1.5
iPhone5,iPhone5s  分辨率1136*640  長寬比1.775
iPhone6 分辨率1334*750  長寬比1.778
iPhone6+ 分辨率1242*2208  長寬比1.777
 
由此可見,只有iPhone4和iPhone4s和iPhone5及以上設備的長寬比不一樣,可以粗略認為iPhone5、5s、6、6+的長寬比是一樣的,可以等比例縮放,雖然有細微的差別,基本上看不出來。
 
所有設計界面只設計兩套應該就OK,一套以最大的分辨率iPhone6+的1920*1080設計,一套以iPhone4和4s的960*640的設計。程序中最好保持兩套UI切圖就可以滿足市面上所有的iPhone設備。當然擁有更多的切圖也是可以的,程序包的加入的圖片越多,程序包就越大,用戶下載的體驗就差一點。
 
iOS 圖片尺寸要求

切兩套圖 @2x @3x

 

顯示分辨率,是指單位長度內包含的像素點的數量,它的單位通常為像素/英寸(ppi)

 

像素是指基本原色素及其灰度的基本編碼

 

 

 

@2x 表示 一個點 上有兩個像素  @3x 表示一個點有三個像素

設計界面只設計兩套應該就OK,一套以最大的分辨率iPhone6+的1920*1080設計,一套以iPhone5的1136 * 640的設計。 

其他的小圖直接在這兩套圖下切就可以了

 

如果需要為5 和 6 適配不同的圖片 一個-568h@2x.png 一個-668h@2x.png  那么需要判斷手機版本

//蘋果官網圖片尺寸要求
https://developer.apple.com/library/ios/documentation/UserExperience/Conceptual/MobileHIG/IconMatrix.html#//apple_ref/doc/uid/TP40006556-CH27-SW1
 
//相關網址資料
http://justsee.iteye.com/blog/2118203
 
http://mp.weixin.qq.com/s?__biz=MjM5NzQyMjEyOA==&mid=200663740&idx=1&sn=f68aba3773cafa7d1ca2cc624522d242#rd
 
 
iOS 的 APP 如何適應 iPhone 5s/6/6Plus 三種屏幕的尺寸
摘自:http://mp.weixin.qq.com/s?__biz=MjM5NzQyMjEyOA==&mid=200663740&idx=1&sn=f68aba3773cafa7d1ca2cc624522d242#rd

每個機型,比如同時支持iPhone和iPad的程序,需要分別為iPhone跟iPad指定啟動圖片。當舊的iPhone 4的程序,運行在iPhone 5上面,沒有iPhone 5的啟動圖片,就采用兼容模式,上下留黑邊。當為iPhone 5指定了新的啟動圖片,系統就認為這個應用程序是已經適配了iPhone 5的,上下就不會留黑邊了。下面是微信啟動圖片,應該都很熟悉了。

iOS <wbr>的 <wbr>APP <wbr>如何適應 <wbr>iPhone <wbr>5s/6/6Plus <wbr>三種屏幕的尺寸?

微信啟動圖片中出現的那個地球,叫藍色彈珠(The Blue Marble),是在1972年12月7日由阿波羅17號太空船的船員所拍攝的。這張照片當年很震撼,是普通人第一次可以通過照片直接看到地球的全貌。見問題為什么微信啟動界面的地球圖片沒有轉到中國這部分?這是否有損用戶體驗?


微信的啟動圖,為適配iPhone 5,相比與iPhone 4, 很明顯狹長了。


典型iPhone應用程序(游戲除外),很多是上面一個導航欄,下面一個工具欄或者標簽欄, 中間一大塊用於顯示的內容區。iPhone 5拉長了,對於程序的適配,也不算麻煩,內容區的內容基本是動態生成的。適配時候可以簡單上下不變,中間的內容區拉長就行了。注意,導航欄和工具欄的高度也是44個點。下面是同一程序,在iPhone 4跟iPhone 5的對比。

iOS <wbr>的 <wbr>APP <wbr>如何適應 <wbr>iPhone <wbr>5s/6/6Plus <wbr>三種屏幕的尺寸?

iOS <wbr>的 <wbr>APP <wbr>如何適應 <wbr>iPhone <wbr>5s/6/6Plus <wbr>三種屏幕的尺寸?

AutoLayout

到了這個時候,傳統絕對定位的弱點就顯露出來了。這時iPhone按照點作為單位,已經出現了兩種不同尺寸的屏幕,算上iPad, 就有3種尺寸(有些App可以同時兼容iPhone和iPad,稱為Universal)。


從iOS 6系統發布后,iOS開發中可以采用一種AutoLayout的技術。AutoLayout就像網頁一樣,指定View,Button,Text之間的相對位置,比如靠左多少,靠右多少,居中多少等等。舉個例子,像下面的簡單布局。

iOS <wbr>的 <wbr>APP <wbr>如何適應 <wbr>iPhone <wbr>5s/6/6Plus <wbr>三種屏幕的尺寸?

假設左上角的區域為view1, 右上角的區域為view2, 下面的區域為view3。AutoLayout會說:

view1.left = 20 // View1的左邊距離邊界20個點
view1.top = 20 // View1的上邊距離邊界20個點

view2.right = 20 // View2的右邊距離邊界20個點
view2.top = 20 // View2的上邊距離邊界20個點
view2.left = view1.left + 20 // View2的左邊距離View1右邊20個點
view2.width = view1.width // View1的寬度等於View2的寬度
view2.height = view1.height // view1高度等於view2高度

view3.left = view1.left // view3的跟view1左對齊
view3.right = view2.right // view3跟view2右對齊
view3.top = view1.bottom + 20 // view3的上邊距離view1下邊20個點
view3.bottom = 20 // view3下邊距離邊界20個點
view3.height = view1.height // view3高度等於view1高度


指定上面的約束條件后,AutoLayout就會自動算出對應的布局。上面我寫得比較繁瑣,事實上很多操作都是可以使用鼠標拖拉來指定的,並不一定需要使用代碼。但就算用代碼,也有簡寫的方法。下面是在xib中,拖拉鼠標指定約束時的界面。

iOS <wbr>的 <wbr>APP <wbr>如何適應 <wbr>iPhone <wbr>5s/6/6Plus <wbr>三種屏幕的尺寸?

而絕對定位,會直接說

view1.frame = (x1, y1, width1, height1) view2.frame = (x2, y2, width2, height2) view3.frame = (x3, y3, width3, height3)


絕對定位並非指定約束條件,而是開發者自己來精確指定View,Button, Text等的實際坐標大小。

對於一個屏幕,絕對定位可能跟AutoLayout的區別不算大,甚至絕對定位會更方便些。但當需要同時適配多個屏幕,AutoLayout根本不需要更改。而絕對定位就需要根據屏幕大小,一個個算出來。比如橫屏,在AutoLayout下面,就自動變成。

iOS <wbr>的 <wbr>APP <wbr>如何適應 <wbr>iPhone <wbr>5s/6/6Plus <wbr>三種屏幕的尺寸?

這里不過是3個控件的布局,當出現的控件數越多,屏幕尺寸越多,AutoLayout的優勢就顯露出來了。另外AutoLayout有個好處是容易支持多語言,不同語言下,同一個意思文字的長度是不同的,使用AutoLayout也可以自動適配。


在iOS 6的時候,AutoLayout還比較少人使用,當時屏幕尺寸還比較少。iOS 7的時候,就開始很多人使用了。而到現在iOS 8了, 更加上iPhone 6, iPhone 6 Plus需要適配,AutoLayout大勢所趨,不用不行了。


iPhone 6, iPhone 6 Plus

2014年,iPhone 6, iPhone 6 Plus發布后,情況又有新的變化。再次比較所有iPhone機型。

iOS <wbr>的 <wbr>APP <wbr>如何適應 <wbr>iPhone <wbr>5s/6/6Plus <wbr>三種屏幕的尺寸?

屏幕尺寸再度分裂。但是我們比較iPhone 5 跟 iPhone 6的寬高比例。  

iOS <wbr>的 <wbr>APP <wbr>如何適應 <wbr>iPhone <wbr>5s/6/6Plus <wbr>三種屏幕的尺寸?

可以看出,iPhone 6跟iPhone 5雖然屏幕尺寸改變了,但是它們的比例是不變的。都是 9 ÷ 16 = 0.5625 的屏幕。


當舊的iPhone 5程序運行在iPhone 6上面,假如沒有經過適配。舊程序自動等比放大,鋪滿新手機,舊程序也可以正常運行。這種方案可算是自動適配。但因為舊程序拉伸了,整體看起來有點虛,也不能更好利用大屏空間。


當需要開發者手動適配的時候,跟iPhone 4過渡到iPhone 5一樣,在新程序中,指定一張新的啟動圖片。當指定了啟動圖,屏幕分辨率就已經變成應有的大小,這時候利用AutoLayout進行布局,同一份代碼,就可以支持多個機型。新手機的屏幕更大,有更多的虛擬點,可以顯示更多的內容。


值得注意一點是,iPhone 6 Plus。它的寬高是414 × 736個點,3x模式,理想上來說,應該有1242 × 2208像素。但iPhone 6 Plus的實際像素是 1080 × 1920,是比理想值要少一點的。iPhone 6 Plus的處理方式是將程序整體稍微縮小一點。分辨率很高,這點區別,實際上也看不出來。這樣處理,可以使得44個點的點擊區域約束,在物理上的真實長度,基本保持不變。


由分析可以看到,慢慢的為了適配多個機型,程序的啟動圖片也逐漸增多,為解決這個問題。iOS之后,可以使用xib來搭建啟動界面,這樣就可以同一個啟動界面,適配多個機型,減少啟動圖片占用的空間。


建議

1、以后的應用程序,都使用AutoLayout, 不要再用絕對定位。

2、使用類似網頁的方式來設計界面。

3、設計師好,程序員也好,盡量使用點這個單位進行思考,而不要使用像素。比如,你需要做44 x 66個點的按鈕,2x模式,就乘以2, 3x模式就乘以3。這樣的思考方式可以大致估計到真實的物理長度。44個點,就是手機上導航欄,工具欄的高度。假如用像素思考,容易使得做出的圖片過大或者過小。

4、非矢量素材,就可以做尺寸最大的,之后再進行縮小。比如你需要兼容3x的屏幕,就直接做最高那種圖片。

5、而當使用Flash之類的矢量工具來做素材的時候,應該直接做點那個尺寸。比如44 x 66個點的按鈕。就建立一個44 x 66的場景。之后再導出成2倍圖,3倍圖,因為矢量放大不失真。不要建立一個3x的場景,導出成大圖片,再進行縮小,這樣就容易失真。更理想的是直接使用矢量圖。

6、假如是那種導航欄,工具欄之類的背景圖,需要橫跨整個屏幕。可以只切一小塊,讓程序拉伸,拉伸方式是保持兩邊的像素不動,只拉伸最中間的一列像素。需要拉伸的話,橫方向就不要出現一些漸變色。

7、按鈕的點擊區域,不應該少於44像素,就算按鈕的圖片看起來比較小,也應該使得點按鈕周圍的透明區也有反應。

8、可以按照你當前最方便測試機子的型號來做一些主要預覽圖,效果圖。比如你手頭有iPhone 5,可以按照iPhone 5的尺寸,320 x 568個點,需要兼容iPhone 6 Plus,就使用3x的模式。這樣方便將圖片放進手機里面看實際的效果。有多個測試機,就選較大的,之后再進行一些細調。假如支持iPhone 6 Plus的橫屏模式,需要另外處理。

9、上面說的是應用的處理方式,游戲會有些特殊。現在很多游戲,按照1136 x 768的像素尺寸來設計場景,這樣可以同時兼容iPad和iPhone,並只使用一份圖。iPad 1x模式下尺寸是1024 x 768像素,iPhone 6在2x模式下,是1136 * 640。這種尺寸,可以簡單將場景居中顯示,各自將場景拉伸到最大。

 

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM