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