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