前言： 再过10天IPHONE6就开卖啦，大家是不是很捉急啊。对于UI设计师来讲，最近操心的应该是怎么适配新的IPHONE尺寸的问题
再过10天IPHONE6就开卖啦，大家是不是很捉急啊。对于UI设计师来讲，最近操心的应该是怎么适配新的IPHONE尺寸的问题吧，今天虎哥找到youngxkk同学写的这个攻略，希望能帮助你解开心中疑惑，那么咱就开始吧！
有幸在9月25日拿到了iP6和iP6 Plus的真机，恰好又要做适配APP的工作（从iphone5上适配到iphone6和ip6 plus上），所以在真机上研究了下苹果官方在不同分辨率下对系统APP所做的适配。同时在网上也没找到相关的真机对比截图说明什么的，又有朋友问我要IP6和PLUS的真机截图回去自己研究，既然这样，那么干嘛不利用自己已有的资源，让更多的设计师受益呢？所以那就说点什么吧，抛砖引玉，希望大家可以共同研究，少走些弯路，共同成长。
之前看过@jingdesign 的关于适配ip6的文章：快速适配iPhone6及plus的诀窍
还有@罗磊的文章：Web开发者和设计师必须要知道的 iOS 8 十个变化：http://luolei.org/safari-ios8-iphone6-web-developers-designers-chinese/
作为参考（有摘抄部份）。
iphone5/s iPhone 6 iPhone 6 Plus
尺寸 4” 4.7” 5.5”
Viewport’s device-width (in CSS pixels) 375 375 414
Viewport’s device-width (Android设备同分辨率参考) 360 360 400
Device Pixel Ratio 像素比 2 2 3 (近似值)
Rendered Pixels 渲染像素 (默认 viewport size * dpr) 640×1136 750×1334 1242×2208
Physical pixels 物理像素（手机显示像素） 640×1136 750×1334 1080×1920
图片资源后缀名 @2x @2x @3x
然后我把3个屏幕的App Store界面截图拿来对比一下：（无法查看原图？）
点击这里下载高清大图
从图上可以看出来：
一：Title bar和Tab bar
ip5和ip6的Title bar和Tab bar的高度没变,并且tab bar的icon的大小也没变，只是整栏的宽拉伸了，所以IOS工程师在早期开发的时候如果用的是Autolayout自动布局会很爽，如果是布局写死了，那真是要一个界面一个界面的改了。
结论：类似的高度不变，可以直接拉伸宽度的，还有设置界面等，甚至代码写的是靠左对齐和靠右对齐的话间距都不用调。
二：Tab bar的icon大小
图中标识的是排行榜的大小：ip5=46×46, ip6=46×46，ip6plus=69×69（恰好是46的1.5倍）。
结论：iphone6的icon,大多可以直接使用ip5的资源，plus的icon需要把ip5的icon资源x1.5倍即可，（我们当时开发xx软件的时候，android的设计尺寸是基于1080P的，我把android的资源拿出来用在plus上是完全可以的，所以开发android用的是1080P屏幕的设计师有福了。）（在解释一下：例如ip5的某个icon名为:star@2x.png，那么我把android里面相同的icon拿过来改名子为 star@3x.png，直接扔到star@2x.png的同文件夹里面，xcode可以识别为plus的资源的，并且模拟器跑起来后icon的确变成高清的了，和别的没有替换的区别很明显。）
二：banner
ip5的banner是640×260，ip6是750×304 (即ip5的640×260等比缩放后的大小）。
ip6 plus排版已变化，banner图的样式变的和ipad类似，显示3个，其中1个主显示，2个是可预览的。主大小为795×387. 比例和ip5,6都不一样，所以各家app可能需要根据自己的需要去重新排版调整了哦。
结论：类似的位图，ip6等比放大即可，plus需要单独重新排版调整。
在看一下手机拍的真机截图，Title和Tab bar在真机上的物理高度都是相同的。
在看相册的变化（ip6 plus 对比 ip6截图），类似的位图应该都是等比放大的，并没有像 app store单行增加数量，ip6相册单个图片的大小是186×186，plus 的单个大小是309×309.
在来看一下桌面icon的大小对比
iphone5=120×120 iphone6=120×120 iphone6 plus=180×180 (是iphone6的1.5倍，即@3x)
所有的ip6&plus真机截图放在附件里面供大家下载研究。(压缩包是mac自带压缩的，在windows解压可能会乱码，哪位朋友方便可以重新上传一次分享给大家哦。)
作者：youngxkk
原文地址：http://略.cn/article/ZMTE0MjMy.html
转载请注明：起航学习网 » UI设计看过来，iPhone6&Plus适配方法（提供iP6和Plus截图下载）
文章出自：http://qh.itpxw.cn/peixun/ui/201613789.html
文章标题：UI设计看过来，iPhone6&Plus适配方法（提供iP6和
免责声明：本站文章均由入驻起航学习网的会员所发或者网络转载，所述观点仅代表作者本人，不代表起航学习网立场。如有侵权或者其他问题，请联系举报，必删。侵权投诉
