共计 3657 个字符，预计需要花费 10 分钟才能阅读完成。
要说逻辑像素和物理像素就要从苹果的产品开始，毕竟是苹果引入了 Retina。
- iPhone 4
相关产品：iPhone 4（四代）、iPhone 4s（五代）。
iPhone 4 于 2010 年 6 月 8 日发布。iPhone 4 延续了 iPhone 一代的多点触摸（Multi-touch）屏界面，并首次加入视网膜屏幕、前置摄像头、陀螺仪、后置闪光灯，相机像素提高至 500 万。对我们设计师最重要的就是加上了视网膜屏 Retina。
Retina
是苹果提出的标准，它的含义就是在应用场景的视距内让人无法看清单个像素。我们都知道如果你贴的够近，一般的屏幕上都会出现一格一格的像素矩阵。屏幕是由这些矩阵组成的。这种屏幕的问题就是稍微近一些我们就能看到那些网格和矩阵。
如果我们希望用户得到最好的体验，自然是让用户看不到格子，那怎么办？
答案就是：加大屏幕的密度。如果屏幕的密度到达一个指定的水平（当然也要取决于用户的视距，即用户与屏幕通常离多远），那么用户的眼睛就无法分辨出细小的像素颗粒了。
这种屏幕就被称为 Retina 屏，也叫视网膜屏。
这是用户体验的巨大进步，但是也是 UI 设计师的噩梦。
原先的设计稿统统需要放大才可以在 iPhone4 里显示得完美：比如原来我们一个界面的尺寸是 480x320px，现在因为屏幕密度增加了一倍，我们就需要设计 640x960px 才够用。在电脑上看这个尺寸要比手机大两倍！（当然啦，那时的电脑屏幕通常不是 Retina 屏）。而且 3GS 并没有完全被淘汰，那么如何让一个 APP 适配两个不同尺寸的手机呢？于是每个 APP 内预装了两套切图，一套 480x320px 尺寸，也就是一倍图（@1x）；一套 960x640px 尺寸，也就是二倍图（@2x）。这两套图像资源的命名完全一样，只是二倍图结尾需要加上 @2x 标记它是高清尺寸，比如 home_icon@2x.png。
△ iPhone 4 代产品（2010）
逻辑像素和物理像素
逻辑像素（logic point）：逻辑像素的单位是 PT，它是按照内容的尺寸计算的单位。比如 iPhone 4 的逻辑像素是 480x320pt。但是由于每个逻辑的点因为视网膜屏密度增加了一倍，即 1pt=2px，那么其实 iPhone 4 的物理像素是 960x640px。iOS 开发工程师和使用 Sketch 和 AdobeXD 软件设计界面的设计师使用的单位都是 PT。
物理像素的单位就是我们常说的 pixel，简写成 PX。它是我们在 Photoshop 和切图中使用的单位，屏幕设计中最小的单位就是 1px 不可再分割。使用 Photoshop 设计移动端界面和网站的设计师使用的单位是 PX。在以下的文章中，如果您使 用 Photoshop 设计界面，那么只需要记住所有 px 单位的数值和支持 Photoshop 的工具，如果使用 Sketch 或 Adobe XD 设计界面，那么只需要记住所有 pt 单位的数值和对应的工具即可。
△ 逻辑像素和实际像素计算方式不同
PPI
PPI（pixels per inch）指的是屏幕分辨率的单位，表示的是每英寸显示的像素密度。屏幕的 PPI 值越高，那么这个屏幕每英寸能容纳的像素颗粒也就越多，那这个产品的画面的细节度也就越丰富。PPI 值大于 300 一般我们就无法用肉眼察觉出屏幕上的「马赛克」格子了。但是如果屏幕很大，那么需要呈现视网膜屏的 PPI 值也需要更大，所以 iPhone Plus 系列的 PPI 值比 iPhone6/7/ 8 要大。PPI 在我们设计的工作中其实关系不大，但理解它对于帮助我们理解为什么 iPhone4 比 iPhone3GS 实际像素大一倍有帮助。
△ PPI 的计算公式
- iPhone 5
相关产品：iPhone 5（六代）、iPhone 5s 和 iPhone 5c（七代）
iPhone 5 于 2012 年 9 月 13 日正式发布。iPhone5 在设计上带来了很多争议，因为 iPhone5 没有采用乔布斯认为人类最合适的手机尺寸 3.5 英寸屏，而是用了 4 英寸的屏幕。宽度没变而高度加长了。这样做的原因是市场上越大的手机越受欢迎。当时设计师也几近崩溃，因为又要搞适配了。原来 960x640px 的尺寸变为了 1136x640px，但是这个变化其实不大，就是高了点儿。于是 @2x 高清图的设计稿就变成了 640x1136px。因为 iPhone4 的手机看着也就是长了点儿，滑动不就完了嘛。除了闪屏这样的界面需要单独做 iPhone4、iPhone5、3GS 尺寸之外，其他界面仍然维持两套设计稿即可。
△ iPhone 5（2012）
- iPhone 6/7/8 和 iPhone Plus
相关产品：iPhone6 和 iPhone6 Plus（八代）、iPhone 6s 和 iPhone 6s Plus（九代）、iPhone7 和 iPhone7 Plus（十代）、iPhone8 和 iPhone8 Plus（十一代）。
这个产品迭代周期值得大家留意，从 iPhone6 到 iPhone8 这段时间苹果新手机的物理像素都是 750x1334px。而所有 Plus 手机的物理像素都是 1242x2208px。如果按照逻辑像素来计算，那么 iPhone6/7/ 8 的逻辑像素就是 375 x 667 pt（就是 750×1334 除以 2）；而 iPhone Plus 的逻辑像素就是 414 x 736 pt（就是 1242×2208 除以 3，因为这个屏幕太大了视距不同所以屏幕密度更高）。历史到这个时候，原来的手机全部被淘汰了。也就是说 iPhone6/7/ 8 成为了我们的设计标准，它的切图就是 @2x，iPhone Plus（1242×2208）使用 @3x。从此没有 @1x 倍图了，只存在一个假想的概念。
△ iPhone 6/7/8 (自 2014)
△ iPhone Plus (自 2014)
- iPhone X
相关产品：iPhone X（十一代）。
这四款手机全部是苹果的全面屏手机。全面屏并不是新概念了，因为从 iPhone 初代产品开始，手机业内就在构思如何把手机做成全部都是屏幕区域的技术了。但是这个技术有很多难题，比如前置摄像头和听筒怎么处理。那么苹果采用的方案是「齐刘海」，把四周处理成圆角的方式。IPhone X 和后续三款全面屏我们设计师需要注意的就是齐刘海。因为需要规避摄像头和麦克风听筒，所以导航栏比其他 iPhone 系列产品要高；而底部 Tab 栏因为最下方有圆角同样比其他 iPhone 系列要高。而且这两个边界是不应该放置任何操作功能的。也就是说只有看的份儿。
iPhone X 的物理像素是 1125 x 2436 px，而逻辑像素是 375 x 812 pt。也就是说如果你使用 Sketch 或者 Adobe XD 等工具设计界面的话，iPhone X 的宽度和 iPhone 6/7/ 8 是相同的；只是高了一些。那么如果需要出一套 iPhone X 效果图只需要把头和尾巴替换成新版即可。而如果你用 Photoshop 设计界面的话，宽度变化还是比较大的。需要做放大处理然后单独调整那些乱了的尺寸。
△ iPhone X(2017)
- iPhone XS Max
相关产品：iPhone XS、iPhone XS Max、iPhone XR（十二代）。
这三款产品的像素分辨率听上去会比较眼晕：
iPhone XS Max：1242 x 2688 px
iPhone XS：1125 x 2436 px
iPhone XR：828 x 1792 px
但是如果我们用点的单位看就会得到：
iPhone XS Max：414 x 896 pt（iPhone Plus 分辨率宽度）
iPhone XS：375×812 pt（iPhone 6/7/ 8 分辨率宽度）
iPhone XR：414 x 896 pt（iPhone Plus 分辨率宽度）
所以其实今年发布的 iPhone 都是比较友好的，如果使用矢量界面工具那么只需要调整设计稿头和尾巴即可，如果使用 Photoshop 的设计师需要放大缩小设计稿然后调整头和尾巴可以得到新版设计稿。而切图其实和之前没有变化，不管用什么工具设计还是得出两套切图：@2x（750x1334px）、@3x（1242x2208px）即可。
△ iPhone XS Max (2018)
以 iPhone6/7/ 8 为基准设计
在开始比赛之前，由于 iPhone 6、iPhone 6S、iPhone7、iPhone7S、iPhone8 屏幕和分辨率都是一致的 750X1334px，所以我们可以称它们为 iPhone6/7/8。而 iPhone 6 Plus、iPhone7 Plus、iPhone8 Plus、屏幕和分辨率都是一致的 1242×2208，所以我们可以称它们为 iPhone Plus。而 iPhone XS、iPhone X 屏幕和分辨率都是一致的 1125×2436，所以我们可以称它们为 iPhoneX。那这场比赛的赢家毫无疑问是价格美丽的 iPhone6/7/8 获胜啦。那么我们做界面设计时需要按照 iPhone6/7/ 8 为基准设计。如果使用 Photoshop 就建 750x1334px 尺寸的画布，如果是使用 Sketch 或 Adobe XD 等工具就建立 375x667pt。当然如果要设计首页之类的界面，它的界面很长你可以设计一个长的设计稿，比如 750x8000px。
△ 手机型号与像素对应图
