手機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)的界面效果。由此完成大中小三屏適配。

更詳細見 https://www.zhihu.com/question/25308946/answer/32240185

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


相關新聞

聯系我們

020-28170928

在線咨詢:點擊這里給我發消息

郵件:[email protected]

工作時間:周一至周五,9:30-18:30,節假日休息

QR code
任选9场预测