UI设计-iPhone

ui设计-iPhone

首先我们先看一下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界面截图拿来对比一下：（无法查看原图？）

点击这里下载高清大图

从图上可以看出来：

一：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)

谢谢楼主分享

不错。收了