手機UI設計基礎-尺寸&單位

初入移動端開發和UI設計的童鞋可能對UI尺寸和單位特頭痛，孟春覺得分享一下手機APP/Web UI尺寸和單位的經驗是有價值的。

一、iPhone機型

1、分辨率

手機屏幕的分辨率各種尺寸五花八門，特別是安卓手機廠商衆多，引起更衆多的分辨率，480×800, 480×854, 540×960, 720×1280, 1080×1920,2k屏。iPhone的分辨率也不落伍，640×960, 640×1136, 750×1334, 1242×2208，一看確實比較暈菜。

千萬不要被這麼多的分辨率嚇暈了，其實手機APP和移動端web UI尺寸是有兼容的方案的。

2、屏幕尺寸

屏幕大小的物理尺寸，屏幕對角線長度衡量。

單位：英寸，1英寸 = 2.54釐米

3、像素密度(PPI)

像素密度(Pixels Per Inch)，所表示的是每英寸所擁有的像素數量。因此PPI數值越高，即代表顯示屏能夠以越高的密度顯示圖像。

4、邏輯分辨率與物理分辨率

物理像素(px)是硬件所支持的最高像素，邏輯像素(pt)是軟件所達到的像素。

iPhone各種機型物理分辨率(px)與邏輯分辨率(pt)轉換規律：

iPhone 1代/3Gs 1pt = 1px

iPhone 4s 1pt = 2px

iPhone 5s 1pt = 2px

iPhone 6s 1pt = 2px

iPhone 6 plus 1pt = 3px

如何適配不同iPhone機型？

1、採用哪種分辨率設計？

2、需要多少套標註？

3、需要提供多少套切圖？

加上Android生態中紛繁複雜的各種奇葩尺寸，現在APP設計開發必須考慮適配大、中、小三種屏幕。所以如何做到交付一套設計稿解決適配大中小三屏的問題？設計和開發之間採用什麼協作模式？

一個基本思路是：

1、選擇一種尺寸作爲設計和開發基準；

2、定義一套適配規則，自動適配剩下兩種尺寸；

3、特殊適配效果給出設計效果。

第一步，視覺設計階段，設計師按寬度750px(iPhone 6)做設計稿，除圖片外所有設計元素用矢量路徑來做。設計定稿後在750px的設計稿上做標註，輸出標註圖。同時等比放大1.5倍生成寬度1125px的設計稿，在1125px的稿子裏切圖。

第二步，輸出兩個交付物給開發工程師：一個是程序用到的@3x切圖資源，另一個是寬度750px的設計標註圖。

第三步，開發工程師拿到750px標註圖和@3x切圖資源，完成iPhone 6(375pt)的界面開發。此階段不能用固定寬度的方式開發界面，得用自動佈局(auto layout)，方便後續適配到其它尺寸。第四步，適配調試階段，基於iPhone 6的界面效果，分別向上向下調試iPhone 6 plus(414pt)和iPhone 5S及以下(320pt)的界面效果。由此完成大中小三屏適配。

二、安裝APP UI 尺寸

dp：Android開發中用於描述模塊間佈局大小的單位

sp：和dp一樣，只是用於描述字體大小的單位

dpi：測量空間點密度的單位，單位英寸上點的個數，同iPhone的PPI

Android的xxhdpi機型是安卓機中市場佔有率最高的機型，因此設計的時候，我們可以用1080px寬作爲通用尺寸，在app中按比例縮放顯示，比較特殊的地方在另外設計適配相應機型的圖片。

三、移動端Web UI 尺寸

1、Android、iPhone尺寸的統一。

在head中加入viewport代碼

viewport參數說明：

width=device-width 頁面寬度=設備寬度；

initial-scale=1.0 初始化比例1:1，即1dp=1pt=1px，px單位的尺寸使用邏輯分辨率的尺寸，入iphone4s邏輯分辨率寬度是320pt，iphone 4s web頁面寬爲320px，屏幕分辨率爲1920×1080的安卓手機，屏幕寬爲360dp，web頁面寬爲360px；

即藉助H5的viewport參數，我們可以使px單位尺寸等價於dp、pt來使用。爲兼容各種類型的手機屏幕，我們可以設置頁面最大寬度爲640px，設計效果圖的時候可以按640px寬設計來統一頁面效果，圖標使用矢量圖或字體圖標的方式，在不同屏幕分辨率下都可以顯示得清晰，部分圖片需要適配不同尺寸的屏幕，可另外設計。