iOS 对iPhone X适配

 

勇~敢~的小伙伴儿们,你们好,其实我本来不打算写关于iPhone X的适配的,虽然我已经做好了我们App对于iPhone X的适配,但是真的觉的很鸡肋,可是iPhone X的真机我在前几天感受了一下,发现终究是逃不了适配这条路,还是写了这篇文章,哎,

以后苹果会不会把这刘海给去掉啊,真的好别扭,我真的觉得iPhone X 好丑,在此立个flag,希望以后能回来打自己脸。嗯就这样。

 

来自一名UI设计师的觉悟:三分钟弄懂iPhone X 设计尺寸和适配

接下来,我们熟悉一下我们常见的屏幕尺寸吧

iOS 对iPhone X适配

 

转化为我们熟悉的像素尺寸

iOS 对iPhone X适配

 

其中倍图其实就是像素尺寸和开发尺寸的倍率关系,这只是外在的表现,倍图核心的影响因素在与PPI(DPI),了解屏幕密度与各尺寸的关系有助于我们深度理解倍率的概念。

 

而本次上新的全面屏手机iPhone X无论是在屏幕尺寸、分辨率、甚至是形状上都发生了较大的改变,下面以iPhone 8作为参照物,看看到底iPhone X的适配我们要怎么考虑?

iOS 对iPhone X适配

 

相比较而言,可以发现X和8的宽度一致都是375 pt,但是高度却多了145 pt,这就意味着首屏上可以展示更多的内容,多出了20%的垂直空间,对于京东淘宝而言这就一位置更高的商品曝光率或者是更高的运营价值。所以用iPhone X的胖友请你们捂紧自己的钱包,如果捂不紧,我不介意替大家保管嘻嘻。

上面谈的是开发尺寸,那设计尺寸上,iPhone 8的像素尺寸是750*1334 px(@2X),而iPhone X的像素尺寸是1125*2436 px(@3X),同样的宽度一个用@2X图,一个用@3X图,表现出了更高的清晰度。

 

iPhone X的屏幕密度为458ppi。

iOS 对iPhone X适配

看完了尺寸,我们再看看布局吧

设计师和移动端开发工程师要考虑的布局:

1.保证你的设计布局能够填充整个屏幕;

2.注意你的核心内容不要被设备的大圆角、传感器(齐刘海)、以及独步访问主屏幕的指示灯遮挡;

iPhone X 的设计应当填充整个屏幕

iOS 对iPhone X适配

注意X的大圆角和传感器

iOS 对iPhone X适配

设计布局要填充整个屏幕,这里有两块区域需要额外考虑:

1、屏幕顶部,即StatusBar部分,这条状态栏本来并没有可发挥的空间,但是iphone的StatusBar与NavigationBar背景是可以通栏的,以达到一种完全沉浸式体验的设计。高度为44pt

大部分的App应该也是没有影响的,主流NavgationBar都采用纯色背景,StatusBar背景沿用NavgationBar的背景,但是对于那些做了NavigationBar视觉效果的设计师就要考虑了,你的渐变色背景、或者带底纹的北背景、还包括电商平台商品图是通栏展示的商品图,多少会对实际效果产生一些影响。

比如,NavigationBar是渐变色背景的,由于X的Status+Nav高度增加,我们1242*192(@3X)的背景图会被等比例拉伸至这两块区域并且剪辑多余部分。如图:

iOS 对iPhone X适配

2、屏幕底部

访问主屏幕的指示灯区域如图

iOS 对iPhone X适配

屏幕底部的虚拟区,替代了home键,高度为34pt

指示灯区域是一个带着系统功能的内容显示区域,这就意味着它可以展示你内容;同时如果你的底部是TabBar,那么指示灯区域背景会来自于TabBar背景的延伸;如果我们是一个feed流的页面,底部则会展示次屏feed流的局部。

iOS 对iPhone X适配

鉴于圆角、传感器、指示灯区域的影响,iPhone X给出了设计布局的安全区意见:

iOS 对iPhone X适配

iPhone X的安全区如下图所示

iOS 对iPhone X适配

再考虑必要的NavgationBar、TabBar,主题内容显示的安全区需要根据设计需求进行考虑。根据实际需要,我们添加的所有空间都应当在安全区内,如各类型的Button、EditMenu、Pickers、Sliders等等。

iOS 对iPhone X适配

所有的控件都应放置在安全区域内。

iOS 对iPhone X适配

在适配过程中我们需要注意以下几点:

1、注意你的内容不要被圆角货传感器遮挡或裁切

2、注意StatusBar的高度

3、如果你的App是隐藏StatusBar的,建议重新考虑

是时候总结一下了

iPhone X的适配其实就是讲NavigationBar和TabBar的高度调整一下,将控件放入安全区内,总体来讲是比较简单的,希望这篇文章能够帮助到大家。

参考文章:iPhone X适配没那么复杂,但也不是看上去那么简单 有部分修改。

 

附主流App对iPhone X的适配以供大家参考

1.微信

iOS 对iPhone X适配

2.支付宝

iOS 对iPhone X适配

3.淘宝和天猫 淘宝的TabBar做的不如天猫好

iOS 对iPhone X适配

4.ofo和摩拜

iOS 对iPhone X适配

 

好了,大家快动动手指对你的App改造一番吧~