1.如何理解「每英寸像素」和「邏輯像素」的概念？
2.面對琳瑯滿目的手機型號和屏幕尺寸，應該選擇什麽樣的放大倍數和尺寸進行繪圖？
3.基準設計稿完成後如何適配屏幕？？
說明:本章涉及的概念有:屏幕尺寸、PPI、DPI、物理像素。
諾曼在《情感設計》壹書中提到了四類快感。第壹類是:生理快感，即本能的感官體驗。圖像質量的清晰、細膩和生動是視覺感官體驗的壹部分。畫面質量由屏幕的性質決定。
目前市場上有很多手機型號。如何判斷不同屏幕清晰度的好壞？在這裏，我們需要引入壹個重要的概念。
我們知道，屏幕是由很多像素組成的，每個像素發出不同顏色的光，構成了我們看到的畫面。當我們眼睛的視桿細胞和視錐細胞接收到更多的光線時，我們感知的圖像就越豐富。而如果需要更多的光線，就需要保證有足夠的像素。
我們在計算“人口密度”的時候，會隨便抓壹個壹平方公裏的區域，看看有多少人擠進去，然後判斷人口密度。同樣，我們可以抓壹寸界面，看裏面塞了多少像素，判斷像素密度。這就是“每英寸像素”。
如前所述，“每英寸像素數”代表壹英寸界面的像素數，因此與兩個參數有關:界面大小和像素。
壹般手機的出廠配置信息都會標註“屏幕尺寸”，屏幕尺寸是指屏幕的對角線長度，單位是英寸(1英寸=2.54厘米，大約是食指末端指節的長度)。設備的長度和寬度的實際長度，即“物理尺寸”，是由勾股定理計算出來的。
我們還可以找到設備的分辨率，即水平和垂直方向的像素數，也稱為“物理像素”，單位是px。
有了這兩個參數，就可以計算出每英寸的像素數。
另壹種計算方法是計算“物理像素”的平方和，然後開根號，最後除以“屏幕尺寸”。
從計算方法可以看出，每英寸像素數就是每英寸像素數，縮寫為PPI。
值得註意的是，在Android系統中，除了每英寸像素PPI之外，還有壹種DPI，又稱“每英寸像素”，全稱是每英寸點數(Dots per inch)。它們之間的區別是:
PPI:代表每英寸的物理像素，是客觀存在的，不會改變。
DPI:指每英寸的軟件像素，是軟件參考ppi後手動指定的固定值，寫入系統出廠配置文件，保證某個區間的ppi在軟件中使用相同的值，這是Android獨有的。
所以可能會出現幾款PPI不同但DPI相同的安卓手機。比如三款分辨率相同尺寸不同的手機ppi可能分別是430、440、450，那麽在Android系統中，可能會把所有的dpi都指定為480，以保證相同分辨率的手機性能壹致。
蘋果手機型號有限，所以沒有DPI的概念，全部用PPI表示。
每英寸像素是數字世界和物理世界之間的橋梁。這是設備的固有屬性，反映了屏幕呈現圖像細節的能力。每英寸的像素越高，屏幕顯示的密度就越高，保真度就越好。視網膜屏幕比普通屏幕更清晰，因為它每英寸的像素增加了壹倍。
我們可以根據每英寸的像素來判斷屏幕顯示的好壞。IPhone 3gs和iPhone 4的物理尺寸相同，但後者的ppi為326，是前者163的兩倍，分辨率也高壹倍，可見4的成像能力更好。同時可以看出手機屏幕的物理尺寸和像素尺寸不成比例。
簡而言之:只要兩款手機的“每英寸像素”相同，那麽它們的顯示“精細度”也是壹樣的。？
說明:本章涉及的概念有:邏輯像素、放大倍數和每英寸邏輯像素。
假設我們把壹個1×1像素的紅色方塊放在A接口(1英寸，4x4 px)，然後把它移到B接口(1英寸，8x8 px)，大小相同，每英寸像素增加壹倍，如下圖所示。
在界面B上，紅色方塊依然覆蓋1x1像素，但實際物理尺寸變小了。這不符合普通人的常識。為什麽同樣的內容在同樣大小的界面上顯示不壹樣？
如何解決這個問題？我們可以試著分析:
對比接口A和B，B每英寸像素更大，接口-物理像素更大。
在紅色方塊的移動過程中，方塊的“物理像素”保持不變，方塊的“物理尺寸”變小。
在上述因素中，“物理大小”是我們唯壹能用肉眼觀察到的屬性。我們的目標是讓紅色方塊的變化過程符合常識，即保持紅色方塊的“物理尺寸”不變。根據“每英寸像素數”的計算公式，當紅色方塊的物理尺寸不變時，每英寸像素數增加壹倍時，界面B中紅色方塊的物理像素數也必須增加壹倍。
同樣的物理尺寸，界面A和界面B中紅色方塊顯示的內容數量是壹樣的。為了標記“不同分辨率界面顯示相同內容顯示效果”的能力，我們引入了壹個抽象的概念，這就是“邏輯像素”。我們約定以界面A的物理像素為基準，乘以對應的像素就可以得到界面B，A和B的顯示範圍是壹樣的。這個基準是邏輯像素。
現在，我們再把紅方從界面A移到界面B，因為界面B的每英寸像素是界面A的兩倍，為了使紅方的布局在兩個界面中與肉眼可見的大小壹致，根據公式，紅方在界面B中占據的物理像素是界面A的兩倍，如下圖所示:
邏輯像素作為壹組參考手機分辨率維度，需要有壹個統壹的單位，方便表達。
由於iOS和Android的開發工具不同，兩個平臺上邏輯像素的單元名稱也不同。iOS是PT，Android是dp，設計師可以簡單理解為pt=dp。
iOS的pt :point代表壹個點。
DP:Android的密度無關像素指的是密度無關像素。
計量單位決定了我們的思維方式。在設計開發過程中，要盡量用邏輯像素大小來思考界面。
“邏輯分辨率”是用邏輯像素來描述屏幕的分辨率；“每英寸邏輯像素數”用“每英寸屏幕像素數”相對於“參考屏幕密度”的倍數來表示，即相對密度。
假設每英寸的邏輯像素數為n，那麽1 pt = 1 dp = n px。特定單位之間的換算關系隨放大倍數而變化:
@ 1x:1pt = 1dp = 1px
@ 1.5×:1pt = 1dp = 1.5 px。
@2×: 1pt=1dp=2px
@ 3x: 1pt=1dp=3px
@4×: 1pt=1dp=4px
“邏輯像素”可以與“物理尺寸”相關聯。在低分辨率手機中可能是1pt=1px，在高分辨率手機中可能是1pt=2px。在本例中，控件具有108*108pt。如下圖所示。
知道了邏輯像素和單位，實際“物理像素”的計算公式為:
IOS分辨率:px=pt *放大倍數。(其中pt為邏輯像素大小，iOS常用放大倍數為@2倍，@3倍)。
安卓的分辨率:px=dp * (dpi/160)。(其中dp是邏輯像素大小，dpi是每英寸的邏輯像素，160是@1×的指定基準每英寸邏輯像素)。
“邏輯像素”是人為約定的，會影響屏幕顯示的內容，與影響清晰度的“每英寸像素”無關。
物理分辨率:由硬件支持。
邏輯解析:軟件可以實現。
當兩個器件的邏輯像素壹致時，顯示容量相同；當邏輯像素不壹致時，尺寸較大的像素顯示更多內容。
比如iPhone 3gs，比如iPhone 4，物理尺寸和邏輯分辨率是壹樣的；3gs的物理分辨率為320× 480，4的物理分辨率為640×960。後者的物理分辨率和每英寸像素是前者的兩倍。因為物理分辨率不同，4的硬件支持的渲染質量更高；因為邏輯分辨率是壹樣的，所以兩者的軟件能達到的內容量是壹樣的。
再比如，有兩款Android設備，屏幕尺寸分別為480x800px和720x1280px，分別屬於hdpi和xhdpi。除以它們各自的放大倍數1.5倍和3倍，邏輯像素分別為320×533dp和360×640dp。顯然後者更寬更高，可以展示更多的內容。
邏輯歸結的三個功能:
1，作為屏幕上顯示多少內容(即音量)的表示。邏輯像素大小越大，顯示的內容就越多，而不管設備的實際分辨率大小、每英寸像素和放大倍數。
2.確保不同屏幕之間的控件切換符合人們的常識和預期:屏幕上顯示的內容與分辨率和每英寸像素無關，而是與屏幕的物理尺寸有關，這也符合人們的常識:屏幕越大，顯示的內容越多。
3.在設計開發中的應用:我們不需要關註屏幕的每寸像素，只需要關註邏輯分辨率，方便設計溝通。？
說明:熟悉概念，下面進入實際操作:UI設計圖。
在UI設計的過程中，我們在決定繪制哪個尺寸的手機屏幕之前，首先要考慮選擇哪個放大倍數。
因為是“放大”把大小屏幕拉回到同壹水平線，才能保證壹套設計稿能適應各種屏幕。
另外，在為開發提供的設計資源圖片中，同壹個圖片通常有兩個甚至三個尺寸。有些文件名有@2x或@3x，有些沒有。其中@ 2x和@ 3x代表放大倍數。沒拍的用在普通屏幕上，拍的用在視網膜屏幕上。只要圖片準備好了，iOS或者Android會決定用哪個。
我們可以直接選擇邏輯像素大小(即x1的放大倍數)進行設計和繪圖。
而x1放大倍數的設備，目前幾乎已經被淘汰。但我們通常會將完成的設計圖紙導入到相應的設備中查看效果。目前主流設備采用的是x2和x3的放大，x1的設計圖放入主流設備必須放大才能查看效果。粗略放大會導致失真，影響效果觀看。所以x1的放大倍數在效果圖的最終視圖中是有缺陷的。
x3放大倍數怎麽樣？
在和程序員交流，設計切割圖的時候，我們會換算放大倍數。X3切線圖轉換不方便；
另外，程序員拿到標註圖後，需要將px轉換成pt進行開發。(1)在放大倍數為1: x2的情況下，列表高度為120px，頭像高度為102px的標簽轉換為邏輯像素，分別為60pt和52pt，無法居中對齊，因此會有1pt的誤差，最終的設備呈現效果會有2px的像素偏移。(2)情況二:如果將x3放大倍數的100px轉換為邏輯像素，程序員只能在33pt和34pt之間選擇壹個值，因為邏輯像素和物理像素壹樣，必須是整數。如果采用33pt，設備上呈現的最終尺寸為99x99px，誤差為1px；如果使用34pt，則最終器件的尺寸為102x103px，誤差為2px。因此，為了保證設計的落地效果，我們需要:
在x1的放大倍數下，尺寸必須均勻；
在x2放大倍數下，尺寸必須是4的倍數；
放大倍數為x3時，尺寸必須是6的倍數。
可以看出，x3放大倍數是最難實現的。
通過以上，我們也可以排除“x3放大倍數”作為我們的繪圖選擇。
因為x1放大倍數和x3放大倍數都有明顯的缺點，所以常用的放大倍數只有x2放大倍數。鑒於x2比率在所有方面都相對平衡，因此:
我們選擇X2放大倍率作為圖紙尺寸。
選擇繪圖放大倍數後，我們可以選擇具體的繪圖尺寸。？
目前主流iPhone機型在x2放大倍數下有五種尺寸，如下圖:
其中，iPhone X可以認為是iPhone 6的加長版；IPhone XR可以認為是iPhone 6P的加長版。如下圖所示:
所以這四個尺寸可以分為兩種:寬度為750和828的。
Android系統的邏輯像素已經統壹為360x640，x2比例為:720x1280。
最後總結了雙平臺@2x放大和* * *四種屏幕尺寸。
在大屏時代，用小屏作為設計基準顯然是不合適的。我們壹般選擇中間尺寸作為適應的基準，因為如果從中間向上或向下適應，調整幅度是最小的。
iOS和Android有兩個中號，我該選哪個？
大多數設計師每天都在使用iPhone，所以他們可能對Android開發不夠了解。同時對安卓的接受度不太重視，設計師對安卓的容錯率高，也導致安卓端出現問題。根據“哪裏問題多，就從哪裏入手”的原則，可以選擇720×1280作為設計基準。
但是選擇750×1334也沒什麽問題，而且他們很多人更喜歡iOS設計。兩者都可以“壹稿雙適”。
當然，很多團隊都在同時制作iOS和Android兩套設計稿，所以妳可以:
同時采用750×1334 px和720×1280 px作為設計基準。
為了找到圖紙尺寸和設計規格之間的關系，我們比較了不同放大倍數下的屏幕控制尺寸:
發現對照物的高度隨著放大比而增加/減少。
(其中iPhone Xs Max只是在原有的20pt狀態欄上增加了24pt，在底部增加了34pt的主頁指示器。)
在相同的放大倍數下，比較控制尺寸:
發現:同樣的放大倍數，控件的大小不變。頁面大小的更改不會影響控件的大小。
綜上所述，控件大小只隨放大倍數變化，與實際繪圖大小無關。也就是說:
圖紙尺寸對設計規範沒有影響，設計規範是元件規範。？
說明:畫好之後，我們開始考慮更多的細節。
什麽是適應？
就是讓同壹套app的UI設計在不同尺寸和分辨率的“移動終端設備”上正常顯示。因此，需要根據不同的型號對組成界面的組件進行壹系列的調整。
為什麽要適應？為了追求多樣化設備環境下體驗的壹致性，保持理想的顯示效果。自適應僅取決於三個參數:
渲染像素-屏幕截圖的圖片大小，以像素為單位。
邏輯像素——程序員開發時使用的大小，以pt為單位。
時代？Rate ——渲染像素/邏輯像素得到的倍數關系。常見的比率是@2x和@3x。放大率決定了切線貼圖。
界面元素根據整體屏幕大小按比例縮放，壹般是界面布局比較特殊，布局不能改變的情況。例如圖片墻和圖片列表。適配時，控件的大小隨著屏幕寬度的變化而自適應。屏幕越寬，單個屏幕上顯示的內容就越少。
註意:在界面縮放過程中，需要保證資源圖片拉伸後的清晰度，以免降低產品質量。
調整、縮放或適應本地控制。比如圖片列表控件中局部圖片的放大，文本列表控件中文本長度的適配。
如果界面不適合拉伸，或者界面中有很多可擴展的區域，可以考慮將增加的空間分配給這些區域，以增加元素之間的間距。例如，九個正方形的列表。
還有壹些全屏界面，如啟動圖、音樂播放器、活動H5頁面等。因為顯示屏的長寬比不壹樣，拉伸會造成變形。可以通過調整背景間距來增加延展性。
我們平時說的適配通常指的是寬度適配，因為壹般界面的內容總是有不止壹個屏幕垂直滾動，可以連續向下滾動，所以垂直適配設計往往被忽略。
但是，全面屏的出現讓我們不得不正視這個問題。因為全面屏劉海和屏幕圓角的問題，整體高度變化，進而影響比例變化。
首先，iPhone全面屏有劉海和圓角。我們需要重新定義“安全區域”，保證頁面內容不能超出安全區域。
具體安全區高度=屏幕高度-44-34(單位:pt)，如下圖所示。
頂部、底部和全屏界面調整如下。
在頂部區域，非全屏狀態欄的高度是20pt，全屏狀態欄的高度是44pt。兩者相差24pt，所以在設計上衣的時候需要適配差異。
主要放在壹般頂部區域的控制和應對策略:
底部區域用於輸入主屏幕或切換應用程序的手勢。如果把觸發交互行為的按鈕放在屏幕下方，會破壞APP的操作體驗。除了壹些非操作性的信息流，不需要單獨設置。常規做法是將底部作業面積增加34pt。
如上所述，正常全屏適配的正常做法是間距調整，全屏還是適用的。需要註意的是，有些全屏視頻播放需要控制在安全區域。
折疊屏手機即將推出，折疊屏的適配也需要考慮在內。目前華為和三星兩家手機廠商即將發布折疊屏。相關尺寸參數如下:
目前淘寶設計推薦的方法是采用內容流的自適應方法。
具體需求等正式上市，再專門改編。未完待續…
註:以下是iOS和Android平臺的壹些常見手機型號、屏幕尺寸、分辨率等參數。
IOS常用的邏輯像素有:320×568 pt(5/5c/5s/se)、375×667 pt(6/6s/7/8)、375×812pt(X/Xs)、414× 736pt (6p。
友盟數據顯示，目前最常用的iPhone是6/6s/7/8 750×1334px屏幕，放大倍數為2，邏輯像素為320x667 pt。上升勢頭最猛，6p/6sp/7p/8p的1080×1920px屏幕未來有望第壹。放大倍數為2，邏輯像素為414x736 pt。？
註:在iphone 6plus的適配中，有設計版、實體版和放大版:
因為plus屏幕有1080像素，但是截屏後發現圖像是1242像素，也就是在壹個1080像素的屏幕裏塞了壹個1242像素的內容。放大版是將iphone 6的尺寸比例放大1.5倍得到的分辨率。
在iPhone6的x2設計稿中，界面元素之間常見的距離，親密距離:20px；遙遠的距離:30px。
異化距離:比如所有元素與手機最左邊屏幕的距離。
親密距離:比如左邊圖標和右邊文字的距離。
Android由於屏幕尺寸大，分辨率跨度大，按照dpi分為幾個區間:
每英寸像素稱為MDPI，DPI約為160，HDPI的dpi約為240，xhdpi…dpi約為320，以此類推。這樣，所有的安卓屏幕都找到了自己的位置，並給出了相應的放大倍數。
安卓慣例:dpi=160時，放大倍數為@1x，邏輯像素=320×480 dp？或者360×640 dp，稱為mdpi，其他都是放大換算:hdpi:1.5倍；Xhdpi:2次；Xxhdpi:3次；Xxxhdpi:4次。
現在安卓屏幕的邏輯像素趨於統壹，基準是:360x640 dp。
在實際操作中，要用“邏輯像素大小”的思維來思考界面，將單位設置為邏輯像素。打開單位和標尺的界面，PS的首選項，將大小和文字的單位改為點。這裏的重點也是pt，無論是設計iOS、Android還是Web應用，都是機構在用。
要調整放大倍率，它由圖像尺寸中的DPI控制。這個DPI其實就是PPI，每英寸像素。有個常識大家都知道，屏幕上的設計DPI設為72，打印設計DPI設為300。
本文從理論入手，介紹了每英寸像素數和邏輯像素數兩個重要概念，其中每英寸像素數影響屏幕的成像質量，邏輯像素數影響界面的體積容量。然後進入實際操作，設計並畫出應該選擇什麽樣的放大倍數和屏幕尺寸；然後是細節的處理，常見的適配方式，以及全屏的適配。最後是iPhone和Android手機的壹些設計參數。