2022-6-13 博博
距離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
那通常會先進(jìn)行邏輯像素適配,再進(jìn)行倍率適配。
由于倍率適配相對簡單,只需要考慮分割線和切圖這兩個因素。
因此,設(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進(jìn)行輸出。
而新款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è)備的物理分辨率進(jìn)行統(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進(jìn)入全面屏?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,如果進(jìn)一步將其轉(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)
分享此文一切功德,皆悉回向給文章原作者及眾讀者.
免責(zé)聲明:藍(lán)藍(lán)設(shè)計尊重原作者,文章的版權(quán)歸原作者。如涉及版權(quán)問題,請及時與我們?nèi)〉寐?lián)系,我們立即更正或刪除。
藍(lán)藍(lán)設(shè)計( m.820esy.cn )是一家專注而深入的界面設(shè)計公司,為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標(biāo)定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)、UI設(shè)計公司、界面設(shè)計公司、UI設(shè)計服務(wù)公司、數(shù)據(jù)可視化設(shè)計公司、UI交互設(shè)計公司、高端網(wǎng)站設(shè)計公司、UI咨詢、用戶體驗公司、軟件界面設(shè)計公司