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）