APP適配IOS8，iPhone6和Plus截圖簡要說明

有幸在9月25日拿到了iP6和iP6 Plus的真機，剛好又要作適配APP的工做（從iphone5上適配到iphone6和ip6 plus上），因此在真機上研究了下蘋果官方在不一樣分辨率下對系統APP所作的適配。同時在網上也沒找到相關的真機對比截圖說明什麼的，又有朋友問我要IP6和PLUS的真機截圖回去本身研究，既然這樣，那麼幹嗎不利用本身已有的資源，讓更多的設計師受益呢？因此那就說點什麼吧，拋磚引玉，但願你們能夠共同研究，少走些彎路，共同成長。

以前看過@jingdesign 的關於適配ip6的文章：快速適配iPhone6及plus的訣竅。                                                     

還有@羅磊的文章：Web開發者和設計師必需要知道的 iOS 8 十個變化。做爲參考（有摘抄部份）。

------------------------------------------------------------------

正文：

首先咱們先看一下iphone5，iphone6和iphone6 plus的一些數據對比：

機型	iPhone 5/s	iPhone 6	iPhone 6 Plus
尺寸	4」	4.7」	5.5」
Viewport’s device-width (in CSS pixels)	320	375	414
Viewport’s device-width (Android設備同分辨率參考)	360	360	400
Device Pixel Ratio 像素比	2	2	3（近似值）
Rendered Pixels 渲染像素 (默認 viewport size * dpr)	640x1136	750×1334	1242×2208
Physical pixels 物理像素（手機顯示像素）	640x1136	750×1334	1080×1920
PPI 每英寸所擁有的像素數	326	326	401
Status Bar 狀態欄高 (px)	40	40	60
Title Bar   導航條高 (px)	88	88	132
Tab Bar   底欄高 (px)	98	98	147
桌面 icon  (px)	120	120	180
圖片資源後綴名	@2x	@2x	@3x

這裏是給前端參考的：iPhone 6與 iphone 5同樣，像素比都是2，可是另外一方面 iPhone 6 plus 401的dpi真實的像素比值應該大約是2.60。爲了解決這個問題，蘋果又整了個新概念rendered pixels 渲染像素，若是像素比是3x,那麼理論上一個css寬設爲414px的屏幕應該擁有1242px的物理像素（現實中是1080px，小了13%）。（像素比的計算方法是：前端的代碼是把iPhone4，5的屏幕寬度寫爲320px，而此時 iphone4，5的全部產品實際寬的像素是640PX，因此像素比是2，iphone6的 CSS 中是375px,實際像素是750px,像素比也是2，而 plus 就不是了。）

所以，若是你使用一個3x的圖給高清的安卓設備，一樣這樣圖也會適配 iPhone 6 Plus 可是iPhone 的瀏覽器在渲染在屏幕以前首先會調整圖片大小。

而後我把3個屏幕的App Store界面截圖拿來對比一下：（沒法查看原圖？）

點擊這裏能夠查看高清大圖：http://www.ui.cn/project.php?id=27104

一：Title bar和Tab bar 高度

Title bar ： ip5/6的 高度是88px，plus 的高度是132px  （88x1.5=132）   

Tab bar  ： ip5/6的 高度是98px ， plus 的高度是147px  （  98x1.5=147）

ip5和ip6的Title bar和Tab bar的高度沒變,而且tab bar的icon的大小也沒變，只是整欄的寬拉伸了，因此IOS工程師在早期開發的時候若是用的是Autolayout自動佈局會很爽，若是是佈局寫死了，那真是要一個界面一個界面的改了。

結論：相似的狀態欄高度不變，能夠直接拉伸寬度調整間距便可，還有設置界面等，甚至代碼是自動佈局的話間距都不用調。

二：Tab bar的icon大小

圖中標識的是排行榜的大小：ip5=46x46px , ip6=46x46px，ip6plus=69x69px（是46px的1.5倍）。

結論：ip6的icon,大多能夠直接使用ip5的資源，plus的icon須要把ip5的icon資源x1.5倍便可，（咱們當時開發xx軟件的時候，android的設計尺寸是基於1080P的，我把android的資源拿出來用在plus上是徹底能夠的，因此開發android用的是1080P屏幕的設計師有福了，以上劃線文字是原文，有錯誤不嚴謹的地方，1080P，能夠將就用，我曾經把咱們的 android 的1080P資源名稱改爲@3x，沒調整大小直接放到 xcode裏，模擬器跑起來 icon是很清楚的，這也多是咱們的 android 並非640直接縮放到1080，而是每一個界面手動調整的，因此資源能夠暫用到 plus 上，我初期剛適配的時候是這麼幹的，後來發現部分圖標沒法識別，因此如今我又在把那些資源一個一個手動的調整成 plus 可用的 3倍（@3x）大小。）

（在解釋一下：例如ip5的某個icon名爲:star@2x.png，那麼我把android裏面相同的icon拿過來更名子爲 star@3x.png，直接扔到star@2x.png的同文件夾裏面，xcode能夠識別爲plus的資源的，而且模擬器跑起來後icon的確變成高清的了，和別的沒有替換的區別很明顯。）

<img src="lores.png" srcset="hires.png 2x, superhires.png 3x">

在上面這段代碼的例子中，iPhone 6 Plus 的像素比是3x，它會加載superhires.png這張圖片，而iPhone 5s,iPhone 6 則會加載hires.png這種圖，其他的則加載lores.png。

順便說一句：之前IOS6,IOS7的時候看到app store首頁更改了排版的樣式，以前的樣式記得是每一個分類兩排向下無限列出，如今界面內的每一個分類使用的是橫排能夠無限滑動的樣式，也就是能夠不用固定在一屏內，ip6出現前並不理解這種排版樣式，也沒有發現這個排版的好處，當ip6和plus出現後，這種排版的樣式的好處則顯而易見，由於這樣會更容易方便的適配各類分辨率的屏幕。因此，當你的APP單個界面有多個分類而且內容不少須要排列的時候，建議參考app store的樣式，若是有更好的樣式也能夠分享出來哦。

根據 app store 的截圖來看，在將來設計 APP 的時候，資源有限的狀況下，建議設計2套尺寸，以640x1136px爲基礎去適配 iphone4,5,6,（ip6能夠在ip5的基礎上空白區域拉伸便可，資源同用 ip5的，位圖則要等比縮放），以1242x2208px的尺寸去設計 iphone6 plus, 由於 xcode 的工程文件及 plus 代碼及截圖都是1242x2208px的分辨率，只是屏幕物理大小是1080x1920px，因此按照1242x2208px的尺寸去設計，plus 上顯示的物理大小纔會正常，而且切圖也纔會是@3x.若是用1080P切圖，圖標資源確定會不清楚。（若是大家的設計師人數足夠多，固然iphone6也要單獨設計一套。）

------------------------------------------------------------------

三：banner

ip5的banner是640x260px，ip6是750x304px (即ip5的640x260px等比縮放後的大小）。

ip6 plus排版已變化，banner圖的樣式變的和ipad相似，顯示3個，其中1個主顯示，2個是可預覽的。主大小爲795x387px. 比例和ip5,6都不同，因此各家app可能須要根據本身的須要去從新排版調整了哦。

結論：相似的位圖，ip6等比放大便可，plus須要單獨從新排版調整。

在看一下手機拍的真機截圖，Title和Tab bar在真機上的物理高度都是相同的。根據@十萬個為什麼的提醒，此處物理高度並不相同，很是接近，我本身從新計算了下，iphone5和 iphone6的 Title bar物理高度爲 9.971mm =（128*88.51 /1136)，iphone6 plus 的Title bar物理高度爲10.591mm =（192*121.8 /2208）。不過此處的數據用處並不大，只爲求解物理高度是否相同，因此你們不用記，不過仍是要感謝@十萬個為什麼的認真。

------------------------------------------------------------------

四：相冊

在看相冊的變化（ip6 plus 對比 ip6截圖），相似的位圖應該都是等比放大的，並無像 app store單行增長數量，ip6相冊單個圖片的大小是186x186px，plus 的單個大小是309x309px，

因此相似這樣的界面， 能夠等比縮放就能夠了。

------------------------------------------------------------------

五：桌面 Icon:

在來看一下桌面icon的大小對比

iphone5=120x120px      iphone6=120x120px     iphone6 plus=180x180px (是iphone5/6的1.5倍，即@3x)

結論：icon要出一套180x180px的尺寸。

同理：關於啓動圖，也就是閃屏，若是你的webapp有一個啓動圖，那麼你又得增長兩行代碼適配新 iPhone 了。閃屏iPhone 6對應的圖片大小是750×1334px，iPhone 6 Plus 對應的是1242×2208px.

------------------------------------------------------------------

六：自動佈局及 svg 等

蘋果好像在IOS6的時候就提供了一種解決方案，自動佈局Auto Layout ：Auto Layout Guide: Introduction，若是設計師瞭解html和css會容易理解一些，我本身也只是瞭解html的皮毛，設計師在設計界面的時候標註的數據最好不要寫固定的多少px,使用絕對定位那是iP4以前的方案，尤爲如今出來了ip6和plus，若是如今還用絕對定位，設計師和工程師效率會很低，因此咱們和工程師溝通的時候最好使用的是靠左，右多少，居中，及控件在屏中大小及位置是幾分之幾之類的標註，Auto Layout能夠根據不一樣的設備尺寸自動計算UIView的frame，這樣會更有效方便的適配更多的尺寸。

Xcode6已經開始支持 FDP/svg 格式的矢量圖片了，和咱們的工程師溝通說能夠直接出一張 PDF 的圖片便可，我用 PS 導出pdf到xcode上測試可用了，順便問一下，你們沒有能夠批量導出psd圖層爲pdf格式切圖的方法，難道只能一個一個切？

------------------------------------------------------------------

全部的ip6&plus真機截圖放在附件裏面供你們下載研究。(壓縮包是mac自帶壓縮的，在windows解壓可能會亂碼，哪位朋友方即可以從新上傳一次分享給你們哦。)

轉載請保留如下信息，由於我還會針對不嚴謹的地方及新的發現隨時修改。（最後更新於2014-10-29  09：40）