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切图资源

推荐阅读更多精彩内容