再过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://www.ccopus.com/safari-ios8-iphone6-web-developers-designers-chinese/

作为参考(有摘抄部份)。

正文:

首先我们先看一下iphone5,iphone6和iphone6 plus的一些数据:

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界面截图拿来对比一下:(无法查看原图?)

点击这里下载高清大图

?down

1

从图上可以看出来:

一:Title bar和Tab bar

ip5和ip6的Title bar和Tab bar的高度没变,并且tab bar的icon的大小也没变,只是整栏的宽拉伸了,所以IOS工程师在早期开发的时候如果用的是Autolayout自动布局会很爽,如果是布局写死了,那真是要一个界面一个界面的改了。

结论:类似的高度不变,可以直接拉伸宽度的,还有设置界面等,甚至代码写的是靠左对齐和靠右对齐的话间距都不用调。

二:Tab bar的icon大小

图中标识的是排行榜的大?。篿p5=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在真机上的物理高度都是相同的。

2

在看相册的变化(ip6 plus 对比 ip6截图),类似的位图应该都是等比放大的,并没有像 app store单行增加数量,ip6相册单个图片的大小是186×186,plus 的单个大小是309×309.

m_15dc5428d9610000011eb9f84b42

在来看一下桌面icon的大小对比

iphone5=120×120 ? ? ?iphone6=120×120 ? ? iphone6 plus=180×180 (是iphone6的1.5倍,即@3x)

m_19d8542a2b87000001f7c064065d

所有的ip6&plus真机截图放在附件里面供大家下载研究。(压缩包是mac自带压缩的,在windows解压可能会乱码,哪位朋友方便可以重新上传一次分享给大家哦。)

down

作者:youngxkk

原文地址:http://www.ccopus.com/article/ZMTE0MjMy.html

转载请注明:学UI网—UI设计师学习教程平台 » UI设计看过来,iPhone6&Plus适配方法(提供iP6和Plus截图下载)

登录收藏

学UI就上学UI网!越努力,越幸运!

“学UI网www.ccopus.com?”最值得关注的UI学习平台! 每天发布高质量的设计教程和分享设计经验,服务于20万UI设计师,帮助初学者快速转型。每周六晚上免费YY公开课(36013311),给大家提供更多免费学习的机会。想成为设计师的你快来关注吧!

【特色推荐】

APP截图站app.ccopus.com” 海量APP截图,让你灵感爆发!国内最好的APP截图站。

UI作业网 zuoye.ccopus.com” 每一个作业题都尽量配有教程,交作业就有大神免费帮你点评作业,爽歪歪!

UI设计导航站 hao.ccopus.com” 专为UI设计学习者打造的资源+学习,双用途的网址导航站。亲爱的,你收藏了吗?

【学UI网 原创文章 投稿邮箱:tougao@ccopus.com,也可以找各个群的管理】

 
你可能喜欢的:
UI设计师设计思路的进阶之路UI设计师设计思路的进阶之路
背单词APP「百词斩」原型分享背单词APP「百词斩」原型分享
微信有哪些隐藏的细节或逻辑很惊艳?微信有哪些隐藏的细节或逻辑很惊艳?
标签栏ICON的设计与应用标签栏ICON的设计与应用
界面交互动效核心知识的分类与总结界面交互动效核心知识的分类与总结
大合集!最新版iPhone X 展示模板样机下载!大合集!最新版iPhone X 展示模板样机下载!
最新版IOS 11设计规范,官方源文件下载!最新版IOS 11设计规范,官方源文件下载!
高达1440M!5套高质量UI KIT下载!高达1440M!5套高质量UI KIT下载!
问答社区「知乎」APP原型分享问答社区「知乎」APP原型分享
移动端:下拉菜单有更好的替代选择!移动端:下拉菜单有更好的替代选择!
?