要说逻辑像素和物理像素，还得从苹果的产品说起。毕竟，Apple推出了Retina。iPhone4相关产品：iPhone4（第四代）、iPhone4s（第五代）。iPhone4于2010年6月8日发布。iPhone4延续了iPhone一代的多点触控（Multi-touch）屏幕界面，并首次增加了视网膜屏幕、前置摄像头、陀螺仪和后置摄像头。闪光灯，摄像头像素提升至500万。对于我们的设计师来说，最重要的是添加Retina屏幕。Retina是苹果公司提出的一个标准，这意味着人们在应用场景的观看距离内看不到单个像素。我们都知道，如果你靠得足够近，平均屏幕上就会有一个像素网格。屏幕就是由这些矩阵组成的。这种屏幕的问题是我们可以更近地看到那些网格和矩阵。如果我们想让用户得到最好的体验，用户看不到网格是很自然的，那么我们应该怎么做呢？答案是：增加屏幕的密度。如果屏幕的密度达到一定程度（当然也取决于用户的观看距离，即用户通常离屏幕多远），那么用户的眼睛就无法分辨细小的像素颗粒。这种屏幕叫做Retina屏幕，也叫Retina屏幕。这是用户体验的巨大提升，也是UI设计师的噩梦。原来的设计稿都需要放大才能在iPhone4上完美显示：比如我们的界面尺寸是480x320px，现在因为屏幕密度翻了一番，所以我们需要设计640x960px就足够了。在电脑上，这个尺寸是手机的两倍！（当然，当时的电脑屏幕通常不是Retina屏幕）。而3GS还没有完全淘汰，那么一个APP如何适配两部不同尺寸的手机呢？因此，在每个APP中预装了两组切图，一组尺寸为480x320px，为双图（@1x）；和一个尺寸为960x640px的图像，它是双图像(@2x)。这两套图片资源的命名是完全一样的，只是需要在双图的末尾加上@2x来标记为高清尺寸，比如home_icon@2x.png。△iPhone4代产品（2010）逻辑像素和物理像素逻辑像素（logicpoint）：逻辑像素的单位是PT，是根据内容的大小计算的一个单位。例如，iPhone4的逻辑像素为480x320pt。但是由于视网膜屏幕的密度，每个逻辑点都增加了一倍，即1pt=2px，那么iPhone4的实际物理像素是960x640px。使用Sketch和AdobeXD软件设计界面的iOS开发工程师和设计师使用PT。物理像素的单位就是我们常说的像素，缩写为PX。是我们Photoshop和抠图的单位，屏幕设计中最小的单位是1px，不能再分了。使用Photoshop设计移动界面和网站的设计师使用PX。在后面的文章中，如果你使用Photoshop设计界面，你只需要记住所有px单位的值和支持Photoshop的工具即可。如果你使用Sketch或者AdobeXD来设计界面，那么你只需要记住所有pt单位工具的数值和对应关系即可。△逻辑像素和实际像素的计算方式不同。PPIPPI（pixelsperinch）是指屏幕分辨率的单位，表示每英寸显示的像素密度。屏幕的PPI值越高，屏幕每英寸能容纳的像素点就越多，这款产品的画面细节也就越丰富。如果PPI值大于300，我们一般无法用肉眼察觉屏幕上的“马赛克”网格。但如果屏幕很大，视网膜屏幕需要显示的PPI值也需要更大，所以iPhonePlus系列的PPI值要比iPhone6/7/8大。PPI在我们的设计工作中其实并不重要，但了解它有助于我们理解为什么iPhone4的实际像素是iPhone3GS的两倍。△PPI计算公式iPhone5相关产品：iPhone5（第六代）、iPhone5s和iPhone5c（第七代）iPhone5于2012年9月13日正式发布，iPhone5的设计带来了不小的争议，因为iPhone5并没有采用乔布斯认为最适合人类的手机尺寸的3.5英寸屏幕，而是采用了4英寸屏幕。宽度保持不变，高度增加。这样做的原因是更大的手机在市场上更受欢迎。当时设计师差点崩溃，因为又要改编了。原来的960x640px尺寸变成了1136x640px，不过这个变化不大，只是高了一点。所以@2x高清图的设计稿就变成了640x1136px。因为iPhone4好像长了一点，所以滑完就完了。除了闪屏等界面需要在iPhone4、iPhone5、3GS尺寸单独制作外，其他界面仍需维护两套设计稿。△iPhone5（2012）iPhone6/7/8和iPhonePlus相关产品：iPhone6和iPhone6Plus（第八代）、iPhone6s和iPhone6sPlus（第九代）、iPhone7和iPhone7Plus（第十代）、iPhone8和iPhone8Plus（十一代）。这个产品迭代周期值得大家关注。从iPhone6到iPhone8这段时间，苹果新手机的物理像素都是750x1334px。所有Plus手机的物理像素都是1242x2208px。如果按照逻辑像素计算，那么iPhone6/7/8的逻辑像素为375x667pt（即750×1334除以2）；而iPhonePlus的逻辑像素为414x736pt（即1242×2208除以3，因为屏幕太大，观看距离不同，所以屏幕密度更高）。到历史上的这个时候，所有的原始手机都被淘汰了。也就是说，iPhone6/7/8已经成为我们的设计标准，它的切图是@2x，而iPhonePlus（1242×2208）使用的是@3x。从此，没有@1x双图，只有一个假设的概念。△iPhone6/7/8（自2014年起）△iPhonePlus（自2014年起）iPhoneX相关产品：iPhoneX（第11代）。这四款手机都是苹果的全面屏手机。全面屏并不是一个新概念，因为从第一代iPhone开始，手机行业就一直在思考如何让手机全面屏。但这项技术存在很多问题，比如如何处理前置摄像头和听筒。那么苹果采用的解决方案就是“齐刘海”，就是把四周处理成圆角。iPhoneX及以下三款全面屏机型需要注意刘海。由于需要避开摄像头和麦克风接收器，所以导航条高于其他iPhone系列产品；底部的Tabbar也因为底部的圆角而高于其他iPhone系列。并且这两个边界不应放置任何操作功能。也就是说，它仅供观赏。iPhoneX的物理像素为1125x2436px，而逻辑像素为375x812pt。也就是说，如果你使用Sketch或者AdobeXD等工具来设计界面，iPhoneX的宽度和iPhone6/7/8一样；它只是更高。所以如果你需要一组iPhoneX效果图，只需要将头部和尾部换成新版即可。而如果用Photoshop来设计界面，宽度变化还是比较大的。需要进行放大并单独调整那些混乱的尺寸。△iPhoneX(2017)iPhoneXSMax相关产品：iPhoneXS、iPhoneXSMax、iPhoneXR（第12代）。这三款产品的像素分辨率听起来有点晕：iPhoneXSMax:1242x2688pxiPhoneXS:1125x2436pxiPhoneXR:828x1792px但是如果我们看点的单位，我们会得到：iPhoneXSMax:414x896pt(iPhonePlus分辨率宽度)iPhoneXS:375×812pt(iPhone6/7/8分辨率宽度)iPhoneXR:414x896pt(iPhonePlus分辨率宽度)所以其实今年发布的所有iPhone都是更多友好的。如果使用矢量界面工具，只需要调整设计稿的头尾即可。如果使用Photoshop，设计师需要将设计稿放大缩小，然后调整头尾，才能得到新版的设计稿。事实上，切图和之前并没有什么变化。无论使用什么工具设计，都可以获得两组切图：@2x（750x1334px），@3x（1242x2208px）。△iPhoneXSMax(2018)基于iPhone6/7/8设计。在开始比赛之前，由于iPhone6、iPhone6S、iPhone7、iPhone7S、iPhone8的屏幕和分辨率都是一样的750X1334px，我们可以称之为iPhone6/7/8。而iPhone6Plus、iPhone7Plus、iPhone8Plus，屏幕和分辨率都是1242×2208，所以我们可以称之为iPhonePlus。iPhoneXS和iPhoneX的屏幕和分辨率都是一样的1125×2436，所以我们可以称之为iPhoneX。这场比赛的赢家无疑是价格美丽的iPhone6/7/8。那么我们在设计界面的时候需要按照iPhone6/7/8来设计。如果您使用Photoshop，请创建大小为750x1334px的画布，如果您使用Sketch或Adob??eXD等工具，请创建大小为375x667pt的画布。当然，如果你要设计一个界面比如首页，它的界面很长，你可以设计一个很长的设计稿，比如750x8000px。△手机型号与像素的对应关系
