APP適配IOS8，iPhone6和Plus簡要說明，有iP6下載供研究(原創)，ios8ip6
有幸在9月25日拿到了iP6和iP6 Plus的真機，恰好又要做適配APP的工作（從iphone5上適配到iphone6和ip6 plus上），所以在真機上研究了下蘋果官方在不同解析度下對系統APP所做的適配。同時在網上也沒找到相關的真機對比說明什麼的，又有朋友問我要IP6和PLUS的真機回去自己研究，既然這樣，那麼幹嘛不利用自己已有的資源，讓更多的設計師受益呢？所以那就說點什麼吧，拋磚引玉，希望大家可以共同研究，少走些彎路，共同成長。
之前看過@jingdesign 的關於適配ip6的文章：快速適配iPhone6及plus的訣竅，
還有@羅磊的文章：Web開發人員和設計師必須要知道的 iOS 8 十個變化。作為參考（有摘抄部份）。
------------------------------------------------------------------
本文：
首先我們先看一下iphone5,iphone6和iphone6 plus的一些資料：
iphone5/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
圖片資源尾碼名 @2x @2x @3x
Status Bar 狀態列高 (px) 40 40 60
Title Bar 導航條高 (px) 88 88 132
Tab Bar 底欄高 (px) 98 98 147
案頭 icon (px) 120 120 180
這裡是給前端參考的：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 的瀏覽器在渲染在螢幕之前首先會調整圖片大小。
從圖上可以看出來：
一：Title bar和Tab bar 高度
Title bar ： ip5/6的 高度是128px，plus 的高度是192px （128x1.5=192）
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的基礎上空白地區展開，位元影像則要等比縮放），
以1242x2208px的尺寸去設計 iphone6 plus, 因為 xcode 的工程檔案及 plus 代碼及都是1242x2208px的解析度，只是螢幕物理大小是1080x1920px，所以按照1242x2208px的尺寸去設計，plus 上顯示的物理大小才會正常，並且切圖也才會是@3x.如果用1080P切圖，表徵圖資源肯定會不清楚。（如果你們的設計師人數足夠多，當然iphone6也要單獨設計一套。）
------------------------------------------------------------------
三：bannerip5的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)
-----------------------------------------------------------------
六：自動布局及 svg 等
蘋果好像在IOS6的時候就提供了一種解決方案，自動布局Auto Layout ：Auto Layout Guide: Introduction，如果設計師瞭解html和css會容易理解一些，我自己也只是瞭解html的皮毛，設計師在設計介面的時候標註的資料最好不要寫固定的多少px,使用絕對位置那是iP4之前的方案，尤其現在出來了ip6和plus，如果現在還用絕對位置，設計師和工程師效率會很低，所以我們和工程師溝通的時候最好使用的是靠左，右多少，置中，及控制項在屏中大小及位置是幾分之幾之類的標註，Auto Layout可以根據不同的裝置尺寸自動計算UIView的frame，這樣會更有效方便的適配更多的尺寸。
Xcode6已經開始支援 svg 格式的向量圖片了，和我們的工程師溝通說可以直接出一張 svg 的圖片即可，我用 PS 的一個外掛程式zeick可以匯出 svg ，但是這外掛程式是收費的，不知道大家有沒有更好的方式，可以用 PS CC匯出svg格式的工具/外掛程式？
------------------------------------------------------------------
所有的ip6&plus真機放在附件裡面供大家下載研究。(壓縮包是mac內建壓縮的，在windows解壓可能會亂碼，哪位朋友方便可以重新上傳一次分享給大家哦。) 下載連結： http://pan.baidu.com/s/1gdxhv5x
轉載請保留以下資訊，因為我還會針對不嚴謹的地方及新的發現隨時修改。（最後更新於2014-10-29 09：50）
————————————————————————————————————————————
本文轉載自站酷網，作者@youngxkk
原文地址 http://www.zcool.com.cn/article/ZMTE0MjMy.html
————————————————————————————————————————————
