手機(jī)UI設(shè)計(jì)基礎(chǔ)-尺寸&單位

時(shí)間：2023-10-09 11:54:01 | 來源：網(wǎng)站運(yùn)營(yíng)

時(shí)間：2023-10-09 11:54:01 來源：網(wǎng)站運(yùn)營(yíng)

手機(jī)UI設(shè)計(jì)基礎(chǔ)-尺寸&單位：初入移動(dòng)端開發(fā)和UI設(shè)計(jì)的童鞋可能對(duì)UI尺寸和單位特頭痛，孟春覺得分享一下手機(jī)APP/Web UI尺寸和單位的經(jīng)驗(yàn)是有價(jià)值的。

一、iPhone機(jī)型

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

千萬不要被這么多的分辨率嚇暈了，其實(shí)手機(jī)APP和移動(dòng)端web UI尺寸是有兼容的方案的。


2、屏幕尺寸

屏幕大小的物理尺寸，屏幕對(duì)角線長(zhǎng)度衡量。

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


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

4、邏輯分辨率與物理分辨率物理像素(px)是硬件所支持的最高像素，邏輯像素(pt)是軟件所達(dá)到的像素。

iPhone各種機(jī)型物理分辨率(px)與邏輯分辨率(pt)轉(zhuǎn)換規(guī)律：


iPhone 1代/3Gs 1pt = 1px

iPhone 4s 1pt = 2px

iPhone 5s 1pt = 2px

iPhone 6s 1pt = 2px

iPhone 6 plus 1pt = 3px


如何適配不同iPhone機(jī)型？

1、采用哪種分辨率設(shè)計(jì)？

2、需要多少套標(biāo)注？

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


加上Android生態(tài)中紛繁復(fù)雜的各種奇葩尺寸，現(xiàn)在APP設(shè)計(jì)開發(fā)必須考慮適配大、中、小三種屏幕。所以如何做到交付一套設(shè)計(jì)稿解決適配大中小三屏的問題？設(shè)計(jì)和開發(fā)之間采用什么協(xié)作模式？

一個(gè)基本思路是：

1、選擇一種尺寸作為設(shè)計(jì)和開發(fā)基準(zhǔn)；

2、定義一套適配規(guī)則，自動(dòng)適配剩下兩種尺寸；

3、特殊適配效果給出設(shè)計(jì)效果。


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

第二步，輸出兩個(gè)交付物給開發(fā)工程師：一個(gè)是程序用到的@3x切圖資源，另一個(gè)是寬度750px的設(shè)計(jì)標(biāo)注圖。

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


更詳細(xì)見 iPhone 6 / 6 Plus 出現(xiàn)后，如何改進(jìn)工作流以實(shí)現(xiàn)一份設(shè)計(jì)稿支持多個(gè)尺寸？


二、安裝APP UI 尺寸

dp：Android開發(fā)中用于描述模塊間布局大小的單位

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

dpi：測(cè)量空間點(diǎn)密度的單位，單位英寸上點(diǎn)的個(gè)數(shù)，同iPhone的PPI


Android的xxhdpi機(jī)型是安卓機(jī)中市場(chǎng)占有率最高的機(jī)型，因此設(shè)計(jì)的時(shí)候，我們可以用1080px寬作為通用尺寸，在app中按比例縮放顯示，比較特殊的地方在另外設(shè)計(jì)適配相應(yīng)機(jī)型的圖片。

三、移動(dòng)端Web UI 尺寸

1、Android、iPhone尺寸的統(tǒng)一。

在head中加入viewport代碼


viewport參數(shù)說明：

width=device-width 頁(yè)面寬度=設(shè)備寬度；

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

即借助H5的viewport參數(shù)，我們可以使px單位尺寸等價(jià)于dp、pt來使用。為兼容各種類型的手機(jī)屏幕，我們可以設(shè)置頁(yè)面最大寬度為640px，設(shè)計(jì)效果圖的時(shí)候可以按640px寬設(shè)計(jì)來統(tǒng)一頁(yè)面效果，圖標(biāo)使用矢量圖或字體圖標(biāo)的方式，在不同屏幕分辨率下都可以顯示得清晰，部分圖片需要適配不同尺寸的屏幕，可另外設(shè)計(jì)。


轉(zhuǎn)自手機(jī)UI設(shè)計(jì)基礎(chǔ)-尺寸&單位 - 推酷