ui設計的尺寸規範?初入移動端開發和UI設計的童鞋可能對UI尺寸和單位特頭痛，孟春覺得分享一下手機APP/Web UI尺寸和單位的經驗是有價值的，下面我們就來說一說關于ui設計的尺寸規範?我們一起去了解并探讨一下這個問題吧!

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代碼

<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0" />

<meta name="apple-mobile-web-app-capable" content="yes">

<meta name="apple-mobile-web-app-status-bar-style" content="black">

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寬設計來統一頁面效果，圖标使用矢量圖或字體圖标的方式，在不同屏幕分辨率下都可以顯示得清晰，部分圖片需要适配不同尺寸的屏幕，可另外設計。

更多精彩资讯请关注tft每日頭條，我们将持续为您更新最新资讯!