給Apple洗洗白——為何iPhone plus系列解析度讓設計師蛋疼？
相信做過iOS端從iPhone678到plus系列適配的小夥伴們，心裡都應該有過這個疑問：
為什麼Apple這麼操蛋，做個手機搞這麼多解析度，而且還不是倍數關係，完全不顧及設計開發的麻煩，這不是成心跟設計師和開發過不去嗎？
難道解析度不同也能提高iPhone的逼格嗎？
小U君當初也是對Apple這樣的設定「懷恨在心」，認為Apple沒事找事，可能他們的設計師閑的蛋疼，所以讓我們一起蛋疼。
但好奇的小U君放下了加班適配的憤怒，去了解了下背後的故事。才發現Apple也有苦衷，而且更讓你不敢信的是，這樣做的目的，竟是為了方便設計和開發！（我勒個去）
這裡我們先來重溫下iPhone解析度，著重看下iPhone6/7/8及其plus系列的：
▲歷代iPhone解析度一覽
看到沒，是不是一看就來氣！明明iPhone6/7/8還是375pt，甚至連後面的iPhoneX也是好端端的375pt，只不過屏幕密度係數不同罷了，中間卻擠著一群格格不入的414pt的plus系列。
明明適配乘以或除以1.5就完事兒了，現在還得另外改尺寸，不說了，天要亮了。
不過且聽小U君來給你慢慢解釋，說不定聽完你會好受點，因為Apple已經很為我們設計師著想了。
要想弄清其中的原因，得先從上圖中左邊圈中的2個名詞講起。
- Rendered Pixels直譯過來是渲染像素。
- Physical Pixels則是物理像素，不過像素換成解析度可能更好理解啦。
▲iP6+的渲染和物理像素不同
仔細一看，只有plus系列的渲染解析度和物理解析度不同，而其他的iPhone渲染解析度和物理解析度都是一致的。
物理像素是事先定好的，和其他物理尺寸一樣，比如iPhone6+是一塊5.5英寸Retina HD高清顯示屏，1920×1080px解析度，401ppi，機身三圍：158.1mm×77.8mm×7.1mm，重量：172g。
這些參數都是沒得商量的。所以作為設計師的我們，其實要討論的是可變的渲染解析度。
我們不妨先來試試，若按照常規最方便開發的@2x或@3x密度來設計plus系列，會出現什麼問題。
1.plus繼續採用@2x密度解析度
▲歷代iPhone ppi數值
上圖可看出，iPhone6/7/8和plus系列的ppi分別是326和401。ppi即pixels per inch，像素每英寸。假設同一張圖，放在iPhone6和iPhone6+（此後均簡寫為iP6、iP6+）上。
由於是同一張圖，所以像素尺寸一樣，而iP6+的ppi大於ip6，所以圖在iP6+上的實際長度尺寸要小於iP6！這就意味著，同樣的圖像或文字，在大屏的iP6+上反而縮小了，更看不清楚了，這怎麼能行呢！
▲同樣的圖在iP6+上卻縮小了
2.plus採用@3x密度解析度
採用@3x密度屏的話，還是放同一張圖（這裡為了方便計算，設置這張圖@2x下為44x44px）到iP6和iP6+里。當然@3x的話圖在iP6+里就變成66x66px啦，這樣一看確實圖片得到了擴大，但是新的問題又來了。
我們來算下這張圖占整個屏幕的比例：
- iP6是44px/750px≈0.053
- iP6+是66px/1080px≈0.056
也就是說，同樣內容佔iP6+屏幕的比例要大，也就是說，最終一個大屏手機所顯示的內容反而沒有小屏的多，那我要這大屏有何用！
▲屏幕大了內容反而少了
3.Apple的最終解決方案
所以，傳統的@2x和@3x密度都不適合plus系列屏幕，而真正合理的值在2和3之間，是@2.46x。但是這個值對於我們設計和開發來講，太不友好了，一想到一大堆、一串串的小數就頭皮發麻。
於是Apple想了一個神奇的解決方案。屏幕還是採用@3x的，也就是說我們用1倍密度設計後乘以3就行了（或2倍密度乘以1.5），但設計解析度設為1242x2208px，而不是物理解析度的1080x1920px，iOS在拿到我們設計的尺寸後，會自動縮放到1080x1920px的物理屏幕上顯示。
其實看得出來，這樣也並沒有達到顯示最佳的@2.46x，而是一個@2.62x密度值。屏幕所顯示的圖像也比我們設計原圖要小約13%（若你實在想要以原始設計尺寸顯示，設置里「放大顯示」了解一下）。
但由於iP6+Retina屏的超高401ppi，這一點點改變往往可以被忽略。
▲iP6+放大模式
所以說到底，Apple之所以另起一條解析度路線，竟是為了方便我們設計師和開發。啊，Apple，我錯怪你啦！
經小U君一頓講解，小夥伴們是否也體會到了Apple的良苦用心呢？
這是小U君在U L0VE I的處女文，今後也將不斷分享小U君的設計經歷和一些設計思考。
小夥伴們有任何建議或問題，歡迎在下面留言，小U君會認真回復的！另外，別忘了把小U君分享給更多的朋友哦，謝謝~
本文由微信公眾號【U L0VE I】原創首發，轉載請聯繫授權
