成都天琥教育分享iPhone XR、XS、XS Max适配标准

　　成都UI设计培训学校根据多家设计公司岗位标准，采用独特的目标节点式教学，将每个课程每个阶段每个模块细分到每个知识点都有对应的目标完成要求与项目完成实例，采用此教学方法后，学员的技术水平较之前平均提升30% 联系电话400-888-3854 QQ：2294155463

---

　　iPhone XR、XS、XS Max发布后，UI设计师如何做适配?苏州天琥教育为大家总结了XR XS XS max机型的适配知识，希望对大家有所帮助，别忘了收藏哟

　　北京时间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切图资源。

---

　　成都UI设计培训学校根据多家设计公司岗位标准，采用独特的目标节点式教学，将每个课程每个阶段每个模块细分到每个知识点都有对应的目标完成要求与项目完成实例，采用此教学方法后，学员的技术水平较之前平均提升30% 联系电话400-888-3854 QQ：2294155463