最新消息: USBMI致力于为网友们分享Windows、安卓、IOS等主流手机系统相关的资讯以及评测、同时提供相关教程、应用、软件下载等服务。

UI设计尺寸规范UI设计规范

IT圈 admin 41浏览 0评论

2024年2月15日发(作者:可丁兰)

iPhone界面尺寸

设备

UI设计规范:IOS、Android系统主流尺寸整理

分辨率

PPI

状态栏高度

导航栏高度

标签栏高度

iPhone6P、6SP、7P

iPhone6 -

6S - 7

iPhone5 - 5C

- 5S

1242×2208

px

401PPI

60px

132px

146px

750×1334

px

640×1136

px

640×960

px

326PPI

40px

88px

98px

326PPI

40px

88px

98px

iPhone4 - 4S

326PPI

40px

88px

98px

iPhone &

iPod Touch

第一代、第二代、第三代

320×480

px

163PPI

20px

44px

49px

iPhone图标尺寸:

Spotlight搜索

工具栏和导航栏

设备

App Store

程序应用

主屏幕

标签栏

iPhone6P -

6SP -

7(3×)

1024×1024 px

180×180 px

114×114 px

87×87 px

75×75 px

66×66 px

iPhone6 - 6S

- 7

(2×)

1024×1024 px

120×120 px

114×114 px

58×58 px

75×75 px

44×44 px

iPhone5 - 5C

- 5S

(2×)

1024×1024 px

120×120 px

114×114 px

58×58 px

75×75 px

44×44 px

iPhone4 - 4S

(2×)

1024×1024 px

120×120 px

114×114 px

58×58 px

75×75 px

44×44 px

iPhone

& iPod

Touch第一代、第二代、第三代

1024×1024 px

120×120 px

57×57

px

29×29 px

38×38 px

30×30 px

iPad(de)设计尺寸

设备

尺寸

分辨率

状态栏高度

导航栏高度

标签栏高度

iPad 3 - 4 - 5

- 6 –

Air - Air2 -

mini2

2048×1536 px

264PPI

40px

88px

98px

iPad 1 - 2

1024×768 px

132PPI

20px

44px

49px

iPad Mini

1024×768 px

163PPI

20px

44px

49px

iPad图标尺寸:

Spotlight搜索

工具栏

导航栏

设备

App Store

程序应用

主屏幕

标签栏

iPad

3 -

1024×1024 px

180×180 px

144×144 px

100×100 px

50×50 px

44×44 px

4 -

5 -

6 -

Air

-

Air2

-

mini2

iPad

1 -

2

1024×1024 px

90×90

px

72×72

px

50×50

px

25×25 px

22×22 px

iPad

Mini

1024×1024 px

90×90

px

72×72

px

50×50

px

25×25 px

22×22 px

Android SDK模拟机(de)尺寸

屏幕大小

低密度(120)

中等密度(160)

高密度(240)

超高密度(320)

小屏幕

QVGA(240×320)

WQVGA400(240×400)

WQVGA432(240×432)

480×640

WVGA800(480×800)

WVGA854(480×854)

600×1024

普通屏幕

HVGA(320×480)

640×960

大屏幕

WVGA800

(480×800)

WVGA854

(480×854)

WVGA800

(480×800)

WVGA854

(480×854)

600x1024

1024×768

1280×768WXGA(1280×800)

超大屏幕

1024×600

1536×1152

1920×1152

1920×1200

2048×1536

2560×1600

Android(de)图标尺寸

系统通知图标

操作栏图标

上下文图标

(白色)

32×32

px

16×16

px

24×24

px

屏幕大小

320×480 px

480×800px

480×854px

540×960px

720×1280 px

启动图标

48×48

px

最细笔画

不小于2

px

72×72

px

48×48

px

24×24

px

36×36

px

不小于3

px

48×48

dp

32×32

dp

16×16

dp

24×24

dp

不小于2

dp

1080×1920 px

144×144

px

96×96

px

48×48

px

72×72

px

不小于6

px

Android安卓系统dp/sp/px换算表

比率 rate

(针对320px)

比率 rate

(针对640px)

比率 rate

(针对750px)

名称

idpi

mdpi

hdpi

xhdpi

xxhdpi

分辨率

240×320

320×480

480×800

1

720×1280

1080×1920

主流Android分辨率和尺寸

设备

分辨率

尺寸

设备

分辨率

尺寸

魅族MX2

英寸

800×1280

px

英寸

魅族MX3

1080×1280

px

魅族MX4

英寸

1152×1920

px

魅族MX4 Pro英寸

1536×2560

px

未上市

三星GALAXY

Note 4

英寸

1440×2560

px

三星GALAXY

Note 3

英寸

1080×1920

px

三星GALAXY

S5

英寸

1080×1920

px

三星GALAXY

Note II

英寸

720×1280

px

索尼Xperia

Z3

英寸

1080×1920

px

英寸

索尼XL39h

1080×1920

px

HTC Desire

820

英寸

720×1280

px

英寸

HTC One M8

1080×1920

px

OPPO Find 7

英寸

1440×2560

px

英寸

OPPO N1

5英寸

1080×1920

px

OPPO R3

5英寸

720×1280

px

OPPO N1 Mini

720×1280

px

小米M4

5英寸

1080×1920

px

英寸

小米红米Note

720×1280

px

小米M3

5英寸

1080×1920

px

英寸

小米红米1S

720×1280

px

小米M3S

5英寸

1080×1920

px

英寸

小米M2S

720×1280

px

华为荣耀6

5英寸

1080×1920

px

英寸

锤子T1

1080×1920

px

LG G3

英寸

1440×2560

px

英寸

OnePlus One

1080×1920

px

主流浏览器(de)界面参数与份额

市场份额

(国内浮动)

浏览器

状态栏

菜单栏

滚动条

Chrome 浏览器

22 px(浮动出现)

60 px

15 px

%

火狐浏览器

20 px

132 px

15 px

1%

IE浏览器

24 px

120 px

15 px

34%

360 浏览器

24 px

140 px

15 px

28%

遨游浏览器

24 px

147 px

15 px

1%

搜狗浏览器

25 px

163 px

15 px

%

系统分辨率统计

分辨率

1920×1080

360×640

720×1280

320×568

1080×1920

占有率

%

%

%

%

%

分辨率

1366×768

1440×900

1024×768

1600×900

375×667

占有率

%

%

%

%

%

2024年2月15日发(作者:可丁兰)

iPhone界面尺寸

设备

UI设计规范:IOS、Android系统主流尺寸整理

分辨率

PPI

状态栏高度

导航栏高度

标签栏高度

iPhone6P、6SP、7P

iPhone6 -

6S - 7

iPhone5 - 5C

- 5S

1242×2208

px

401PPI

60px

132px

146px

750×1334

px

640×1136

px

640×960

px

326PPI

40px

88px

98px

326PPI

40px

88px

98px

iPhone4 - 4S

326PPI

40px

88px

98px

iPhone &

iPod Touch

第一代、第二代、第三代

320×480

px

163PPI

20px

44px

49px

iPhone图标尺寸:

Spotlight搜索

工具栏和导航栏

设备

App Store

程序应用

主屏幕

标签栏

iPhone6P -

6SP -

7(3×)

1024×1024 px

180×180 px

114×114 px

87×87 px

75×75 px

66×66 px

iPhone6 - 6S

- 7

(2×)

1024×1024 px

120×120 px

114×114 px

58×58 px

75×75 px

44×44 px

iPhone5 - 5C

- 5S

(2×)

1024×1024 px

120×120 px

114×114 px

58×58 px

75×75 px

44×44 px

iPhone4 - 4S

(2×)

1024×1024 px

120×120 px

114×114 px

58×58 px

75×75 px

44×44 px

iPhone

& iPod

Touch第一代、第二代、第三代

1024×1024 px

120×120 px

57×57

px

29×29 px

38×38 px

30×30 px

iPad(de)设计尺寸

设备

尺寸

分辨率

状态栏高度

导航栏高度

标签栏高度

iPad 3 - 4 - 5

- 6 –

Air - Air2 -

mini2

2048×1536 px

264PPI

40px

88px

98px

iPad 1 - 2

1024×768 px

132PPI

20px

44px

49px

iPad Mini

1024×768 px

163PPI

20px

44px

49px

iPad图标尺寸:

Spotlight搜索

工具栏

导航栏

设备

App Store

程序应用

主屏幕

标签栏

iPad

3 -

1024×1024 px

180×180 px

144×144 px

100×100 px

50×50 px

44×44 px

4 -

5 -

6 -

Air

-

Air2

-

mini2

iPad

1 -

2

1024×1024 px

90×90

px

72×72

px

50×50

px

25×25 px

22×22 px

iPad

Mini

1024×1024 px

90×90

px

72×72

px

50×50

px

25×25 px

22×22 px

Android SDK模拟机(de)尺寸

屏幕大小

低密度(120)

中等密度(160)

高密度(240)

超高密度(320)

小屏幕

QVGA(240×320)

WQVGA400(240×400)

WQVGA432(240×432)

480×640

WVGA800(480×800)

WVGA854(480×854)

600×1024

普通屏幕

HVGA(320×480)

640×960

大屏幕

WVGA800

(480×800)

WVGA854

(480×854)

WVGA800

(480×800)

WVGA854

(480×854)

600x1024

1024×768

1280×768WXGA(1280×800)

超大屏幕

1024×600

1536×1152

1920×1152

1920×1200

2048×1536

2560×1600

Android(de)图标尺寸

系统通知图标

操作栏图标

上下文图标

(白色)

32×32

px

16×16

px

24×24

px

屏幕大小

320×480 px

480×800px

480×854px

540×960px

720×1280 px

启动图标

48×48

px

最细笔画

不小于2

px

72×72

px

48×48

px

24×24

px

36×36

px

不小于3

px

48×48

dp

32×32

dp

16×16

dp

24×24

dp

不小于2

dp

1080×1920 px

144×144

px

96×96

px

48×48

px

72×72

px

不小于6

px

Android安卓系统dp/sp/px换算表

比率 rate

(针对320px)

比率 rate

(针对640px)

比率 rate

(针对750px)

名称

idpi

mdpi

hdpi

xhdpi

xxhdpi

分辨率

240×320

320×480

480×800

1

720×1280

1080×1920

主流Android分辨率和尺寸

设备

分辨率

尺寸

设备

分辨率

尺寸

魅族MX2

英寸

800×1280

px

英寸

魅族MX3

1080×1280

px

魅族MX4

英寸

1152×1920

px

魅族MX4 Pro英寸

1536×2560

px

未上市

三星GALAXY

Note 4

英寸

1440×2560

px

三星GALAXY

Note 3

英寸

1080×1920

px

三星GALAXY

S5

英寸

1080×1920

px

三星GALAXY

Note II

英寸

720×1280

px

索尼Xperia

Z3

英寸

1080×1920

px

英寸

索尼XL39h

1080×1920

px

HTC Desire

820

英寸

720×1280

px

英寸

HTC One M8

1080×1920

px

OPPO Find 7

英寸

1440×2560

px

英寸

OPPO N1

5英寸

1080×1920

px

OPPO R3

5英寸

720×1280

px

OPPO N1 Mini

720×1280

px

小米M4

5英寸

1080×1920

px

英寸

小米红米Note

720×1280

px

小米M3

5英寸

1080×1920

px

英寸

小米红米1S

720×1280

px

小米M3S

5英寸

1080×1920

px

英寸

小米M2S

720×1280

px

华为荣耀6

5英寸

1080×1920

px

英寸

锤子T1

1080×1920

px

LG G3

英寸

1440×2560

px

英寸

OnePlus One

1080×1920

px

主流浏览器(de)界面参数与份额

市场份额

(国内浮动)

浏览器

状态栏

菜单栏

滚动条

Chrome 浏览器

22 px(浮动出现)

60 px

15 px

%

火狐浏览器

20 px

132 px

15 px

1%

IE浏览器

24 px

120 px

15 px

34%

360 浏览器

24 px

140 px

15 px

28%

遨游浏览器

24 px

147 px

15 px

1%

搜狗浏览器

25 px

163 px

15 px

%

系统分辨率统计

分辨率

1920×1080

360×640

720×1280

320×568

1080×1920

占有率

%

%

%

%

%

分辨率

1366×768

1440×900

1024×768

1600×900

375×667

占有率

%

%

%

%

%

发布评论

评论列表 (0)

  1. 暂无评论