ios屏幕分辨率以及Res资源输出(整理)

阅读过前辈的文章,还是整理下记忆比较深刻
          @ pigtwo http://www.zhihu.com/question/25308946
苹果发布两种新尺寸的大屏iPhone 6和plus 让手机屏幕进入了分辨率齐飞的时代,
首先看下三组数据屏幕分辨率
QQ截图20141124161616
Phone6 以及 iPhone6 Plus 上设置里有一个放大模式。经测试,IOS 通过系统底层对渲染像素的控制,iPhone6的放大模式其实是模拟了 5(s) 的设备独立像素,而 iPhone6 Plus 的放大模式则模拟了 iPhone6 的标准模式。具体见下表:
QQ截图20141124171027

iphone5,iphone6和iphone6 plus的一些数据对比:

iphone5/s       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 6 Plus适配版本即将提交App store审核。先晒一下我们采用的协作模式,再慢慢说明原委。

8B9D8BF9-B382-4DD9-BBA0-FEC67A34D2B3

第一步,视觉设计阶段,设计师按宽度750px(iPhone 6)做设计稿,除图片外所有设计元素用矢量路径来做。设计定稿后在750px的设计稿上做标注,输出标注图。同时等比放大1.5倍生成宽度1125px的设计稿,在1125px的稿子里切图。

 

第二步,输出两个交付物给开发工程师:一个是程序用到的@3x切图资源,另一个是宽度750px的设计标注图。

 

第三步,开发工程师拿到750px标注图和@3x切图资源,完成iPhone 6(375pt)的界面开发。此阶段不能用固定宽度的方式开发界面,得用自动布局(auto layout),方便后续适配到其它尺寸。

 

第四步,适配调试阶段,基于iPhone 6的界面效果,分别向上向下调试iPhone 6 plus(414pt)和iPhone 5S及以下(320pt)的界面效果。由此完成大中小三屏适配。

 

为什么选择iPhone 6作为基准尺寸?

当面对大中小三种屏幕需要适配的时候,很容易想到先做好一种屏幕,再去适配剩下两种屏幕。第一个决定是到底以哪种屏幕作为设计和开发的基准尺寸。我们选择中间尺寸的iPhone 6(750px/375pt)作为基准,基于几个原因:

 

1、从中间尺寸向上和向下适配的时候界面调整的幅度最小。375pt下的设计效果适配到414pt和320pt偏差不会太大。假设以414pt为基准做出很优雅的设计,到320pt可能元素之间比例就不是那么回事了,比如图片和文字之间视觉比例可能失调。

 

2、iPhone 6 plus有两种显示模式,标准模式分辨率为1242x2208,放大模式分辨率为1125x2001(即iPhone 6的1.5倍)。可见官方系统里iPhone 6和iPhone 6 plus分辨率之间就存在1.5倍的倍率关系。很多情况下这两种尺寸可以用1.5倍直接等比适配。

 

3、1242x2208这个奇葩的数值是苹果官方都不愿意公开宣传的一个分辨率,不便于记忆和计算栅格。640x1136虽然是广泛应用的一个分辨率,但是大屏时代依然以小尺寸为设计基准显然不合时宜,设计师会停留在小屏的视角做设计。

 

所以,iPhone6的750x1334是最适合基准尺寸。

 

只交付一套设计稿,默认用什么规则来适配?

前文提到适配策略是先选择iPhone 6作为基准设计尺寸,然后通过一套适配规则自动适配到另外两种尺寸。这套适配规则总结起来就一句话:文字流式,控件弹性,图片等比缩放。

683AC5C9-AADA-47B9-BB7F-BBCBE088F3B3

控件弹性指的是,navigation、cell、bar等适配过程中垂直方向上高度不变;水平方向宽度变化时,通过调整元素间距或元素右对齐的方式实现自适应。这样屏幕越大,在垂直方向上可以显示更多内容,发挥大屏幕的优势。

C5730355-CAF6-4623-BE35-A4AD078782F5

C715226F-3F03-4246-806E-E0675C28637B

按照上述默认适配规则,大中小三种屏幕显示效果均相同。有时候想在大屏幕显示更多内容,需要设计出特殊适配效果。比如App store首页焦点图,从iPhone 6适配到iPhone 6 plus时焦点图尺寸和排版做了特殊处理。底下应用列表也从一排3+个变成一排4+个,真正实现了大屏幕显示更多内容的理念。这些就需要设计师给出相应设计稿。27E0A9B1-19FA-4E7E-B82E-76496C0253E4

发表评论

电子邮件地址不会被公开。 必填项已用*标注

返回主页看更多
狠狠的抽打博主 支付宝 扫一扫