iPhone XR、XS、XS Max发布后，UI设计师如何

iPhone XR、XS、XS Max发布后，UI设计师如何做适配？

北京时间9月13日凌晨1点，苹果在美国加利福尼亚州的Apple Park园区召开了2018年苹果秋季新品发布会；发布的三款新iPhone包括两款OLED屏幕的iPhone XS和iPhone XS Max，屏幕尺寸分别为5.8英寸和6.5英寸，和iPhone XR，配备6.1英寸LCD液晶屏。

新机型的发布，必然会对UI设计师的适配产生一些影响，下面U妹带大家一起来看看都有哪些变化？

一、 屏幕尺寸与分辨率

二、如何进行适配？

手机适配采用几倍图与PPI是有关系的，也就是所谓的像素密度，现在，我们都是以750x1334px的尺寸作为设计稿进行设计，以@2x为基准做设计稿，有一种情况现在非常普遍，那就是一稿两用；设计师都是做IOS版本的设计稿，同时适配安卓，这样既节省了开发时间和并减少了项目成本。

1、对于iPhone XS

新发布iPhone XS（458ppi），5.8英寸，分辨率为1125x2436px，与iPhone X（三倍图）是一致的，所以我们可以得出iPhone XS也是使用的三倍图@3x。

2、对于iPhone XS Max

iPhone XS Max（458ppi），6.5英寸，分辨率为1242*2688px，而iPhone8 Plus（三倍图，401ppi），分辨率为1242x2208px，iPhoneXS Max比iPhone8 Plus的PPI仅多了50多，跟iPhoneX（三倍图）的PPI一致，可以看出iPhoneXs Max使用的同样是三倍图@3x。

从屏幕宽高比例来看：

iPhone XS Max宽度1242/3=414pt，iPhone8 Plus宽度1242/3=414pt，两者的宽度一致

iPhone XS Max高度2688/3=896pt，iPhone8 Plus高度2208/3=736pt；

iPhone XS Max比iPhone8 Plus长一截，多了160pt。

我们发现，iPhone XS Max的适配，和去年设计师适配iPhoneX差不了多少。

3、对于iPhone XR

iPhone XR（326ppi），6.1英寸，分辨率为828x1792px，可以看到iPhone XR与iOS二倍图的PPI（326ppi）一致，可以看出iPhone XR使用的是二倍图@2x。

从屏幕宽高比例来看：

iPhone XR宽度828/2=414pt，iPhone XS Max宽度1242/3=414pt；

iPhone XR高度1792/2=896pt，iPhone XS Max高度2688/3=896pt；

对比发现，iPhone XR与iPhone XS Max宽高比是一致的！这意味着 UI设计者做完iPhone XS Max的适配后，直接进行等比例缩放2/3就可以得到iPhone XR了，不用重新进行修改布局（也可以先做iPhone XR的适配，再等比例缩放到iPhone XS Max）。

三、布局与安全区域

在为iPhone X做设计时，由于之前的直角屏幕变为了圆角，所以我们必须确保布局覆盖到整个屏幕，不会被设备屏幕上的圆角、传感器和指示灯所遮蔽。

对于应用程序中大多数使用标准化的、系统提供的UI元素（如导航栏、表格等）会自动适配iPhone X。背景延伸到显示器边缘。

以上是官方提供的布局指南，这个布局有助于内容的定位，对齐和间距安全区域可以防止内容覆盖状态栏，导航栏，工具栏和标签栏。

竖直时的安全区可延伸至萤幕左右两侧，上部留44pt给状态栏；布局边距通常左右再内缩15pt。

横向时的安全区左右两侧皆内缩44pt；布局边距通常左右再内缩15pt。

需要特别注意的是，将手机横向展示时，需要注意“刘海”区域，做设计时尽可能左右对称内缩，可达成体验的一致性。

四、总结

对于新发布的3种机型，我们还是以750x1334px为设计稿尺寸，切图资源正常输出@2X、@3X为切图资源，设计稿尺寸不变，在适配上，iPhone XR使用的是二倍图@2x切图资源，iPhone XS、iPhone XS Max使用的是三倍图@3x切图资源。