2020-12-10 前端達(dá)人
距離iPhone 12系列發(fā)售已經(jīng)有段時間。
之所以沒第一時間撰文，是因為 iPhone 12 mini 和 iPhone 12 Pro Max 要在11月13日才正式發(fā)售。
而在此之前，即便是Apple線下店也沒有樣機。
保險起見，我等接觸到 Mini 和 Max 真機后，開始著手撰文。
一周前完成了文字部分，本周終于完成了幾十張配圖，這才和大家見面。
為了方便新同學(xué)更好的了解本文內(nèi)容，我會簡單提及一些關(guān)于適配的必要信息。
并附上往期內(nèi)容的鏈接，方便延展翻閱。
本文約3200字，分以下六個部分：
在網(wǎng)絡(luò)上搜索手機界面適配的相關(guān)內(nèi)容。常會看到文中提及以下幾個參數(shù)：比如屏幕分辨率（物理分辨率）、屏幕尺寸、PPI數(shù)值…
其實，在處理常見手機界面適配時，設(shè)計師只要關(guān)注以下3個基本參數(shù)：渲染像素（Pixel）、邏輯像素（Point）、 倍率（Scale）
渲染像素（Pixel）可以理解為是手機截屏?xí)r所得到的圖片尺寸，單位是px；
邏輯像素（Point）可以理解為是程序員在用代碼繪制頁面時所用的尺寸，也被叫做“1倍圖尺寸”。比如Sketch中對應(yīng)的機型尺寸
對應(yīng)的就是手機的邏輯像素尺寸。
倍率（Scale）因為邏輯像素和渲染像素存在著一定的比例關(guān)系，這種比例通常被稱為倍率，比如切圖后綴的@2x、@3x對應(yīng)的就是倍率的數(shù)值。
值得一提的是，倍率不一定是整數(shù)，比如三星GALAXY J2（540×960），倍率是@1.5x；
華為M3 Life 8.0”（1920×1200）的倍率則是@2.25x
適配方式主要有兩種：
1. 倍率適配
主要應(yīng)用在邏輯像素相同，但倍率不同的設(shè)備。
比如iPhone 11適配到 iPhone 11 Pro Max
兩個適配的邏輯像素都是 414 x 896pt，但倍率不同，前者是@2x、后者是@3x。
2. 邏輯像素適配
這種適配方式應(yīng)用在兩個倍率相同，但邏輯像素不同的設(shè)備，
比如iPhone 11 到iPhone 8：
兩個設(shè)備的倍率都是@2x，邏輯像素則分別是：414 x 896pt 和 375 x 667pt。
如果兩個設(shè)備的倍率和邏輯像素都不相同，比如iPhone 8 到 iPhone 11 Pro Max
那通常會先進行邏輯像素適配，再進行倍率適配。
由于倍率適配相對簡單，只需要考慮分割線和切圖這兩個因素。
因此，設(shè)計師通常說的手機適配、尺寸適配常指邏輯像素適配。
所以搞清楚iPhone有哪幾種邏輯像素，就成了iPhone適配和驗收的關(guān)鍵。
在今年10月份發(fā)布的iPhone 12系列共有四部機型。
在談新設(shè)備前，我們先簡單回顧截止iPhone 11系列時，iPhone的幾款主流機型及其對應(yīng)的參數(shù)：
通過圖表可知，在iPhone 12發(fā)布前，市面上的iPhone共有6種不同的分辨率需要完成適配。
那么iPhone 12又帶來哪些變化呢？
從官方給出的屏幕數(shù)據(jù)可知，四款設(shè)備的物理像素如下：
由圖可知，今年iPhone共新增了3種全新的屏幕尺寸。（其中iPhone 12和iPhone 12 Pro的物理分辨率相同，故合并看待）
但在設(shè)計層面，iPhone 12系列四款手機，只為設(shè)計師增加了1170×2532、1284×2778 兩種新的設(shè)計尺寸。
畫重點：目前有一些文章，錯把iPhone 12 mini的屏幕參數(shù)1080×2340當(dāng)做最終的繪圖尺寸，認(rèn)為12 mini的邏輯像素為360x780pt 。
事實上iPhone 12 mini采用了iPhone X一樣的渲染像素，即1125 x 2436px，對應(yīng)的邏輯像素是375x812pt。
為了解釋這個問題，得從大家比較熟悉的iPhone Plus系列手機說起。
在前文提到，手機界面適配時，設(shè)計師只要關(guān)注：渲染像素（Pixel）、邏輯像素（Point） 以及倍率（Scale）這三個基本參數(shù)。
而其中的渲染像素通常會和屏幕的物理像素保持一致，比如常見iPhone 8、iPhone XS、iPhone 11 Pro都是如此。
這也導(dǎo)致大家很容易把物理像素和渲染像素混為一談。
但既然說了是“通常會保持一致”，就總會有例外。
比如iPhone Plus系列，官方給出的屏幕參數(shù)（物理像素）是1080×1920，但渲染像素卻是1242×2208。
所以設(shè)計師在針對Plus系列做圖的時候，就得按照1242×2208進行輸出。
而新款iPhone 12 mini的情況和Plus系列一樣：
官方給出的物理像素尺寸是1080×2340 ，但拿到設(shè)備真機后，通過測量可知12 mini采用的渲染像素是1125×2436，這和iPhone X的渲染像素保持一致。
在明確這一點后，我們再看下iPhone 12系列設(shè)備的參數(shù)：
如果我們只看邏輯像素，加上iPhone 12系列，目前iPhone 共有7種尺寸。
這些尺寸都需要設(shè)計師留心，并完成相關(guān)機型的驗收走查。
不過，到這里還沒完?？紤]到iPhone存在“標(biāo)準(zhǔn)”和“放大”兩種模式的視圖。
還需要將放大模式的尺寸考慮在內(nèi)。
目前各個設(shè)備的放大模式對應(yīng)的適配三要素分別如下：
其中320x693pt是全新的尺寸，出現(xiàn)在12 mini、12、12 Pro這三款設(shè)備中。
由此，在把放大模式納入適配考量范圍后，iPhone的邏輯像素共統(tǒng)計出8種尺寸。
如果將其中最小尺寸和最大尺寸比較寬高的話，寬度相差了108pt、高度相差了358pt
對于那些橫滑需要外露一部分的頁面，需要重新設(shè)計尺寸或調(diào)整局部的適配方案。
這對于一些單屏顯示的頁面而言，也是件麻煩事。
先思考一個問題，在下面幾個尺寸的iPhone中，你覺得哪一種尺寸的iPhone在市面上占比最高？
在 iPhone 12發(fā)布之前，在iPhone這幾種屏幕尺寸中，你覺得哪一種iPhone的市場占有率最大？
我相信絕大多數(shù)設(shè)計師，都會下意識覺得750×1334這個尺寸的機型占比最多。畢竟在過去很多年里，大家都是用這個尺寸在做圖。
那實際情況究竟如何呢？
我們先看下阿里友盟今年05月01日的數(shù)據(jù)：
PS：數(shù)據(jù)公司按設(shè)備的物理分辨率進行統(tǒng)計，而非渲染像素。所以這里的1920×1080對應(yīng)的是Plus系列手機。
今年五月，國內(nèi)iPhone占比最高的機型是Plus系列。而設(shè)計師鐘愛的750×1334 和 1125×2436分別排在第二和第三。
其中排在第三的1125×2436（對應(yīng)@2x的設(shè)計尺寸是750×1624）和前兩者的占比仍有較大的差距。
那是不是隨著時間的推移，1125×2436的機型占比會逐漸增大，并逐漸占據(jù)第一呢？
如果你也有同樣的想法，恐怕又得失望了。
翻看5月份的iPhone增量數(shù)據(jù)，會發(fā)現(xiàn)一個有意思的情況：
在增量中，828×1792（對應(yīng)iPhone 11）增速以51.9%遙遙領(lǐng)先第二名的1125×2436。
下面，看下的11月統(tǒng)計的iPhone存量數(shù)據(jù)：
828×1792已經(jīng)從占比第四名上升到了第三名，
再看11月份的增量數(shù)據(jù)：
828×1792的增速不減反增，從5月份的51.9%增加到了最近的63.8%
如果不考慮的iPhone 12系列，828×1792有望接替Plus系列，成為市場占比最大的iPhone尺寸。
在828×1792的設(shè)備飛速增長的同時，1125×2436這個尺寸的設(shè)備增速卻在不斷下降。已經(jīng)從5月份的27.8%降到了現(xiàn)在的10.2%
過去設(shè)計師常用的設(shè)計師尺寸是750×1334，但隨著iPhone進入全面屏?xí)r代，如果再把750×1334作為設(shè)計的基準(zhǔn)尺寸顯然已經(jīng)不合時宜。
而目前常用的750×1624尺寸對應(yīng)的機型（對應(yīng)1125×2436在@2x下的尺寸）無論在存量市場中的占比，還是增量市場中的占比都少的可憐。
而新發(fā)售的iPhone 12系列中，也只有12 mini采用了1125×2436作為渲染像素的尺寸。而其余三款，采用全新的渲染像素和邏輯像素。
很難想象1125×2436這個尺寸的設(shè)備，還能和過去的750×1334尺寸一樣，成為iPhone主流的分辨率尺寸……
設(shè)計基準(zhǔn)尺寸的選擇，除了要看設(shè)備的占有率，還要兼顧適配的成本。比如，當(dāng)有大中小三種尺寸的設(shè)備需要設(shè)計時，優(yōu)選中間尺寸作為基準(zhǔn)尺寸。
以中間尺寸為基準(zhǔn)，無論是適配到小尺寸、還是適配到大尺寸，界面的調(diào)整幅度都是最小的，偏差不會太大。
反之，如果選擇小或大作為基準(zhǔn)，或許頁面適配到中間尺寸時感覺還行，但適配到另一側(cè)相對極端的尺寸時，則容易出問題。
界面設(shè)計師所用的繪圖基準(zhǔn)尺寸并非一成不變?；乜催^去：
設(shè)計師用的基準(zhǔn)尺寸已經(jīng)從最初的640×960、變成640×1136、再到750×1334，以及現(xiàn)在的750×1624，已經(jīng)變化了4次。設(shè)計師幾乎每隔兩年就會隨著新iPhone的發(fā)布調(diào)整一次設(shè)計尺寸。如今隨著iPhone 12的發(fā)布，加上750×1624對應(yīng)機型在市場中占比的低迷，我們可以重新思考在iPhone眾多尺寸中，哪一款更適合作為設(shè)計的基準(zhǔn)尺寸。
這里先不考慮設(shè)計師對尺寸的慣性依賴，只思考適配兼容性和市場占有率這兩方面。適配兼容性，按照“大中小”優(yōu)選中間尺寸這一原則。我們可以很容易的在目前8種iPhone的尺寸（指邏輯像素）中選出位于中間的尺寸：
分別是 375x812pt 以及390x844pt，前者對應(yīng)1125x2436px ，后者則對應(yīng)1170x2532px，如果進一步將其轉(zhuǎn)換成大家熟悉的@2x尺寸，則分別對應(yīng)：750×1624和780×1688
在市場占有率層面，隨著Apple逐漸停售之前的設(shè)備，新款iPhone的分辨率占領(lǐng)市場只是時間問題。而在新設(shè)備中，只有iPhone 12 mini這一款設(shè)備采用大家熟悉的1125x2436px（375x812pt，對應(yīng)@2x下尺寸750x1624px）。如果按照此前的經(jīng)驗推算，iPhone 12（1170×2532）接替iPhone 11（828×1792）成為最熱賣且占比最高的設(shè)備只是時間問題。
截止iPhone 12發(fā)布為止，顯然 390x844pt （對應(yīng)@2x下尺寸780x1688px）更適合作為今后的設(shè)計基準(zhǔn)尺寸。
轉(zhuǎn)自：優(yōu)設(shè)網(wǎng)
藍(lán)藍(lán)設(shè)計( www.skdbbs.com )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標(biāo)定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)
藍(lán)藍(lán)設(shè)計的小編 http://www.skdbbs.com