概述
iPhone这次一下出了三款新机,iPhone Xs、iPhone XR、iPhone Xs Max,那么问题来了,这三款手机与之前的有什么不同,设计师的UI尺寸会发生什么变化,移动端页面的UI到底应该以多少为好?接下来我们将一一探讨。
看三款新机分辨率
Device | Portrait dimensions | 计算 |
---|---|---|
iPhone Xs Max | 1242px × 2688px | 1242 = 414*3 |
iPhone Xs | 1125px × 2436px | 1125 = 375*3 |
iPhone XR | 828px × 1792px | 828 = 414*2 |
上述分辨率好像似曾相识,是不是在哪里见过,看了计算栏是不是有点,哦。。。还是不太明白。。。
看前辈们的分辨率
Device | Portrait dimensions | 计算 |
---|---|---|
iPhone X | 1125px × 2436px | 1125 = 375*3 |
iPhone 8 Plus | 1242px × 2208px | 1242 = 414*3 |
iPhone 8 | 750px × 1334px | 750 = 375*2 |
iPhone 7 Plus | 1242px × 2208px | 1242 = 414*3 |
iPhone 7 | 750px × 1334px | 750 = 375*2 |
iPhone 6s Plus | 1242px × 2208px | 1242 = 414*3 |
iPhone 6s | 750px × 1334px | 750 = 375*2 |
iPhone SE | 640px × 1136px | 640 = 320*2 |
iPhone 5 | 640px × 1136px | 640 = 320*2 |
iPhone 4 | 640px × 960px | 640 = 320*2 |
以上数据来源iPhone开发者平台
从iPhone 4 至今,发布的部分手机设备分辨率如上,看到计算栏我们可以总结出:
iPhone 系列手机的分辨率大致分三类两种倍数:
横向分辨率 | 基数 | 倍数 | 代表机型 |
---|---|---|---|
640 | 320 | @2X | iPhone 4 4s 5 5s 5c SE |
750 | 375 | @2X | iPhone 6 6s 7 8 |
1125 | 375 | @3X | iPhone X Xs |
828 | 414 | @2X | iPhone XR |
1242 | 414 | @3X | iPhone 6s 7 8 Plus,iPhone Xs Max |
行业老兵应该回忆起来了,15年之前,大家做移动端UI设计,尺寸一般用的都是640,15年之后基本上用的是750,除此之外,大家可能用的比较多的还有1080,这个后面会解释。
设计师用什么尺寸,肯定是根据市场来的,所以谁也不能保证以后会用什么尺寸,这完全需要根据设备的市场占有率来做相应调整。
看分辨率市场数据
根据百度流量研究院统计,截止2018年7月,iOS设备机型排名和分辨率排名:
可以看到在IOS设备上分辨率前两名占据了>75%的份额,而且1242与750的占比很接近,随着这次iPhone Xs Max(1242×2688)的发布,必将逐步增加1242分辨率的占比,超过750分辨率也指日可待,所以接下来设计师的UI尺寸可能会变成1242*2208。
接下里我们来看Android,截止2018年7月,Android设备机型排名和分辨率排名:
可以看出,Android设备中分辨率占比最大的是1080,这也就解释了上面提到的有些设计师会用1080的尺寸,因为这个尺寸是目前Android市场上最通用的,我们可以看出,除了第一名,下面还有1080的横向分辨率,加起来>50%。
考虑到国内市场,Android占有率还是远大于iOS的,所以设计师选择用1080的尺寸也是毫无争议,当然大部分的设计师还是热衷于iOS尺寸,其中原因也不好细说,可能跟个人喜好有关。
还有一种可能是根据公司产品平台分布来选择,比如我们的某个产品只有Android的APP,那肯定就建议用1080的尺寸啦。
如果两个平台都有,同时运营又明确统计出了哪个系统或设备分辨率的用户占比,那肯定也是有理有据选择占比大的那波用户来服务啦。
得出结论
1.iOS 设备,尺寸保持750×1334,并逐步转换成 1242×2208
2.Android 设备,尺寸保持1080×1920
扯了半天,UI设计师该用什么尺寸呢?答案是,先看用户数据,如果没有,那就继续按目前的尺寸就行,跟没看过这篇文章一样,继续干活。
扩展
前面之所以把一个分辨率拆分成基数*倍数的书写形式,首先可以让大家清楚的知道iOS是如何在考虑设备的分辨率的,不是随便一个数据,其次是因为分辨率涉及到另外两个概念,像素密度(PPI)和设备像素比(DPR),上面提到的@2X、@3X和DPR是一个等同的概念,如果大家有兴趣,后面可以为大家详细讲解,也可以直接阅读我以前写的文章《移动Web开发基础-Viewport》。