雷火平台-中国知名电竞赛事平台

聯(lián)系我們 face+ 關(guān)于 服務(wù) 案例
首頁(yè) 案例 服務(wù) 關(guān)于 face+

ui設(shè)計(jì)界面的尺寸規(guī)范有哪些?

Time: 2021-03-01

現(xiàn)在很多人應(yīng)該對(duì)ui設(shè)計(jì)有所了解了,ui設(shè)計(jì)主要是指界面設(shè)計(jì)。其實(shí)用戶界面我們也是比較熟悉的,經(jīng)??梢栽谙到y(tǒng)上看到。那大家知道ui設(shè)計(jì)界面的尺寸規(guī)范有哪些嗎?下面就讓小編給大家講解一下相關(guān)的內(nèi)容吧。

(圖片來(lái)自網(wǎng)絡(luò))


  一、UI尺寸基礎(chǔ)知識(shí)

  1、像素密度-PPI

  像素密度是指顯示屏幕每英寸的長(zhǎng)度上排列的像素點(diǎn)數(shù)量,PPI(Pixels per inch)越高代表屏幕顯示效果越精細(xì),Retina屏比普通屏清晰很多,就是因?yàn)樗南袼孛芏确艘槐丁?/span>

  2、計(jì)量單位

  iOS和Android平臺(tái)都定義了各自的像素計(jì)量單位。iOS的尺寸單位為pt,Android的尺寸單位為dp。說(shuō)實(shí)話,兩者其實(shí)是一回事。

  單位之間的換算關(guān)系隨倍率變化:

  1倍:1pt=1dp=1px(mdpi、iPhone 3gs)

  1.5倍:1pt=1dp=1.5px(hdpi)

  2倍:1pt=1dp=2px(xhdpi、iPhone 4s/5/6)

  3倍:1pt=1dp=3px(xxhdpi、iPhone 6)

  4倍:1pt=1dp=4px(xxxhdpi)

  單位決定了我們的思考方式。在設(shè)計(jì)和開(kāi)發(fā)過(guò)程中,應(yīng)該盡量使用邏輯像素尺寸來(lái)思考界面。設(shè)計(jì)Android應(yīng)用時(shí),有的設(shè)計(jì)師喜歡把畫(huà)布設(shè)為1080×1920,有的喜歡設(shè)成720×1280。給出的界面元素尺寸就不統(tǒng)一了。Android的最小點(diǎn)擊區(qū)域尺寸是48x48dp,這就意味著在xhdpi的設(shè)備上,按鈕尺寸至少是96x96px。而在xxhdpi設(shè)備上,則是144x144px。

  無(wú)論畫(huà)布設(shè)成多大,我們?cè)O(shè)計(jì)的是基準(zhǔn)倍率的界面樣式,而且開(kāi)發(fā)人員需要的單位都是邏輯像素。所以為了保證準(zhǔn)確高效的溝通,雙方都需要以邏輯像素尺寸來(lái)描述和理解界面,無(wú)論是在標(biāo)注圖還是在日常溝通中。不要再說(shuō)“底部標(biāo)簽欄的高度是96像素,我是按照xhdpi做的”這樣的話了。

  二、各種電腦及移動(dòng)設(shè)備的屏幕尺寸

  1、IPHONE 所有型號(hào)的尺寸

  1.0) iPhone x

  分辨率:1125×2436px

  PPI:458PPI

  狀態(tài)欄高度:132px

  導(dǎo)航欄高度:132px

  標(biāo)簽欄高度:147px

  屏幕尺寸:5.8 in

  1.1) iPhone6\7\8 plus設(shè)計(jì)版

  分辨率:1242×2208px

  PPI:401PPI

  狀態(tài)欄高度:60px

  導(dǎo)航欄高度:132px

  標(biāo)簽欄高度:147px

  屏幕尺寸:5.5 in

  1.2) iPhone6\7\8 plus放大版

  分辨率:1125×2001px

  PPI:401PPI

  狀態(tài)欄高度:54px

  導(dǎo)航欄高度:132px

  標(biāo)簽欄高度:147px

  屏幕尺寸:5.5 in

  1.3) iPhone6\7\8 plus物理版

  分辨率:1080×1920px

  PPI:401PPI

  狀態(tài)欄高度:54px

  導(dǎo)航欄高度:132px

  標(biāo)簽欄高度:146px

  屏幕尺寸:5.5 in

  1.4) iPhone6

  分辨率:750×1334px

  PPI:326PPI

  狀態(tài)欄高度:40px

  導(dǎo)航欄高度:88px

  標(biāo)簽欄高度:98px

  屏幕尺寸:4.7 in

  1.5)iPhone5 - 5C - 5S

  分辨率:640×1136px

  PPI:326PPI

  狀態(tài)欄高度:40px

  導(dǎo)航欄高度:88px

  標(biāo)簽欄高度:98px

  屏幕尺寸:4.0 in

  1.6) iPhone4 - 4S

  分辨率:640×960 px

  PPI:326PPI

  狀態(tài)欄高度:40px

  導(dǎo)航欄高度:88px

  標(biāo)簽欄高度:98px

  屏幕尺寸:3.5 in

  1.7) iPhone & iPod Touch第一代、第二代、第三代

  分辨率:320×480px

  PPI:163PPI

  狀態(tài)欄高度:20px

  導(dǎo)航欄高度:44px

  標(biāo)簽欄高度:49px

  屏幕尺寸:3.5 in

  1.8) iPad Pro 12.9

  分辨率:2048 x 2732

  PPI:264

  屏幕尺寸:12.9 in

  1.8) iPad Pro 10.5

  分辨率:1668 x 2224

  PPI:264

  屏幕尺寸:10.5 in

  1.8) iPad Pro, iPad Air 2, Retina iPad

  分辨率:1536 x 2048

  PPI:264

  屏幕尺寸:9.7 in

  1.8) iPad Mini 4, iPad Mini 2

  分辨率:1536 x 2048

  PPI:264

  屏幕尺寸:7.9 in

  1.8) iPad 1, 2

  分辨率:768 x 1024

  PPI:132

  屏幕尺寸:9.7 in

(圖片來(lái)自網(wǎng)絡(luò))


  2、尺寸圖例

  三、其它設(shè)備尺寸

  Android SDK模擬機(jī)的尺寸

  

屏幕大小

低密度(120)

中等密度(160)

高密度(240)

超高密度(320)






小屏幕

QVGA(240×320)


480×640


普通屏幕

WQVGA400(240×400)

WQVGA432(240×432)

HVGA(320×480)

WVGA800(480×800)

WVGA854(480×854)

600×1024

640×960

大屏幕

WVGA800 *(480×800)

WVGA854 *(480×854)

WVGA800 *(480×800)

WVGA854 *(480×854)

600x1024



超大屏幕

1024×600

1024×768 1280×76

8WXGA(1280×800)

1536×1152

1920×1152

1920×1200

2048×1536

2560×1600

 

  Android的圖標(biāo)尺寸

  

屏幕大小

啟動(dòng)圖標(biāo)

操作欄圖標(biāo)

上下文圖標(biāo)

系統(tǒng)通知圖標(biāo)(白色)

最細(xì)筆畫(huà)







320×480px

48×48px

32×32px

16×16 px

24×24px

不小于2px

480×800px

480×854px

540×960px

72×72px

48×48px

24×24 px

36×36px

不小于3px

720×1280px

48×48dp

32×32dp

16×16 dp

24×24dp

不小于2dp

1080×1920px

144×144px

96×96px

48×48 px

72×72px

不小于6px

 

  Android安卓系統(tǒng)dp/sp/px換算表

  

名稱

分辨率

比率 rate (針對(duì)320px)

比率 rate (針對(duì)640px)

比率 rate (針對(duì)750px)






idpi

240×320

0.75

0.375

0.32

mdpi

320×480

1

0.5

0.4267

hdpi

480×800

1.5

0.75

0.64

xhdpi

720×1280

2.25

1.125

1.042

xxhdpi

1080×1920

3.375

1.6875

1.5

 

  主流Android手機(jī)分辨率和尺寸

  

設(shè)備

尺寸

分辨率

設(shè)備

尺寸

分辨率







魅族MX2

4.4英寸

800×1280 px

魅族MX3

5.1英寸

1080×1800 px

魅族MX4

5.36英寸

1152×1920 px

魅族MX4 Pro未上市

5.5英寸

1536×2560 px

三星GALAXY Note 4

5.7英寸

1440×2560 px

三星GALAXY Note 3

5.7英寸

1080×1920 px

三星GALAXY S5

5.1英寸

1080×1920 px

三星GALAXY Note II

5.5英寸

720×1280 px

索尼Xperia Z3

5.2英寸

1080×1920 px

索尼XL39h

6.44英寸

1080×1920 px

HTC Desire 820

5.5英寸

720×1280 px

HTC One M8

4.7英寸

1080×1920 px

OPPO Find 7

合作咨詢

上海(總部)

上海市浦東新區(qū)郭守敬路498號(hào)22號(hào)樓
021-61057328
service@faceui.com

辦公地址地圖

北京

北京市東城區(qū)后永康17號(hào)A座
010-64015620
service@faceui.com

辦公地址地圖

成都

四川省成都市錦江區(qū)東大街牛王廟段100號(hào)
028-62790929
service@faceui.com

辦公地址地圖
首頁(yè) | 案例 | 服務(wù) | 關(guān)于 | face+ | 智見(jiàn)

Copyright ? 2009-2022 FaceUI design. All rights reserved


滬ICP備13044459號(hào)-5

上海辦公地點(diǎn)地圖
北京辦公地點(diǎn)地圖
深圳辦公地點(diǎn)地圖
在微信中搜索faceui
或保存二維碼在微信中打開(kāi)
<big id="c0ijm"><legend id="c0ijm"><button id="c0ijm"></button></legend></big>