2024年2月15日发(作者:厉怜南)
UI设计标准:IOS、Android系统主流尺寸整理
iPhone界面尺寸
设备 分辨率 状态栏高度
导航栏高度 标签栏高度
PPI
1242×2208 px 401PPI 60px 132px 146px
iPhone6P、6SP、7P
750×1334 px 326PPI 40px 88px 98px
iPhone6 - 6S - 7
640×1136 px 326PPI 40px 88px 98px
iPhone5 - 5C - 5S
640×960 px 326PPI 40px 88px 98px
iPhone4 - 4S
iPhone & iPod Touch
第一代、第二代、第三代
320×480 px 163PPI 20px 44px 49px
iPhone图标尺寸:
设备
App Store
程序应用 主屏幕 Spotlight搜索 标签栏 工具栏和导航栏
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的设计尺寸
设备 尺寸 分辨率 状态栏高度 导航栏高度 标签栏高度
iPad 3 - 4 - 5 - 6 –
Air - Air2 - mini2
2048×1536 px 264PPI 40px 88px 98px
1024×768 px 132PPI 20px 44px 49px
iPad 1 - 2
1024×768 px 163PPI 20px 44px 49px
iPad Mini
iPad图标尺寸:
工具栏
导航栏
设备 App Store 程序应用 主屏幕 Spotlight搜索 标签栏
iPad 3 - 4 - 5 - 6 - Air - Air2 -
mini2
1024×1024 px
180×180
px
144×144
px
100×100
px
50×50
px
44×44
px
1024×1024 px
90×90
px
72×72
px
50×50 px
25×25
px
22×22
px
iPad 1 - 2
1024×1024 px
90×90
px
72×72
px
50×50 px
25×25
px
22×22
px
iPad Mini
Android SDK模拟机的尺寸
屏幕大小
小屏幕
低密度〔120〕 中等密度〔160〕 高密度〔240〕 超高密度〔320〕
QVGA〔240×320〕
480×640
普通屏幕
WQVGA400〔240×400〕
WQVGA432〔240×432〕
WVGA800 *〔480×800〕
WVGA854 *〔480×854〕
HVGA〔320×480〕
WVGA800〔480×800〕
WVGA854〔480×854〕
600×1024
640×960
大屏幕
WVGA800 *〔480×800〕
WVGA854 *〔480×854〕
600x1024
超大屏幕
1024×600
1024×768
1280×768WXGA〔1280×800〕
1536×1152 1920×1152
1920×1200
2048×1536
2560×1600
Android的图标尺寸
系统通知图标
(白色) 屏幕大小
320×480 px
480×800px
480×854px
540×960px
720×1280 px
1080×1920 px
启动图标 操作栏图标 上下文图标 最细笔画
48×48 px 32×32 px 16×16 px 24×24 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
144×144 px 96×96 px 48×48 px 72×72 px 不小于6 px
Android安卓系统dp/sp/px换算表
名称
idpi
分辨率
比率 rate
(针对320px)
比率 rate
(针对640px)
比率 rate
(针对750px)
240×320
mdpi
hdpi
xhdpi
xxhdpi
320×480 1
480×800
720×1280
1080×1920
主流Android手机分辨率和尺寸
设备 分辨率 尺寸 设备 分辨率 尺寸
英寸 800×1280 px
英寸
1080×1280
px
魅族MX2
魅族MX3
英寸
1152×1920 px
英寸
魅族MX4
魅族MX4 Pro未上市
1536×2560
px
英寸
1440×2560 px
英寸
1080×1920
px
三星GALAXY Note 4 三星GALAXY Note 3
英寸 1080×1920 px
英寸 720×1280 px
三星GALAXY S5 三星GALAXY Note II
英寸 1080×1920 px
英寸
1080×1920
px
索尼Xperia Z3
索尼XL39h
英寸
720×1280 px
英寸
1080×1920
px
HTC Desire 820 HTC One M8
英寸
1440×2560 px
英寸
1080×1920
px
OPPO Find 7 OPPO N1
5英寸
720×1280 px
5英寸
720×1280 px
OPPO R3 OPPO N1 Mini
5英寸
1080×1920 px
英寸
720×1280 px
小米M4 小米红米Note
5英寸 1080×1920 px
英寸 720×1280 px
小米M3 小米红米1S
小米M3S
5英寸
1080×1920 px
英寸
720×1280 px
小米M2S
5英寸
1080×1920 px
英寸
1080×1920
px
华为荣耀6 锤子T1
英寸 1440×2560 px
英寸
1080×1920
px
LG G3
OnePlus One
主流阅读器的界面参数与份额
市场份额
(国内浮动)
阅读器 状态栏 菜单栏 滚动条
22 px〔浮动出现〕
60 px 15 px 42.1%
Chrome 阅读器
20 px 132 px 15 px 1%
火狐阅读器
24 px 120 px 15 px 34%
IE阅读器
24 px 140 px 15 px 28%
360 阅读器
24 px 147 px 15 px 1%
遨游阅读器
25 px 163 px 15 px 3.8%
搜狗阅读器
系统分辨率统计
分辨率
1920×1080
占有率 分辨率
1366×768
占有率
13.8% 10.2%
360×640
7.9%
1440×900
7.7%
720×1280
6.4%
1024×768
5.1%
320×568
3.7%
1600×900
3.5%
1080×1920
3.3%
375×667
3.2%
2024年2月15日发(作者:厉怜南)
UI设计标准:IOS、Android系统主流尺寸整理
iPhone界面尺寸
设备 分辨率 状态栏高度
导航栏高度 标签栏高度
PPI
1242×2208 px 401PPI 60px 132px 146px
iPhone6P、6SP、7P
750×1334 px 326PPI 40px 88px 98px
iPhone6 - 6S - 7
640×1136 px 326PPI 40px 88px 98px
iPhone5 - 5C - 5S
640×960 px 326PPI 40px 88px 98px
iPhone4 - 4S
iPhone & iPod Touch
第一代、第二代、第三代
320×480 px 163PPI 20px 44px 49px
iPhone图标尺寸:
设备
App Store
程序应用 主屏幕 Spotlight搜索 标签栏 工具栏和导航栏
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的设计尺寸
设备 尺寸 分辨率 状态栏高度 导航栏高度 标签栏高度
iPad 3 - 4 - 5 - 6 –
Air - Air2 - mini2
2048×1536 px 264PPI 40px 88px 98px
1024×768 px 132PPI 20px 44px 49px
iPad 1 - 2
1024×768 px 163PPI 20px 44px 49px
iPad Mini
iPad图标尺寸:
工具栏
导航栏
设备 App Store 程序应用 主屏幕 Spotlight搜索 标签栏
iPad 3 - 4 - 5 - 6 - Air - Air2 -
mini2
1024×1024 px
180×180
px
144×144
px
100×100
px
50×50
px
44×44
px
1024×1024 px
90×90
px
72×72
px
50×50 px
25×25
px
22×22
px
iPad 1 - 2
1024×1024 px
90×90
px
72×72
px
50×50 px
25×25
px
22×22
px
iPad Mini
Android SDK模拟机的尺寸
屏幕大小
小屏幕
低密度〔120〕 中等密度〔160〕 高密度〔240〕 超高密度〔320〕
QVGA〔240×320〕
480×640
普通屏幕
WQVGA400〔240×400〕
WQVGA432〔240×432〕
WVGA800 *〔480×800〕
WVGA854 *〔480×854〕
HVGA〔320×480〕
WVGA800〔480×800〕
WVGA854〔480×854〕
600×1024
640×960
大屏幕
WVGA800 *〔480×800〕
WVGA854 *〔480×854〕
600x1024
超大屏幕
1024×600
1024×768
1280×768WXGA〔1280×800〕
1536×1152 1920×1152
1920×1200
2048×1536
2560×1600
Android的图标尺寸
系统通知图标
(白色) 屏幕大小
320×480 px
480×800px
480×854px
540×960px
720×1280 px
1080×1920 px
启动图标 操作栏图标 上下文图标 最细笔画
48×48 px 32×32 px 16×16 px 24×24 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
144×144 px 96×96 px 48×48 px 72×72 px 不小于6 px
Android安卓系统dp/sp/px换算表
名称
idpi
分辨率
比率 rate
(针对320px)
比率 rate
(针对640px)
比率 rate
(针对750px)
240×320
mdpi
hdpi
xhdpi
xxhdpi
320×480 1
480×800
720×1280
1080×1920
主流Android手机分辨率和尺寸
设备 分辨率 尺寸 设备 分辨率 尺寸
英寸 800×1280 px
英寸
1080×1280
px
魅族MX2
魅族MX3
英寸
1152×1920 px
英寸
魅族MX4
魅族MX4 Pro未上市
1536×2560
px
英寸
1440×2560 px
英寸
1080×1920
px
三星GALAXY Note 4 三星GALAXY Note 3
英寸 1080×1920 px
英寸 720×1280 px
三星GALAXY S5 三星GALAXY Note II
英寸 1080×1920 px
英寸
1080×1920
px
索尼Xperia Z3
索尼XL39h
英寸
720×1280 px
英寸
1080×1920
px
HTC Desire 820 HTC One M8
英寸
1440×2560 px
英寸
1080×1920
px
OPPO Find 7 OPPO N1
5英寸
720×1280 px
5英寸
720×1280 px
OPPO R3 OPPO N1 Mini
5英寸
1080×1920 px
英寸
720×1280 px
小米M4 小米红米Note
5英寸 1080×1920 px
英寸 720×1280 px
小米M3 小米红米1S
小米M3S
5英寸
1080×1920 px
英寸
720×1280 px
小米M2S
5英寸
1080×1920 px
英寸
1080×1920
px
华为荣耀6 锤子T1
英寸 1440×2560 px
英寸
1080×1920
px
LG G3
OnePlus One
主流阅读器的界面参数与份额
市场份额
(国内浮动)
阅读器 状态栏 菜单栏 滚动条
22 px〔浮动出现〕
60 px 15 px 42.1%
Chrome 阅读器
20 px 132 px 15 px 1%
火狐阅读器
24 px 120 px 15 px 34%
IE阅读器
24 px 140 px 15 px 28%
360 阅读器
24 px 147 px 15 px 1%
遨游阅读器
25 px 163 px 15 px 3.8%
搜狗阅读器
系统分辨率统计
分辨率
1920×1080
占有率 分辨率
1366×768
占有率
13.8% 10.2%
360×640
7.9%
1440×900
7.7%
720×1280
6.4%
1024×768
5.1%
320×568
3.7%
1600×900
3.5%
1080×1920
3.3%
375×667
3.2%