前言:苹果在9月13日发布了三款新的机型iPhone 8 ,iPhone8 Plus,iPhone X,其中8,8P和7,7P分辨率是一样的,新增分辨率1125px *2436px 。这个机型对UI设计师适配会有什么样的变化?是不是要多切一个尺寸的图?是不是原来的设计尺寸不够了?iPhone X屏幕的特殊形状对设计有什么影响?
安心,其实影响不大,但是确实多了一些要注意的点。
一.切图尺寸
IOS在屏幕上的坐标系以点(pt)为单位,然后映射到显示屏中的像素。不同的屏幕像素密度不同。普通的屏幕1pt对应1px,高分辨率的屏幕,1pt则对应更高的像素。这次发布会发布的新增的3款机型,屏幕的像素密度没有发生变化,设计师们依然出到3倍图即可。具体可以看下图:
二.设计稿尺寸
大海的团队,目前设计工具是Sketch,设计尺寸是iPhone7 的分辨率750px*1334px 。对我们团队来讲,设计稿尺寸也不需要做出调整。
iPhone X 分辨率1125px*2436px,和之前的屏幕相比,屏幕比例发生了变化。我们转换成pt为单位,来看下屏幕发生了什么变化。
下图中左侧是iPhone7 转化成 pt 的示意图 375pt*667pt,右图是iPhone X 转化成 pt 的示意图375pt*812pt可以发现屏幕高出了145pt。
为了方便理解,大家可以把这个尺寸理解成当年640px*1136px 和640px*960px 这两个屏幕之间的关系,用同样的注意点去处理设计时会遇到的问题。