?說明：本文主要從UI設(shè)計師角度，試圖回答在移動產(chǎn)品UI設(shè)計過程中會遇到的以下問題：

1、如何理解「像素密度」和「邏輯像素」兩個概念？

2、面對琳瑯滿目的手機型號和屏幕大小，應(yīng)該選擇何種倍率和尺寸進行作圖？

3、基準設(shè)計稿完成后，如何進行屏幕適配？?

——1·像素密度：界面清晰度——

說明：本章涉及的概念有：屏幕尺寸、PPI、DPI、物理像素。

（一）像素密度：清晰度的表征

諾曼在《情感化設(shè)計》一書中提到愉悅感的四大類，其中第一類是：生理的愉悅，也就是本能的感官體驗。畫質(zhì)的清晰、細膩、逼真是視覺感官體驗的一部分。而畫質(zhì)是由屏幕性質(zhì)決定的。

當(dāng)前市場手機型號眾多，如何判斷不同屏幕清晰度質(zhì)量的好壞？這里，我們需要引入一個重要概念。

我們知道，屏幕是由很多像素點組成的，每個點發(fā)出不同顏色的光，構(gòu)成我們看到的畫面。當(dāng)我們眼睛的視桿細胞和視錐細胞接收到的光線越多，我們感知到的畫面就會越豐富。而如果需要光線多，就需要保證像素點夠多。

我們在計算「人口密度」時，會抓出一平方公里的地區(qū)，看里面塞了多少人，據(jù)此，判斷人口的密集程度。同理，我們可以抓出一英寸的界面，看里面塞了多少個像素點，判斷像素的密集程度，這就是「像素密度」。

（二）「像素密度」如何計算？

前面提到，「像素密度」表示一英寸界面中的像素點數(shù)，所以它跟兩個參數(shù)有關(guān)：界面尺寸 和 像素。

一般手機的出廠配置信息中都標有「屏幕尺寸」，指的是屏幕的對角線長度，單位是inch（1英寸=2.54厘米，大約是食指最末端那根指節(jié)的長度）。設(shè)備長、寬的實際長度，即「物理尺寸」，用勾股定理計算可得屏幕尺寸。

我們也可以查到設(shè)備的分辨率，即在橫縱切上的像素點數(shù)，也叫「物理像素」，單位是px。

拿到這兩個參數(shù)，就可以計算出「像素密度」。

還有一種計算方法，是先算出「物理像素」的平方和，再開根號，最后除以「屏幕尺寸」。

從計算方法可以看出，像素密度就是pixels per inch，簡稱：PPI。

值得注意的是，在Android系統(tǒng)中，除了像素密度PPI，還有一個DPI，也是「像素密度」，全名為：Dots per inch，兩者的區(qū)別是：

PPI：表示物理像素密度，是客觀存在不會改變的。

DPI：表示軟件像素密度，是軟件參考了ppi后，人為指定的一個固定值，寫在系統(tǒng)出廠配置文件上，保證在某一個區(qū)間的ppi在軟件上使用同一個值，它是安卓特有的。

所以，可能有幾款安卓手機的PPI不同，但是DPI相同。比如，有3款相同分辨率不同尺寸手機的ppi可能分別是430,440,450，那么在Android系統(tǒng)中，可能dpi會全部指定為480，以保證相同分辨率手機的表現(xiàn)一致。

蘋果手機型號有限，所以沒有DPI的概念，全部用PPI表示。

（三）像素密度有什么用？

「像素密度」是連接數(shù)字世界和物理世界的橋梁。它是設(shè)備的固有屬性，反映了屏幕呈現(xiàn)影像細節(jié)的能力。像素密度越高，屏幕顯示的密度越高，擬真度就越好。Retina屏比普通屏清晰，就是因為它的像素密度翻了一倍。

我們可以根據(jù)「像素密度」判斷屏幕顯示質(zhì)量的好壞。iPhone 3gs和iPhone 4物理尺寸相同，但是后者的ppi為326，是前者163的兩倍，分辨率也是兩倍的關(guān)系，說明4的呈像能力更佳。同時也可以看出，手機屏幕的物理尺寸和像素尺寸是不成比例的。

總之：只要兩款手機的「像素密度」相同，它們的顯示「精細程度」就是相同的。?

——2·邏輯像素：空間容納度——

說明：本章涉及的概念有：邏輯像素、倍率、邏輯像素密度。

（一）違背常識的顯示效果

假如我們在界面A（1英寸，4x4 px）上放一個1×1像素的紅方格，然后把它移動到同樣尺寸、2倍像素密度的界面B（1英寸，8x8 px）上，如下圖所示。

在界面B上，紅方格還是涵蓋了1×1像素，但是實際的物理尺寸卻變小了。這是不符合一般人的常識的，為什么同一個內(nèi)容在同樣尺寸的界面上顯示不一樣？

如何解決這個問題？我們可以試著分析一下：

對比界面A和B，B的「像素密度」更大，「界面-物理像素」也更大。

紅方格在移動過程中，方格的「物理像素」不變，方格的「物理尺寸」變小。

以上因素中，「物理尺寸」是我們唯一肉眼可以觀察到的屬性。我們的目標是讓紅方格的變化過程符合常識，也就是保持紅方格的「物理尺寸」不變。根據(jù)「像素密度」的計算公式，紅方格物理尺寸一定時，當(dāng)像素密度變成2倍，在界面B中的紅方格的物理像素就必須變成原來的2倍。

物理尺寸一樣，紅方格在界面A和界面B中顯示的內(nèi)容物的多少就是一樣的。為了標記這種“不同分辨率界面呈現(xiàn)同樣多內(nèi)容顯示效果”的能力，我們引入一個抽象概念，它就是「邏輯像素」。我們約定把界面A的物理像素作為基準，界面B可用對應(yīng)的像素乘以倍數(shù)得出，A和B的顯示范圍是一樣的。這個基準就是邏輯像素。

現(xiàn)在，我們再次把紅方格，從界面A移到界面B，因為界面B的像素密度是界面A的2倍，為了紅方格在兩個界面中肉眼可見的大小排版一致，根據(jù)公式，紅方格在界面B中占據(jù)的物理像素是界面A中的2倍，如下圖所示：

（二）邏輯像素的單位

邏輯像素作為一組基準手機的分辨率尺寸，為了表達方便，需要有統(tǒng)一的單位。

由于iOS和Android的開發(fā)工具不同，邏輯像素在兩個平臺的單位名稱也不同，iOS是pt, Android是dp, 設(shè)計師可以簡單理解為：pt=dp

iOS 的 pt ：point 表示點 。

Android 的 dp ：Density-independent Pixels，指密度無關(guān)像素。

計量單位決定了我們的思考方式。在設(shè)計和開發(fā)過程中，應(yīng)該盡量使用邏輯像素尺寸來思考界面。

「邏輯分辨率」就是用邏輯像素描述屏幕的分辨率；「邏輯像素密度」是用“屏幕像素密度”相對于“基準屏幕密度”的倍數(shù)表示，即相對密度。

假設(shè)「邏輯像素密度」為n，那么 1 pt = 1 dp = n px。具體單位之間的換算關(guān)系隨倍率變化：

@1×倍：1pt=1dp=1px

@1.5×倍：1pt=1dp=1.5px

@2×倍：1pt=1dp=2px

@3×倍：1pt=1dp=3px

@4×倍：1pt=1dp=4px

可以把「邏輯像素」和「物理尺寸】相關(guān)聯(lián)，在分辨率較低的手機中，可能1pt=1px,而在分辨率較高的手機中，可能1pt=2px，這樣的話，一個108*108pt的控件，在不同的手機中就能表現(xiàn)出肉眼觀看的差不多的大小，只是分辨率高的展示的更加清楚。如下圖所示。

知道了邏輯像素和單位，實際「物理像素」的計算公式：

iOS的分辨率：px=pt * 倍率.（其中pt是邏輯像素尺寸，iOS常用倍率為@2×，@3×）

Android的分辨率：px=dp * (dpi / 160). ? ?(其中dp是邏輯像素尺寸, dpi是邏輯像素密度，160是規(guī)定的@1×的基準邏輯像素密度)。

（三）邏輯像素的作用

「邏輯像素」是人為約定的，會影響屏幕顯示內(nèi)容的多寡，與影響清晰度的「像素密度」無關(guān)。

物理分辨率：硬件所支持的。

邏輯分辨率：軟件可達到的。

當(dāng)兩個設(shè)備邏輯像素一致，顯示容量就一樣；當(dāng)邏輯像素不一致時，尺寸大的那個顯示的內(nèi)容多。

比如，以iPhone 3gs 和iPhone 4 為例，兩者的物理尺寸一致，邏輯分辨率一致；物理分辨率3gs是320×480, 4是640×960，后者無論物理分辨率，還是像素密度都是前者的2倍。因為物理分辨率不同，4的硬件支持的呈像質(zhì)量更高；因為邏輯分辨率相同，兩者的軟件可達的容納物的多少是一致的。

再比如，有兩臺Android設(shè)備的屏幕尺寸為480x800px和720x1280px，它們分別屬于hdpi和xhdpi，除以各自倍率1.5倍和3倍，得到邏輯像素為320×533dp和360×640dp。很顯然，后者更寬更高，能顯示更多內(nèi)容。

邏輯分辨率的三大作用：

1、作為屏幕顯示內(nèi)容多少（也就是容積）的表征。邏輯像素尺寸大，顯示的內(nèi)容就多，和設(shè)備實際的分辨率尺寸、像素密度和倍率都無關(guān)。

2、保證控件在不同屏幕間切換符合人的常識和預(yù)期：屏幕顯示內(nèi)容的多少，和分辨率、像素密度無關(guān)，和屏幕的物理大小有關(guān)，這也符合人們的常識：屏幕越大，顯示內(nèi)容越多。

3、應(yīng)用于設(shè)計和開發(fā)：我們不需要關(guān)注屏幕的像素密度，只需要關(guān)心邏輯分辨率即可，方便設(shè)計溝通。?

——3·倍率尺寸：作圖的選擇——

說明：熟悉了概念，下面進入實操：UI設(shè)計作圖。

UI設(shè)計過程中，在我們決定采用哪一種手機屏幕的尺寸作圖前，應(yīng)該首先考慮選擇何種倍率呢。

因為正是「倍率」，把大大小小的屏幕拉回到了同一水平線，得以保證一套設(shè)計稿適應(yīng)各種屏幕。

另外，在為開發(fā)提供的設(shè)計資源圖片中，同一張圖通常有兩個，甚至三個尺寸。文件名有的帶@2x或@3x字樣，有的不帶。其中@2x,@3x就表示是倍率。不帶的用在普通屏上，帶的用在Retina屏上。只要圖片準備好，iOS或Android會自己判斷用哪張。

（一）選擇何種倍率作圖

我們可以直接選擇邏輯像素尺寸（也就是x1倍率）進行設(shè)計作圖。

但是，x1倍率的設(shè)備目前差不多已被淘汰。而我們通常會將做好的設(shè)計圖導(dǎo)入對應(yīng)設(shè)備查看效果，目前主流設(shè)備都采用x2、x3倍率，x1的設(shè)計圖放入主流設(shè)備查看效果必須進行放大，粗略的放大會導(dǎo)致失真，影響效果查看。所以x1倍率在最終查看效果圖時存在缺陷。

那x3倍率的怎么樣？

在與程序員溝通、設(shè)計切圖時，我們都會進行倍率之間的換算。x3切圖換算不方便；

另外，程序員拿到標注圖后，需要將其中的px轉(zhuǎn)換成pt進行開發(fā)。（1）情況1：x2倍率下，將列表高120px, 頭像高102px的標注轉(zhuǎn)換成邏輯像素后為：60pt,52pt，兩者是無法居中對齊的，會有1pt誤差，最終設(shè)備呈現(xiàn)效果就會有2px的像素偏移；（2）情況2：假如將x3倍率的100px轉(zhuǎn)換成邏輯像素，由于邏輯像素與物理像素一樣，必須取整數(shù)，程序員只可能在33pt和34pt之間選取一個數(shù)值。如果采用33pt，最終呈現(xiàn)在設(shè)備上的尺寸是99x99px, 有1px誤差；如果采用34pt，最終設(shè)備呈現(xiàn)的尺寸是102x103px, 有2px誤差。所以，為確保設(shè)計圖的落地效果，我們需要：

在x1倍率下，尺寸必須為 偶數(shù)；

在x2倍率下，尺寸必須為 4的倍數(shù)；

在x3倍率下，尺寸必須為 6的倍數(shù)。

可以看出，x3倍率的執(zhí)行難度最高。

通過以上，我們也可以排除“x3倍率”作為我們的作圖選擇。

因為x1倍率、x3倍率都存在明顯短板，常用倍率只剩下x2倍率。鑒于x2倍率各方面都比較均衡，所以：

選擇x2倍率作為我們的作圖尺寸。

（二）選擇哪種屏幕做設(shè)計

選定作圖倍率后，我們就可以選擇具體的作圖尺寸。?? ?

目前iPhone的主流機型在x2倍率下的尺寸有5種，如下圖：

其中，iPhone X 可以認為是iPhone 6 的加長版；iPhone XR 可以認為是iPhone 6P的加長版。如下圖：

所以這4種尺寸可以歸為2個類型：寬度為750和828的。

而Android系統(tǒng)邏輯像素已統(tǒng)一為360x640，x2倍率就是：720x1280.

最后，總結(jié)出雙平臺@2x倍率，共計4種屏幕尺寸。

大屏?xí)r代，用小屏為設(shè)計基準顯然不合時宜。我們一般選擇中間尺寸為基準進行適配，因為從中間向上或向下適配，調(diào)整幅度最小。

中間尺寸有兩個分別是iOS和Android的，要選哪一個？

大多數(shù)設(shè)計師日常用的都是iPhone，對Android開發(fā)可能了解不夠；同時Android驗收不太受重視，設(shè)計師對Android的容錯率較高，這也導(dǎo)致Android端常常容易出問題。根據(jù)“哪里問題多，從哪里著手”的原則，可選擇以 720×1280 作為設(shè)計基準。

但是選擇750×1334也沒有毛病，很多比較傾向于iOS設(shè)計。兩者都可以“一稿適配雙平臺”。

當(dāng)然，很多團隊都是同時出iOS和Android兩套設(shè)計稿，那就可以：

同時把 750×1334 px 和 720×1280 px 作為設(shè)計基準。

（三）作圖尺寸對設(shè)計規(guī)范的影響

為了發(fā)現(xiàn)作圖尺寸和設(shè)計規(guī)范之間的關(guān)系，我們對比不同倍率的屏幕控件尺寸：

發(fā)現(xiàn)：控件高度隨倍率等比放大/縮小。

（其中iPhone Xs Max只不過頂部狀態(tài)欄在原來的20pt基礎(chǔ)之上增加了24pt變?yōu)?4pt，底部增加34pt的主頁指示器。）

相同倍率，對比控件尺寸：

發(fā)現(xiàn)：相同倍率，控件大小不變。頁面尺寸變化，不會對控件大小產(chǎn)生影響。

綜上得出：控件大小只隨倍率變化，與實際作圖尺寸無關(guān)。也就是說：

作圖尺寸對設(shè)計規(guī)范沒有任何影響，設(shè)計規(guī)范就是組件規(guī)范。?

——4·屏幕適配：組件的調(diào)整——

說明：開始作圖后，我們開始考慮更多的細節(jié)問題。

（一）適配的概念

什么是適配？

就是讓同一套APP的UI設(shè)計，在不同尺寸分辨率比例的「移動終端設(shè)備」上都能正常顯示。為此需要根據(jù)不同機型對構(gòu)成界面的組件進行的一系列調(diào)整。

為什么要適配？為了在多樣性的設(shè)備環(huán)境中追求體驗的一致，保持理想的展示效果。適配只看3個參數(shù):

渲染像素——屏幕截圖的圖片尺寸，單位 px

邏輯像素——程序員開發(fā)所用尺寸，單位 pt

倍 ? ? ? 率——渲染像素/邏輯像素 得到的倍數(shù)關(guān)系，常見倍率有@2x、@3x。倍率決定切圖。

（二）常規(guī)適配方法

1、等比縮放

界面元素按照屏幕大小整體等比例縮放，一般是界面版式特殊，布局不能變化的情況。比如圖片墻、圖片列表。適配時，控件尺寸大小隨屏幕寬度變化自適應(yīng)。屏幕越寬，單屏顯示內(nèi)容越少。

注意：界面縮放過程中，要保證資源圖片在拉伸后的清晰度，避免降低產(chǎn)品品質(zhì)。

2、彈性控件

對局部控件做調(diào)整，進行縮放或自適應(yīng)。比如，圖片列表控件中局部圖片的放大，文字列表控件文字長度的自適應(yīng)。

3、間距調(diào)整

如果界面不適合拉伸，或界面本來就有很多可擴展區(qū)域，可考慮將增加的空間分配到這些區(qū)域，增加元素的間距。比如，九宮格列表。

還有一些滿屏界面，比如啟動圖、音樂播放器、活動H5頁等。因為顯示屏寬高比不同，拉伸會導(dǎo)致形變?？梢酝ㄟ^調(diào)整背景間距增加延展性。

（三）全面屏適配：從「寬度」到「縱向」

我們平常講的適配常常都是指寬度的適配，因為一般界面的內(nèi)容總是在縱向存在超過一屏的滾動內(nèi)容，可以不斷往下滾動，所以縱向的適配設(shè)計常常被忽略。

但是，全面屏的出現(xiàn)，使我們不得不正視這個問題。因為全面屏劉海和屏幕圓角的問題，導(dǎo)致整體高度的變化，進而影響了比例的變化。

首先，iPhone全面屏出現(xiàn)了劉海和屏幕圓角設(shè)計，我們需要重新定義「安全區(qū)域」，確保頁面內(nèi)容不能超出安全區(qū)域。

具體的安全區(qū)高度=屏幕高度-44-34（單位：pt），如下圖所示

以下就頂部、底部和滿屏界面進行適配。

1、頂部適配

頂部區(qū)域，非全面屏狀態(tài)欄高為20pt, 全面屏狀態(tài)欄高為44pt, 兩者存在24pt, 在設(shè)計頂部時，需要就差值作出適配。

一般頂部區(qū)域主要放置的控件以及應(yīng)對策略：

2、底部適配

底部區(qū)域用于手勢進入主屏或切換應(yīng)用。如果將觸發(fā)交互行為的按鈕放在屏幕底部，會破壞APP的操作體驗。除了一些無操作的信息流可以不用另外設(shè)置，常規(guī)做法都是將底部操作區(qū)全部提高34pt。

3、全屏適配

上文已經(jīng)提到，正常全屏適配的常規(guī)做法就是間距調(diào)整，全面屏依然適用。需要注意的是一些全屏的視頻播放，需要控制在安全區(qū)域內(nèi)。

（四）折疊屏適配

馬上即將迎來折疊屏手機，折疊屏的適配也需要納入考慮范圍。目前有華為和三星兩家手機廠商即將發(fā)布折疊屏。相關(guān)尺寸參數(shù)如下：

目前淘寶設(shè)計推薦的方法是，采用內(nèi)容流動的適配方式。

具體需要等正式上市，再進行專門適配。待續(xù)……

——5·附錄：iOS和Android常見參數(shù)——

說明：以下提供iOS和Android兩個平臺一些常見的手機型號、屏幕尺寸、分辨率等參數(shù)。

（一）iOS平臺

iOS常用的邏輯像素有：320×568 pt（5/5c/5s/se），375×667 pt（6/6s/7/8），375×812pt（X/Xs），414×736 pt（6p/6sp/7p/8p），414×896pt（XR/Xs Max），常用倍率有：@3x，@2x.

根據(jù)友盟數(shù)據(jù)，目前iPhone使用最多的是6/6s/7/8的750×1334px屏幕,倍率為2，邏輯像素320x667 pt。上升勢頭最猛，未來有望登上第一的是6p/6sp/7p/8p的1080×1920px屏幕。倍率為2，邏輯像素414x736 pt。?

注意：iphone 6plus適配中，有設(shè)計版，物理版，放大版：? ??

因為plus屏幕有1080個像素點，但截屏后發(fā)現(xiàn)圖像是1242像素，就是在一個物理有1080個像素點的屏幕里塞了個1242像素的內(nèi)容。而放大版，就是iphone 6的尺寸等比放大1.5倍得出的分辨率。

在iPhone6的x2倍設(shè)計稿中，界面元素之間的常用距離，親密距離：20px；疏遠距離：30px。

疏遠距離：比如，所有元素距離手機屏幕最左邊的距離。

親密距離：比如，左邊圖標與右邊文字之間的距離。

（二）Android平臺

安卓由于屏幕尺寸過多，分辨率跨度大，根據(jù)dpi分成幾個范圍區(qū)間：

像素密度為160dpi左右的稱為mdpi, 240左右的為hdpi, 320左右的xhdpi…以此類推。這樣，所有的安卓屏幕都找到了自己的位置，并賦予了相應(yīng)的倍率。

Android約定：當(dāng)dpi=160時，倍率為@1x，邏輯像素=320×480 dp ?或 360×640 dp ，稱之為mdpi，其它的都是基于此通過倍率轉(zhuǎn)化：hdpi:1.5倍；xhdpi:2倍；xxhdpi:3倍；xxxhdpi:4倍。

如今的Android屏幕邏輯像素已經(jīng)趨于統(tǒng)一，基準為：360x640 dp。

在實際操作中，我們要用「邏輯像素尺寸」思維來思考界面，把單位設(shè)置成邏輯像素。打開PS的首選項——單位與標尺界面，把尺寸和文字的單位都改成點（Point）。這里的點也就是pt，無論設(shè)計iOS、Android還是Web應(yīng)用，單位都用它。

要調(diào)節(jié)倍率，則通過圖像大小里的DPI來控制。這個DPI，其實就是PPI，像素密度。有個常識大家都知道，屏幕上的設(shè)計DPI設(shè)成72，印刷品設(shè)計DPI設(shè)成300。

——6·總結(jié)——

本文從理論入手，先介紹了「像素密度」和「邏輯像素」兩個重要概念，其中像素密度影響“屏幕的成像質(zhì)量”，邏輯像素影響“界面的容積能力”；接著進入實際操作，設(shè)計作圖應(yīng)該選擇何種倍率和屏幕尺寸；然后是細節(jié)的處理，常用的適配方法，以及全面屏的適配。最后是iPhone和Android手機的一些設(shè)計參數(shù)。

參考：

《APP適配攻略1-5》——廣告設(shè)計與制作

《iPhone 2018 全面屏適配詳解·含 XS、Max、MR》

《移動設(shè)計》

《超全面的移動端尺寸基礎(chǔ)知識科普指南》

《蘋果又出新尺寸！UI設(shè)計尺寸單位完全指南》?

封面圖片：Final Test Results: iPhone XS and XS Max——consumer reports