个人中心

登录 | 注册

咨询/预约我的订单我的网课我的问答我的评价我的权益浏览记录我的收藏
机构中心

教培机构
教培机构入驻教育宝平台、搭建私域流量运营系统或购买百度知了好学

查看详情登录后台

网课机构
录播课程和知识付费机构入驻教育宝网课平台

查看详情登录后台

基础教育学校
公立私立幼儿园、中小学、职业学校入驻教育宝学校库

查看详情登录后台

课外活动机构
研学、周末活动、冬夏令营机构入驻研学活动子平台

查看详情登录后台

老师/大咖
各细分领域的资深老师、教练和从业者入驻教育宝大咖平台

查看详情申请合作
平台客服
- 400-601-2788

郑州新像素教育

专注于UI设计培训

郑州新像素教育老师直接接听

400-029-09** 转 34077

查看完整号码

扫码拨号

微信扫码拨号

iPhoneUI设计分辨率最终梳理

作者：新像素UI教育来源：新像素UI教育 2023年09月20日更新

在讲这期视频之前，再容许我介绍一下新像素。相信关注很久新像素的同学与毕业学员都不会陌生啦。这次我要重点给最新关注新像素的同学们讲一下，新像素成立于2015年，2016年从北京迁移到了郑州，2020年又新增了武汉校区，武汉校区和郑州校区都是一样的师资和管理模式，经常会在群里看到老学员们对比这两个校区的实力，其实没有谁强谁弱的区分，因为曾经都是在一个教研办公室的老师授课。新像素之所以在这两个城市开设的目的就是在这两个城市交通便利，全国的学员都能聚集来学习，同时也能够降低教学成本，减少同学们的学习费用。新像素的教研部师资力量在业内对比应该算比较的，蓝胖老师和我（草帽老师）只是教研部的普通一员，不过是在自媒体露面机会相对来说比其他老师多一些。新像素教研团队拿国内的设计奖项也拿到了手软，UI中国阿里蓝湖等专业平台和综合的平台都有拿到。目前教研团队还在不断更新课件，新像素的就业*也并没有因为市场环境的影响而减弱，鉴于教学质量的不断提升，可能下半年学习费用也会有相应的上调，同学们要抓紧时间扫描文章结尾的二维码预约名额啦。好的，开始正文，先看视频，再看笔记。前面我们把iPhone分辨率从头到尾给过了一遍，在这个中间我们也大概了解了它的分辨率是怎么一步一步越来越大的，那么今天我们主要解决两个问题，就是设计稿基准尺寸和状态栏到底该选择哪个？

首先，我们把每个阶段第一次发生变化的机型筛选出来，这样梳理完之后一下子就少了很多，其实这样看着还是有点乱，而且中间有很多分辨率宽度相同的机型是重复的，我们还需要进一步合并。

但是先别着急，合并之前我们先把状态栏加进来，这样也更方便大家理解。状态栏加进来之后，我们可以看出来老的375的状态栏用了很长一段时间，然后第一次变化就是iPhone X。其实仔细观察能发现，这些状态栏所有的变化都是基于先从工业设计上有变化，然后软件方面再去跟着变化。只是这里我们要知道，重叠部分的两个状态栏高度是不一样的，一个是44，另外一个是47。之所以把他们放到一起是想告诉大家这两个我们用哪一个都可以，对于开发来说，状态栏和底部的Home键他是没权限改的，哪怕说你用错了开发也不会理你，也不会照着你的改，因为这两个地方是苹果ios系统级的控件，不让随便改，*多让你改个背景色，所以对我们来说区别确实不大，大家如果用的话可以选择最新的。

其实到这一步还是有点多，我们再把分辨率宽度相同的给合并一下，这样合并之后只有7个分辨率宽度，然后我们把状态栏再放进去。首先老机型320宽度使用的肯定是375*20高度的状态栏，当然375跟414用的也是这个，那么宽375尺寸的机型是不是都是这个状态栏呢？这可不一定。因为iPhone 12 mini也是375，但是它用的就是带有刘海的，所以说375宽度下的状态栏除了高20的还可以用高44或者47的。说到这儿，忽然想到前面有个同学说375宽度下的设计稿做样机包装的时候很丑，我一问，他说用的是高20的那个状态栏，到这里他应该就知道了也可以选择用这个新的刘海的状态栏，最后再找一个样机包装一下，也可以好看。

然后我们继续往下梳理，这一次我们加入时间线的先后顺序。比如说第*波的时候小的320，中间的375，大的414，按基准设计稿来说这是第*个时代，后面直到iPhone 12又出来两个新的尺寸，中间的型号是390了，原来的375被下放，然后大的变成428。最后就是iPhone 14灵动岛出来之后尺寸又发生了一波变化，最小的是375，中间的是393，*大的尺寸是430，按照苹果的思路，这个应该最新的基准尺寸，然后上面还有个320的小屏，但是iPhone 12出来的时候，320被苹果正式的弃用了，最小的变成了375，所以现在基本上来说320已经消失了。

按照上面的方法梳理完之后，原来的这么多分辨率，我们到最后无非就是375、390和393该选择哪个作为基准设计稿。375我们肯定不用考虑，那390和393我个人的主观建议是选择390，因为390和393两个的区别不是很大。再者就是这里大家不要怕用错，还是那句话，开发是没权限改的，这个地方苹果会自动适配，哪个机型会自动显示哪个机型的状态栏，所以说你用不用错关系不大，只要他们的高度大差不差就可以了，另外选择390还有一个地方能帮助我们去容错，那就是现在的UI设计工具自适应布局都已经做的很好了，错3个像素问题真的不大。

其实看到这设计稿尺寸用哪个和状态栏选哪个应该就很清晰了，选状态栏之前你要先确定设计稿尺寸，哪个尺寸下有哪些状态哪儿可选，然后选最新的那个就行。另外还有一个很小的参考因素，但是不重要，就是你的设计稿基准尺寸和你手里的那个预览手机的尺寸保持一致。比方说你用的是iPhone 12，那你就可以在390下做设计。但是这里有一个很尴尬的点，就是375我们又不能完全放弃，这就要说到微信小程序了，如果你们不做微信小程序的话，是没什么影响的，用390就行。因为微信小程序要求的是375和750，这个时候如果你的基准设计稿是390，就会面临一些转换上的问题。但是这种情况也不是完全无解，只要你确保你的设计稿在375也能适配，到时候把设计稿的宽度先改成375，然后再导出到标注稿里面就可以了。其实梳理到最后，也没剩多少内容，都是由繁入简，这样整个顺下来之后，我们就能很快的理解很多东西。好了，到这里我们围绕iPhone分辨率主题的小系列也算是完结了，希望能对大家有所帮助。