iPhone 6和6Plus屏幕、UI设计和适配那些事
且看iPhone几个系列的屏幕数据：
| iPhone 4* | iPhone 5* | iPhone 6 | iPhone 6P | |
|---|---|---|---|---|
| 物理大小 - 对角(inch) | 3.5 | 4 | 4.7 | 5.5 |
| 物理大小 - 宽高(inch) | 1.94*2.91 | 1.96*3.48 | 2.3*4.1 | 2.7*4.79 |
| PPI | 329.65 | 325.97 | 325.61 | 400.53 |
| 物理分辨率(px) | 640*960 | 640*1136 | 750*1334 | 1080*1920 |
| 逻辑分辨率（pt） | 320*480 | 320*568 | 375*667 | 414*736 |
| 渲染分辨率（px） | 640*960 | 640*1136 | 750*1334 | 1242*2208 |
| 像素/点比率 | 2 | 2 | 2 | 2.6 |
首先要看到的事实是6P的ppi变大了，也就是像素更小了。如果还是按1:2的点像比，那么这块1080*1920像素分辨率的屏幕应该有540*960的点分辨率。但实际计算用到点分辨率却是414*736，点像比是1:2.6，不到1:3。
那么问题来了，为什么苹果不沿用326ppi左右屏幕，而要用401ppi的屏幕？为什么6P的点分辨率是414*736？
关于这些问题可以参考知乎iPhone 6 Plus的逻辑分辨率为什么是414×736？。
大概就是保证：
1.6P屏幕必须6大，5.5英寸为前提;
2.显示更多内容，所以点分辨率必须大于375*667;
3.ppi不能比之前低；
4.同样逻辑单位（点）的内容，如字体、按钮物理尺寸不能比之前小，否者会造成视觉、操作不便。
5.在现有工艺可达到。
所以最终401ppi、414*736、1080*1920、1:2.6的配置更像是一种折中的非完美方案。
问题又来了，为什么不是326ppi、880*1560（880≈2.7”*326ppi，1560≈4.79”*326ppi）、440*780、1:2这种尺寸呢？
这样还可以继续用2x图。这里就略过不研究了。
如有2.6对于开发、设计来说都不是一个特好的数字，所以苹果把它约等了一下变成3，又搞了个渲染分辨率的概念。
414*736的3倍正是1242*2208，在这个分辨率计算界面的样式，然后把最终的画面下采样(downsampling)缩小1.15显示到1080*1920上。渲染分辨率还用在未专门适配4.7英寸的iPhone 6的时，把4英寸的640*1136画面上采样(upsampling)放大1.171875倍显示在750*1334屏幕上，当然会看起来比较模糊。采用3的话以后如果采用461ppi屏幕也更容易兼容。
更全更详细的图示请参见：The Ultimate Guide To iPhone Resolutions
PPI计算和常见手机PPI信息：https://www.sven.de/dpi/
以主屏幕分辨率的app图标为例，大小为60pt*60pt，为什么@3x下icon的尺寸180*180就是正确的呢？在@2x下120*120的icon，物理尺寸是0.36”≈120px*1.96”/640px，而@3x下180*180的icon物理尺寸是0.39≈(180px/11.5)*2.7”/1080px。可见他们的物理尺寸基本一致。
对于6P，@2x素材的大小乘以1.5便是@3x图的大小。
对于iPhone 5系，屏幕只是变长了，垂直方向上的适配很简单。然后对于6和6p来说，不仅边长变宽，点像比率也变大了。那么在设计iPhone UI时就不再像以前一样了。应该结合使用point、autolayout的“相对”布局，什么时候该用固定point大小，什么时候该用相对尺寸，具体并没有可套用的准则。
比如主屏icon图标保证尺寸是60point，横向平分间隔；相册里每行4张缩略图，4等分，没有具体point大小；nav bar是同一Point大小；tab bar图标统一point大小，间隔均分。
在出设计图给程序员时的标注也不再全部是绝对的像素或pt，像间隔应该表明是横向均分。
在设计时应该以哪个iPhone为参考呢？画布尺寸为多大呢？
画布应该以iPhone4的点分辨率320px*480px，放大3倍，即960px*1440px为标准。这样既保证了UI对最小屏幕的绝对适配，也方便了@3x素材的导出。
在横向上，6和6P使空白区域拉伸即可。纵向可以结合留白、放大、使用滚动。
在编程实现应该使用Autolayout，摒弃过去的绝对pt布局。
使用代码进行布局时可以使用一些对原生NSLayoutConstraints的封装简化库，减少臃肿，提高代码可读性，加快速度。
如Masonry、PureLayout、KeepLayout。
本人使用 PureLayout，虽然语法没 Masonry 那么简单，但是 bug 少。
The post iPhone 6和6Plus屏幕、UI设计和适配那些事 appeared first on wingyiu.