年前最后一個工作日，完成這篇干貨～

這篇文章的目的是想從更深的原理層去找到一些設計規范的原因，比如為什么要選用@2x的750*1334做基礎設計稿？

開發拿到設計基礎稿是如何操作適配的？

基礎稿是如何做到一稿適配到iOS和android的？

px與pt之間的關系是怎么樣的？等等......

深挖這些設計背后的原理，有助于我們更好的開展設計，也方便我們與開發更好的溝通，最重要的，在了解來背后的原理后，在開發進行中遇到問題的時候，我們也能很快的去融入參與問題的解決，也能培養鍛煉自己的邏輯思維，以及打開自己的設計眼界～

這篇文章想從以下目錄展開：

Px物理像素與Pt邏輯像素的理解以及倍圖之間的關系

iOS常用手機分辨率

同等倍率和不同倍率的適配原則

關于適配的案例說明

iPhone X及以上的適配規則

iOS與android之間的適配方案

用于適配的標注規范

切圖命名規范

1) Px物理像素與Pt邏輯像素的理解

Px (pixel)：物理像素

px是組成位圖圖像中的最小單位，不分大小，設計師常用單位～

像素是指由圖像的小方格組成的，這些小方塊都有一個明確的位置和被分配的色彩數值，小方塊的顏色和位置就決定了圖像所呈現出來的樣子～

可以將像素視為整個圖像中不可分割的單位/元素，因為像素已經是最小單位；并且它是以一個單一顏色的小格存在～

我們看到的一張張圖像，都是由一定量的像素構成，像素的多少決定了圖像在屏幕上所呈現的大小，像素的色彩拼接組合決定了圖像在屏幕上呈現什么內容～

Pt (point)：邏輯像素

pt也被成為邏輯點，在移動適配中被成為“邏輯像素”，是程序員用的一種計量單位～

pt是有固定大小的，一般用來測量設備的實際大小尺寸～

1pt=1/72英寸，1英寸=2.54厘米，那么，1pt=0.03527778厘米，可見1pt是有具體的大小值的～

所以，在72像素/英寸的顯示屏下，1pt=1px

邏輯像素大小=物理像素1倍圖尺寸大小

eg：兩款手機iPhone3G/S 和 iPhone4/4s，iPhone3G/S 是非Retina的1倍屏，分辨率為480*320px也就是該手機的物理像素，對應的邏輯像素就是該手機的硬件設備的大小為480pt*320pt；

iPhone4/4s 是Retina的2倍屏，分辨率為960px*640px也就是該手機的物理像素，對應的邏輯像素也是480pt*320pt；

Retina屏叫視網膜屏，也叫@2x屏。

如何理解兩款手機邏輯像素一樣，物理像素不同？

iPhone3G 和 iPhone4這兩款手機邏輯像素一樣表示硬件設備的測量尺寸一樣，物理像素不同說明相同面積里像素塊的構成數量不同，數量越多說明色彩越豐富，呈現的圖像也就約清晰；

相同大小的設備屏幕中，iPhone4承載的像素數量是iPhone3G的兩倍，相當于iPhone3G放一個像素塊的空間位置在iPhone4中放兩個像素塊，iPhone4的像素密度更高～

同樣，1920px*1080px的PC端，與1920px*1080px的小米手機，二者的物理像素(設計大小)一樣，邏輯像素(測量大小)很明顯差異很大，說明一樣多的像素內容，在邏輯像素更小的設備上圖像顯示的會更清晰，像素密度更高～

所以可以這樣理解倍圖的關系：

1倍圖即設備的物理像素：邏輯像素=1：1

2倍圖即設備的物理像素：邏輯像素=2：1

3倍圖即設備的物理像素：邏輯像素=3：1

注意??：物理像素px不分大小！邏輯像素pt有固定大小！

Q：為什么像素px不分大小？

A：px是一個點，它不是自然界的長度單位，誰能說出一個“點”有多長多大么？可以畫的很小，也可以很大。如果點很小，那畫面就清晰，我們稱它為“分辨率高”，反之，就是“分辨率低”。所以，“像素”的大小是會“變”的，也稱為“相對長度”。

px&em&pt之間的對比

px是像素單位，em是相對單位，pt是絕對單位～

px的優點：可以在計算機屏幕上，能達到預期的效果，在打印機和其它的高分辨率設備上，它又能取得所希望的效果。

em的優點：比較多，比如在一個頁面上，你給定了一個父元素的字體大小，這樣就可以通過調整一個元素來成比例的改變所有元素大小。它可以自由縮放，比如用來制作可伸縮的樣式表。

pt的優點：是一種固定長度的度量單位，是能夠使用測量設備測得的長度

2)iOS常用手機分辨率

以下是常用手機邏輯分辨率、物理(設計)分辨率等信息表～

可以觀察到6P、6sP、7P、8P的物理(設計)分辨率為1242px*2208px，邏輯分辨率為414px*736px【并不是375pt*667pt的3倍】，所以其實我們把375pt的3倍圖適配在Plus手機系列上來看的話，可以說Plus是偽3倍屏～

Plus放大模式的由來：

6Plus剛推出來的時為了方便快速適配，使用與iPhone6相同的邏輯像素尺寸，*3倍則為1125*2001與實際邏輯像素相差一些，在相同的屏幕尺寸下，放的更少的像素塊相對來說就比較大的顯示，就被定義為“放大模式”。

2倍圖，iPhone5 ?640px*1136px(物理像素) @2x 320pt*568pt(邏輯像素)

2倍圖，iPhone6 750px*1334px(物理像素) @2x 375pt*667pt(邏輯像素)

3倍圖，iPhone6P 1242px*2208px(物理像素，設計的實際標準模式) @3x 414pt*736pt(邏輯像素)，但我們一般用375pt的@3x圖1125*2001(物理像素，適配在Plus手機上稱為放大版) 來適配在Plus手機上～

那么，設計師有規定的設計稿尺寸大小嗎？

清楚適配規則、方法，在設計的時候注意距離值，元素大小的設置，那么用1倍圖設計和2倍圖設計都是一樣的，根據個人習慣就好～

再加上開發查看設計的軟件工具可以根據需要切換單位，就更加靈活了～

需要注意兩點：

注意設計尺寸與導出尺寸的對應

下圖以@2x圖為設計稿，導出切圖操作；導出后，檢查@2x的切圖尺寸是否與設計稿元素尺寸一致～

注意設計尺寸與上傳尺寸的對應

下圖為上傳畫板到藍湖上的操作；上傳時，確認好選擇的設計圖畫板尺寸，因為這個是標注平臺識別并計算單位的依據～

3)同等倍率和不同倍率的適配原則

設計時需要考慮什么問題

既然是一稿適配，在設計的時候需要始終把兩點始終帶入，一是大屏&小屏如何顯示問題(移動端適配/PC端響應式)，二是不同終端平臺(iOS&Android、移動端&PC端) 交互方式不同，分辨率差異會引起的設計差異；

如何能在不同終端設備較“舒適”的顯示，又不會有特別多的開發量？盡可能靈活設計、可延展性設計～

開發的視角

一張設計頁面，開發可能會腦補它會在不同屏幕下的樣子，所以我們在設計的時候也可以用這張設備屏幕圖來作為輔助工具，來擺放設計內容～

上圖中可觀察到，360pt*640pt是小米手機@3x 1080*1920的邏輯尺寸。對比iPhone8 375pt*667pt可以看出，這款小米手機比iPhone6要小一點(邏輯/測量尺寸)，但物理像素要高很多，像素密度更高，圖像清晰度也就更高～

iOS適配需要考慮兩種：相同倍率和不同倍率

相同倍率，不同大小；eg：iPhone5 640px*1136px @2x、iPhone6 750px*1334px @2x；

不同倍率，不同大小；eg：iPhone6 750*1334 @2x、iPhoneX：1125*2436 @3x

相同倍率適配原則

原則一：文字流(fluid)

比如：相同的文字內容；在iPhone5和iPhone6下，左右兩邊距離屏幕的邊距相同，由于屏幕大小不一樣，在iPhone5下顯示4行，而iPhone6下顯示3行～

2. 原則二：彈性控件(flexible)

對比iPhone5和iPhone6的同一個頁面，整體內容距離屏幕左右邊距不變，字號、圖標大小、圖標與文案之間的間距都保持一致，僅僅只放大了中間的距離～

3. 原則三：等比縮放

iPhone5和iPhone6的“瓷片區”圖片，整體內容距離屏幕兩邊的邊距、圖片與圖片之間的距離在同倍率不同大小的手機上都是一樣的，對圖片的處理：同等比例縮放～

總結：

綜上所述，邊距(整體內容距離屏幕兩邊的大小)、字體大小、控件、間距(元素之間)在同等倍率下是不變的！

可以這樣理解，同等倍率一位置像素密度相同，也就是說除了手機硬件屏幕的大小不一樣，看到手機內容的清晰度是一樣的；

那么在做適配的時候我們是不是可以考慮在多出的/少一些的測量大小上做文章呢？

當遇到文字流的時候，文字的大小不變，手機屏幕兩邊距不變，改變的是顯示高度的不同(寬屏顯示的行數少些，窄屏顯示的行數多些)～

當遇到控件的時候，控件大小與輔助文案大小均不變，改變的是控件與對端中間的距離；

當遇到圖片的時候，兩側邊距和圖片之間的間距不變，改變的是圖片在不同屏幕下的等比縮放；

不同倍率適配原則

方法：將所有需要適配的@3x圖都統一換算為@2x圖(根據@2x圖的適配方法，相同倍率下修改中心的距離即可完成同倍率下的適配)，再將@2x乘以1.5即可適配到@3x下。

為什么將iPhone6/7/8作為設計稿尺寸？

下方橙色區分別是上方設計稿邏輯像素@2x圖的尺寸，可以發現750px*1334px的尺寸是居于中間的，所以用iPhone6的尺寸作為設計稿是合適的～

以2倍圖為基礎，因為2倍圖更方便做同倍率和不同倍率之間的適配～

4)關于適配的案例說明

以下是UI效果圖設計稿，以及設計稿對應的適配方案～

一般交付給開發UI效果圖的時候，會對適配進行說明，方式不限，只要能表述清楚就可以，個人比較喜歡采用以下這種方式～

同倍率適配：根據適配說明稿，標出的數值固定不變，寬度按一定的百分比計算方式～

比如：在@2x iPhone5上的適配，只有兩個懸浮窗的寬度和高度發生了改變，其他的(圖中箭頭所示)的元素大小，內容邊距，都沒有變化。

不同倍率適配：找到@3x對應的@2x設計稿，整體放大1.5倍，其他元素按一定的百分比計算～

比如：在@3x iPhoneXS上的適配，整體放大1.5倍，兩個懸浮框的寬度和高度按照百分比的方式計算，其他的元素以1.5倍的規律進行換算～

5)iPhone X及以上的適配規則

iPhoneX的適配

首先得了解iPhoneX硬件設備的特征，也是與我們的設計有關聯的，iPhoneX & iPhoneXs(1125px*2436px) 系列是劉海屏手機，“劉海區”為44pt(@3x下，即為132px)，底部“home條”34pt(@3x下，即為102px)這兩個是固定的邏輯像素尺寸～

適配步驟：

將iPhoneX固定不變的兩個位置空出來，就是上面提到的，上方“狀態欄+劉?！?4pt(132px)，下方“取代home鍵操作區域”34pt(102px);

將@2x 750*1334的設計稿整體乘以1.5，適配到iPhoneX的面板中，需要注意的是我們放大的設計稿中包含了狀態欄高度的部分，而在步驟1中我們已經將狀態欄(包含在“劉海區”)空出來了，所以需要去掉40*1.5=60px的高度。

注意事項：

蘋果官方給了iPhoneX，距離兩邊屏幕邊距為34pt(102px)，原因是iPhoneX與iPhone其他手機還有個區別在于它是圓角的，當iPhoneX橫屏幕(比如：游戲類、適配類app)時，圓角那塊是不能有內容的，所以在4個邊角留出安全區域，采用的也是34pt的邊距。

iPhoneXR&XS Max的適配

iPhoneXR：414pt*896pt? ?@2x? ?828px*1792px

iPhoneXS Max：414pt*896pt? ?@3x? ?1242px*2688px

可以觀察到，iPhoneXR和iPhoneXS Max硬件手機尺寸大小一樣(擁有相同的邏輯像素)，物理(設計)尺寸不同，iPhoneXS Max像素密度更高，畫面清晰度更高～

那么做他們的適配，只需要先將@2x的iPhoneXR適配稿完成，再通過x1.5的方式即可完成@3x?iPhoneXS Max的適配～

XR的適配步驟：

將“劉海區”、“home條”的位置提前空出來：“劉海區”44pt(@2x的XR即為88px)；“home條”44pt(@2x的XR即為68px)；

將750*1334的基礎稿復制到XR的畫板中，同倍率適配調整：

圖片等比放大；

左右邊距保持與750px的設計稿一致；

注意內容中元素之間的上下、左右間距保持一致；

文字流的適配，擴大文字域范圍；

分割線長度的補充(左右邊距保持一致)；

... ...

XS Max的適配步驟：

新建1242*2688px的畫板；

將適配好的XR設計稿放大1.5倍，放在畫板中即可。

6)iOS與Android之間的適配方案

上述流程已完成iOS同倍率@2x與不同倍率@3x之間的適配；那么iOS與Android之間如何進行適配的呢？

iOS與Android的適配步驟：

Android主流屏幕尺寸為：1080*1920px，@3x屏；

基于iOS 750*1334px的@2x圖的設計稿尺寸，乘以1.44，適配在1080*1920px的android的設計稿上。

主流適配流程圖：

注意事項：

pt可看作是@1x圖的尺寸，方便計算；

注意在機型為：iPhoneX/XS/XR、iPhoneXS Max下，“劉海區44pt”&“home條34pt”的計算。

7)用于適配的標注規范

通過上述介紹我們知道，同倍率和不同倍率進行適配時，圖片會進行等比縮放，為圖片更好的被使用，開發則需要使用我們提供的@2x和@3x；

切圖素材在后臺數據庫，前段開發將這個素材的位置空出來，通過媒體查詢判斷用戶使用哪種設備類型，再向后臺服務器請求數據，獲取這個圖片素材，再在前端顯示圖片～

設計稿中其他元素可通過藍湖進行開發查看～

適配標注注意事項：

* 不能標“死”，如果把每個元素的上下左右的每一個間距都給標注來，只適合在某一種機型下，不能靈活的應用在所有機型尺寸上～

正確做法有兩種：

間距自適應型

在一定范圍下，比如：同倍率機型下，或無論什么機型都適用，將可以固定的間距標出來，其他的間距自適應；

素材適應型

在一定范圍下，比如：同倍率機型下，或無論什么機型都適用，將可以固定的間距標出來，其他的距離根據分辨率的寬度減去固定值后進行均分的適應方式；

結論：

標注并不是給的越詳細越好

需要自適應的地方不要進行標注

最重要的標注完成后需要與開發工程師進行溝通

tabbar開發小技巧：

底部tabbar，當有4個tab時，發現750除以4=187.5，意味著不能等分，程序員常規操作是：

@2x設計稿下當有4個tab時，左右兩側預留3px，將剩下的744px除以4=186px，每個tab被分攤到186px～

8)切圖命名規范

通用切圖命名格式：

組件_類別_功能_狀態@2x.png

例子🌰：tabbar_icon_home_default@2x.png(對應中文：標簽欄_圖標_主頁_默認@2x.png)

命名格式中的【類別】list：

說明：文章中有部分內容來自孫大川老師的分享

總結

以上是生活随笔為你收集整理的android 1396x750设计图,移动端的适配|切图|标注的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。