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名为:[email protected],那么我把android里面相同的icon拿过来改名子为 [email protected],直接扔到[email protected]的同文件夹里面,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)

时间: 06-08

APP适配IOS8,iPhone6和Plus截图简要说明的相关文章

iOS开发——适配篇&amp;App适配简单概括

App适配简单概括 1:适配:适应.兼容各种不同的情况 系统适配 针对不同版本的操作系统进行适配 屏幕适配 针对不同大小的屏幕尺寸进行适配 在用户眼中 屏幕是由无数个像素组成的 像素越多,屏幕越清晰 在开发者眼中 屏幕是由无数个点组成的,点又是由像素组成的 像素越多,屏幕越清晰 iOS设置尺寸图 一:Autoresizing:基本的控件布局----掌握 在Autolayout之前,有Autoresizing可以作屏幕适配,但局限性较大,有些任务根本无法完成 相比之下,Autolayout的功能比

android客户端应用(native app)适配测试自动化 东海陈光剑 2014年5月5日 0:39:04

未命名 android客户端应用(native app)适配测试自动化 东海陈光剑 2014年5月5日 0:39:04 http://10.125.1.58:88/report.html?run_stamp=20140428054354&min=3&sec=214 <!doctype html><html><head>    <meta charset="UTF-8">    <title>适配测试报告<

web app iphone4 iphone5 iphone6 响应式布局 适配代码

from:http://www.phptext.net/article_view.php?id=387 在满大街的APP,除了游戏,软件图形类的需要用原生开发好点.现在大多还是基于WEBAPP或者混合的hybrid app,大家都知道资讯类的小应用其实网页就可以胜任,当然如果你要调用一些应设备,原生的APP外hybrid app也是一个不错的选择.不过我们今天的主角是WEB APP,WEB APP好处就是,随时随地有网就能看,简单实用.对于开发来说,更是低成本高效率,当然对于追求细致的来说...

你可能需要为你的APP适配iOS11

WeTest 导读 iOS 11 为整个生态系统的 UI 元素带来了一种更加大胆.动态的新风格. 本文介绍了iOS11在UI方面做了哪些更新,有些更新可以为用户提供更加完美的体验,但也有的可能会给目前的APP带来异常bug. 前言 前几天发现在做的APP在iOS11系统上动画有异常,在其他系统的设备上都是正常的,动画的操作是观察tableView的contentOffset变化后执行的,异常动画发生在tableView reloadData之后,也就是说tableView reloadData之

iPhone屏幕尺寸、分辨率及适配

目录(?)[+] 1.iPhone尺寸规格 设备 iPhone 宽 Width 高 Height 对角线 Diagonal 逻辑分辨率(point) Scale Factor 设备分辨率(pixel) PPI 3GS 2.4 inches (62.1 mm) 4.5 inches (115.5 mm) 3.5-inch 320x480 @1x 320x480 163 4(s) 2.31 inches (58.6 mm) 4.5 inches (115.2 mm) 3.5-inch 320x480

【转】iPhone屏幕尺寸、分辨率及适配

原文网址:http://blog.csdn.net/phunxm/article/details/42174937 1.iPhone尺寸规格 设备 iPhone 宽 Width 高 Height 对角线 Diagonal 逻辑分辨率(point) Scale Factor 设备分辨率(pixel) PPI 3GS 2.4 inches (62.1 mm) 4.5 inches (115.5 mm) 3.5-inch 320x480 @1x 320x480 163 4(s) 2.31 inches

iOS 开发——版本适配OC篇&amp;项目开发之系统适配问题(关于后台)

项目开发之系统适配问题 关于后台 在之前iOS 开发中,我们精彩遇到关于app适配问题,有屏幕适配,系统适配,但是由于苹果新设备(iphone 6/6p)技新术(sizeClass)的推出在屏幕适配上变的非常简单,而且之前关于app在系统适配上还是比较多的,可能是由于ios7的大改革,后面字啊iOS7盒iOS8上面的api并没有太大的差别,所以关于系统适配,我们并没有考虑太多. 但是,作为一个合格的开发者,不管是实际项目开发中,还是平时我们都要注意系统的视频,毕竟ios9又出来了,虽然常用api

不同App之间共享数据

我们知道iOS由于沙盒的存在,应用程序不能越过自己的区域去访问别的存储空间的内容,不过可能有许多场景我们需要在应用程序之间共享数据,比如多个应用共用用户名密码进行登录等.虽然我们不能直接通过文件系统来共享数据,不过还是有些方法可以实现. 这里,我们新建两个工程,T1:负责写数据,T2:负责读数据. 方法一:UIPasteboard 剪贴板是应用程序之间传递数据的简单方式,建议不要使用全局的粘贴板,而是自己根据名字创建一个新的粘贴板,防止其它地方全局拷贝的影响.然后把需要共享的内容复制到粘贴板,粘

微信iOS多设备多字体适配方案总结

一.背景 2014下半年,微信iOS版先后适配iPad, iPhone6/6plus.随着这些大屏设备的登场,部分用户觉得微信的字体太小,但也有很多用户不喜欢太大的字体.为了满足不同用户的需求,我们做了全局字体设置功能,在[设置-通用-字体大小]这里修改设置后,微信大部分界面都会随之缩放. 二.多设备适配 1.各设备的逻辑分辨率: 关于iphone6/6plus的物理分辨率.逻辑分辨率.屏幕物理尺寸.PPI等资料,很多文章已经有详细说明了,这里就不再累赘.对于终端开发人员来说,其实我们需要关心的