从2007年第一款iPhone发布直到现在,iOS设备的型号越来越多,屏幕尺寸的碎片化程度也越来越高。为了解决多机型的适配问题,在进行移动UI设计时就需要了解主流iOS设备的硬件参数,尤其是屏幕参数。
目前主流的iOS设备有iPhone 6s/7/8(4.7 in)、iPhone 6s/7/8 Plus(5.5 in)、iPhone X/XS(5.8 in)、iPhone XR(6.1 in)等,它们的屏幕尺寸(对角线长度)如下图所示。
只知道设备的屏幕尺寸是不够的,还需要知道它们的像素分辨率,因为这与我们用Photoshop做UI设计时新建画布的尺寸设置有关。另外,iOS系统的App UI中的栏,如状态栏、导航栏、标签栏等,它们的高度也分别因机型的不同而不同。下表即列出了这些参数。
iOS严格规定了各个栏的高度,这是设计时必须遵守的,如下图所示。在进行iPhone X(@2x)的UI设计时,我们依然可以采用iPhone 7的设计尺寸作为模板,只是高度增加了290 px,设计尺寸为750×1624(@2x)。注意状态栏的高度由原来的40 px变成了88 px,另外底部要预留68 px作为主页指示器的位置。
前面介绍了主流的iPhone设备,除此之外,苹果公司还推出了iPad、iPad mini及iPad Pro等设备。下表和下图展示了苹果公司推出的几款iPod touch和iPad系列设备的UI设计尺寸要求。