摘要：要說邏輯像素和物理像素就要從蘋果的產品開始，畢竟是蘋果引入了。但是由于每個邏輯的點因為視網膜屏密度增加了一倍，即，那么其實的物理像素是。邏輯像素和實際像素計算方式不同指的是屏幕分辨率的單位，表示的是每英寸顯示的像素密度。

要說邏輯像素和物理像素就要從蘋果的產品開始，畢竟是蘋果引入了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。

△ 手機型號與像素對應圖