Android/iOS 設計單位及適配原則
Android/iOS 設計單位及適配原則
1、必備概念
解析度
解析度就是手機螢幕的畫素點數，一般描述成螢幕的“寬×高”，安卓手機螢幕常見的解析度有 480×800、720×1280、1080×1920 等。720×1280 表示此螢幕在寬度方向有 720 個畫素，在高度方向有 1280 個畫素。
螢幕大小
螢幕大小是手機對角線的物理尺寸，以英寸（inch）為單位。比如某某手機為“5寸大屏手機”，就是指對角線的尺寸，5 寸×2.54 釐米/寸=12.7 釐米。
密度（dpi，dots per inch；或 PPI，pixels per inch）。
從英文顧名思義，就是每英寸的畫素點數，數值越高當然顯示越細膩。假如我們知道一部手機的解析度是 1080×1920，螢幕大小是 5 英寸，你能否算出此螢幕的密度呢？
哈哈，中學的勾股定理派上用場啦！通過寬 1080 和高 1920，根據勾股定理，我們得出對角線的畫素數大約是 2203，那麼用 2203 除以 5 就是此螢幕的密度了，計算結果是 440。440dpi 的螢幕已經相當細膩了。
2、單位定義
px：pixel，畫素
電子螢幕上組成一幅圖畫或照片的最基本單元，對應螢幕上的實際畫素，是畫面中最小的點（單位色塊），畫素大小沒有固定長度值，不同裝置上 1 個單位畫素色塊大小不同。1px 表示一個畫素，例如 iPhone 8 的尺寸為 750px × 1334px，表示在該手機螢幕上，水平方向每行有 750 個畫素點，垂直方向每列有 1334 個畫素點。
pt：point，點
電子螢幕上組成一幅圖畫或照片的最基本單元，對應螢幕上的實際畫素，是畫面中最小的點（單位色塊），畫素大小沒有固定長度值，不同裝置上 1 個單位畫素色塊大小不同。1px 表示一個畫素，例如 iPhone 8 的尺寸為 750px × 1334px，表示在該手機螢幕上，水平方向每行有 750 個畫素點，垂直方向每列有 1334 個畫素點。
dpi：dot per inch
每英寸多少點，該值越高，則圖片越細膩。是安卓開發用的長度單位，1dp 表示在螢幕畫素點密度為 160ppi 時 1px 長度，這是 系統為“中”密度螢幕假設的基線密度。在執行時，系統根據使用中螢幕的實際密度按需要以透明方式處理 dp 單位的任何縮放 。dp 單位轉換為螢幕畫素很簡單：px = dp * (dpi / 160)。 如果還是覺得很懵，那麼可以直接記住：1dp 單位在裝置螢幕上總是等於 1/160 inch。
sp scale-independent pixel
安卓開發用的字型大小單位。在安卓系統裡，sp 與 dp 類似，不同的是 sp 可以根據使用者的字型大小首選項進行縮放，而 dp 則不會。 儘量使用 dp 作為空間大小單位，sp 作為文字相關大小單位，例如：新聞類和簡訊類等大篇幅文字，推薦使用 sp 為單位。
3、換算關係
pt 與 px 換算
公式一： 1pt= (DPI / 72) px 當 photoshop 中新建畫布的解析度為 72ppi ( 即 72dpi時 )， 1pt = 1px； 當新建畫布解析度為 72*2=144ppi 時，1pt = 2px。
ppi 和 dpi
公式二：dpi = ppidpi 最初用於衡量列印物上每英寸的點數密度。dpi 值越小圖片越不精細。當 DPI 的概念用在計算機螢幕上時，就應稱之為 ppi。同理： PPI 就是計算機螢幕上每英寸可以顯示的畫素點的數量。因此，在電子螢幕顯示中提到的 ppi 和 dpi 是一樣的，DPI 和 PPI 的區別。
px 和 dp 1dp=（螢幕ppi/160）px
dp 為安卓開發時的長度單位，根據不同的螢幕解析度，與 px 有不同的對應關係。1dp 定義為螢幕密度值為 160ppi 時的 1px，即，在 mdpi 時，1dp = 1px。 以 mdpi 為標準，這些螢幕的密度值比為：idpi : mdpi : hdpi : xhdpi : xxhdpi = 0.75 : 1 : 1.5 : 2 : 3；即，在 xhdpi 的密度下，1dp = 2px；在 hdpi 情況下，1dp = 1.5px。其他類推。
dp 和 sp
dp 和 sp 都是安卓的開發單位，dp 是長度單位，sp 是字型單位。sp 與 dp 類似，但是可以根據使用者的字型大小首選項進行縮放。Android 系統允許使用者自定義文字尺寸大小（小、正常、大、超大等等），公式五：當文字尺寸是 “正常” 時 1sp = 1dp，而當文字尺寸是“大”或“超大”時，1sp > 1dp。一般情況下可認為sp=dp。
由於做設計時以 xhdpi 為模板，xhdpi 條件下，1dp=2px。我們只需要記住，pt/dp/sp 是相對單位，而 px 是絕對單位。在做設計稿時，用 pt/dp/sp 就行了。但是必須要懂得這些單位和px 之間的換算。目前 Apple 的手機中，有三種不同解析度，分別被習慣性的成為 1 倍圖、2 倍圖、3 倍圖。而 Android 中，不同的解析度的被稱為 ldpi、mdpi、hdpi、xhdpi、xxhdpi、xxxdpi...。關於它們之間的換算關係，直接附上一張表，供大家參考。
4、iOS 和 Android 尺寸轉換
iOS 轉 Android 尺寸
iOS 750px 的設計稿可以和 Android 720px 的設計稿相對應 需要在可活動間距調整 30px 不建議修改固定間距（因為 750px 是 iOS@2x 對應 Android 是 xhdpi，所以 750px 的設計稿切換到 Android xhdpi檢視設計圖，xhdpi：2px = 1dp 即 375dp-15dp = 360dp）也就是Android 適配尺寸。iOS 375px 的設計稿可以和 Android 360px 的設計稿相對應 需要在可活動間距調整 15px 不建議修改固定間距（因為 375px 是 iOS@1x 對應 Android 是 mdpi，所以 375px 的設計稿切換到 Android 檢視設計圖，mdpi：1px = 1dp 即 375dp-15dp = 360dp）也就是 Android 適配尺寸。
Android 轉 iOS 尺寸
Android 720px 的設計稿可以和 iOS 750px的設計稿相對應 需要在可活動間距調整 30px 不建議修改固定間距（720px 是Android xhdpi 對應iOS是@2x，所以 720px 的設計稿切換到iOS@2x 檢視設計圖，@2x：2px = 1pt 即 360pt+15pt = 375pt）也就是 iOS 適配尺寸。Android 1080px 的設計稿可以和 iOS 1125px（即375px的三倍圖；375px*3=1125px）的設計稿相對應 需要在可活動間距調整 45px 不建議修改固定間距（1080px 是 Android xxhdpi對應 iOS 是 @3x，所以 1080px 設計稿切換到 iOS@3x 檢視設計圖，@3x：3px = 1pt 即 360pt+15pt = 375pt）也就是 iOS 適配尺寸。
設計稿是先做 iPhone6 (750×1334)的，目的是向上適配 iPhone6Plus，同時向下適配 iPhone5 和 iPhone4 的尺寸。而且還跟 Android 的 720*1280 同為 2 倍圖。