浅析iPhone X的适配

图片来源于苹果官网

首先我们习惯用iPhone7的375*667pt为设计稿向上适配iPhone7puls的屏幕。但是iPhone X的出现看似要打破这个局面,其实不然。

iPhone X的屏幕分辨率是1125*2436px换算成三倍图则为375*812pt(@3x)相比iPhone7的375*667pt只高了145pt。所以我们可以把iPhone X简单看成iPhone7的“加长版”。


加长版的iPhone7

iPhone X算是一个“奇葩”屏设计了,去掉了原有的home键又增加了“齐刘海”的状态栏设计。根据苹果官方给出的设计规范。Navigation bar和Bottom bar将做出较大的改变来适配这个“奇葩”屏幕的设计。


iPhone7和X的区别


官方给出的设计规范就是Navigation bar增加到44pt即给“齐刘海”增加了26pt,而Bottom bar以下则增加了34pt。剩下的85pt则是多余出来的位置。

当然这块1125*2436的“异形屏”并不是全部区域都是可用的,实际上根据官方给出的规范说明,除去全屏显示体验的情况下,存在着设计的“安全区”。


竖屏安全区域


横屏安全区域

这样是适配对iPhone X的影响并不会太大。可以正常的从375*667pt的@3x适配到iPhone X。但是部分全屏设计页面还是得做细节的调整。包括全面显示的页面、启动页和引导页等等

部分页面重新排版设计

所以对于适配iPhone X,只需要正常用iPhone7适配7plus的方式做@3x图适配就可以了。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容