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

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

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

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

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

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

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

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

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

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

我們?cè)谟?jì)算「人口密度」時(shí)，會(huì)抓出一平方公里的地區(qū)，看里面塞了多少人，據(jù)此，判斷人口的密集程度。同理，我們可以抓出一英寸的界面，看里面塞了多少個(gè)像素點(diǎn)，判斷像素的密集程度，這就是「像素密度」。

（二）「像素密度」如何計(jì)算？

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

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

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

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

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

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

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

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

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

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

蘋果手機(jī)型號(hào)有限，所以沒有DPI的概念，全部用PPI表示。

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

「像素密度」是連接數(shù)字世界和物理世界的橋梁。它是設(shè)備的固有屬性，反映了屏幕呈現(xiàn)影像細(xì)節(jié)的能力。像素密度越高，屏幕顯示的密度越高，擬真度就越好。Retina屏比普通屏清晰，就是因?yàn)樗南袼孛芏确艘槐丁?/p>

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

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

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

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

（一）違背常識(shí)的顯示效果

假如我們?cè)诮缑鍭（1英寸，4x4 px）上放一個(gè)1×1像素的紅方格，然后把它移動(dòng)到同樣尺寸、2倍像素密度的界面B（1英寸，8x8 px）上，如下圖所示。

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

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

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

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

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

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

現(xiàn)在，我們?cè)俅伟鸭t方格，從界面A移到界面B，因?yàn)榻缑鍮的像素密度是界面A的2倍，為了紅方格在兩個(gè)界面中肉眼可見的大小排版一致，根據(jù)公式，紅方格在界面B中占據(jù)的物理像素是界面A中的2倍，如下圖所示：

（二）邏輯像素的單位

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

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

iOS 的 pt ：point 表示點(diǎn) 。

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

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

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

假設(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)，在分辨率較低的手機(jī)中，可能1pt=1px,而在分辨率較高的手機(jī)中，可能1pt=2px，這樣的話，一個(gè)108*108pt的控件，在不同的手機(jī)中就能表現(xiàn)出肉眼觀看的差不多的大小，只是分辨率高的展示的更加清楚。如下圖所示。

知道了邏輯像素和單位，實(shí)際「物理像素」的計(jì)算公式：

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

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

（三）邏輯像素的作用

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

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

邏輯分辨率：軟件可達(dá)到的。

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

比如，以iPhone 3gs 和iPhone 4 為例，兩者的物理尺寸一致，邏輯分辨率一致；物理分辨率3gs是320×480, 4是640×960，后者無論物理分辨率，還是像素密度都是前者的2倍。因?yàn)槲锢矸直媛什煌?的硬件支持的呈像質(zhì)量更高；因?yàn)檫壿嫹直媛氏嗤瑑烧叩能浖蛇_(dá)的容納物的多少是一致的。

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

邏輯分辨率的三大作用：

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

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

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

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

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

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

因?yàn)檎恰副堵省梗汛蟠笮⌒〉钠聊焕氐搅送凰骄€，得以保證一套設(shè)計(jì)稿適應(yīng)各種屏幕。

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

（一）選擇何種倍率作圖

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

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

那x3倍率的怎么樣？

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

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

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

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

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

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

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

因?yàn)閤1倍率、x3倍率都存在明顯短板，常用倍率只剩下x2倍率。鑒于x2倍率各方面都比較均衡，所以：

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

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

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

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

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

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

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

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

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

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

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

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

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

同時(shí)把 750×1334 px 和 720×1280 px 作為設(shè)計(jì)基準(zhǔn)。

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

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

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

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

相同倍率，對(duì)比控件尺寸：

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

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

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

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

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

（一）適配的概念

什么是適配？

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

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

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

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

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

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

1、等比縮放

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

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

2、彈性控件

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

3、間距調(diào)整

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

還有一些滿屏界面，比如啟動(dòng)圖、音樂播放器、活動(dòng)H5頁等。因?yàn)轱@示屏寬高比不同，拉伸會(huì)導(dǎo)致形變。可以通過調(diào)整背景間距增加延展性。

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

我們平常講的適配常常都是指寬度的適配，因?yàn)橐话憬缑娴膬?nèi)容總是在縱向存在超過一屏的滾動(dòng)內(nèi)容，可以不斷往下滾動(dòng)，所以縱向的適配設(shè)計(jì)常常被忽略。

但是，全面屏的出現(xiàn)，使我們不得不正視這個(gè)問題。因?yàn)槿嫫羷⒑：推聊粓A角的問題，導(dǎo)致整體高度的變化，進(jìn)而影響了比例的變化。

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

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

以下就頂部、底部和滿屏界面進(jìn)行適配。

1、頂部適配

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

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

2、底部適配

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

3、全屏適配

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

（四）折疊屏適配

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

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

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

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

說明：以下提供iOS和Android兩個(gè)平臺(tái)一些常見的手機(jī)型號(hào)、屏幕尺寸、分辨率等參數(shù)。

（一）iOS平臺(tái)

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。上升勢(shì)頭最猛，未來有望登上第一的是6p/6sp/7p/8p的1080×1920px屏幕。倍率為2，邏輯像素414x736 pt。?

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

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

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

疏遠(yuǎn)距離：比如，所有元素距離手機(jī)屏幕最左邊的距離。

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

（二）Android平臺(tái)

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

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

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

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

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

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

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

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

參考：

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

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

《移動(dòng)設(shè)計(jì)》

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

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

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