ui设计师必备,当下ui设计尺寸规范建议收藏

〜越努力，越幸福〜
〜只打造年薪20W全能UI设计师〜

iPhone界面尺寸

设备
分辨率
状态栏高度
导航栏高度
标签栏（工具栏）高度
iPhone6 plus设计版
1242×2208
60像素
132像素
146像素

iPhone6 plus物理版
1080×1920
54像素
132像素
146像素

iPhone 6
750×1334
40像素
88像素
98像素（88像素）
iPhone 5S
640×1136
40像素
88像素
98像素（88像素）
iPhone 5C
640×1136
40像素
88像素
98像素（88像素）
iphone 5
640×1136
40像素
88像素
98像素（88像素）
iPhone4s
640×960
40像素
88像素
98像素（88像素）
iPhone4
640×960
40像素
88像素
98像素（88像素）


iPhone图标尺寸



系统
分辨率
圆角大小
iOS 6-
90像素– 1024像素
大约图标宽度×0.175
iOS 7以上
90像素– 1024像素
大约图标宽度×0.225

资产
iPhone 6 Plus（@ 3x）
iPhone 6和iPhone 5（@ 2x）
iPhone 4s（@ 2x）
iPad和iPad mini（@ 2x）
iPad 2和iPad mini（@ 1x）
应用程序图标
（所有应用程序都需要）
180×180
120×120
120×120
152×152
76×76
App Store的应用程序图标
（所有应用程序都需要）
1024×1024
1024×1024
1024×1024
1024×1024
1024×1024
启动文件或图像
（所有应用程序都需要）
使用启动文件
（请参阅启动图像）
对于iPhone 6，请使用启动文件
（请参阅启动图像）
对于iPhone 5，请使用640×1136
640×960
1536×2048（人像）
2048×1536（风景）
768×1024（人像）
1024×768（风景）
Spotlight搜索结果图标
（推荐）
120×120
80×80
80×80
80×80
40×40
设置图标
（推荐）
87×87
58×58
58×58
58×58
29×29
工具栏和导航栏图标
（可选）
约66×66
约44×44
约44×44
约44×44
约22×22
标签栏图标
（可选）
约75×75
（最大144×96）
约50×50
（最大96×64）
约50×50
（最大96×64）
约50×50
（最大96×64）
约25×25
（最大：48×32）
App Store的默认报亭封面图标
（报亭应用需要）
最长边缘上至少1024个像素
最长边缘上至少1024个像素
最长边缘上至少1024个像素
最长边缘上至少1024个像素
最长边缘上至少512像素
Web剪辑图标
（推荐用于Web应用程序和网站）
180×180
120×120
120×120
152×152
76×76


iPad界面尺寸

设备
分辨率
状态栏高度
导航栏高度
标签栏高度
iPad6 / iPad Air2
2048×1536
40像素
88像素
98像素
iPad5 / iPad Air / ipad mini 2
2048×1536
40像素
88像素
98像素
iPad4 / ipad mini
2048×1536
40像素
88像素
98像素
iPad3 /新iPad
2048×1536
40像素
88像素
98像素
iPad2
1024×768
20像素
44像素
49像素
iPad1
1024×768
20像素
44像素
49像素
小型平板电脑
1024×768
20像素
44像素
49像素


iPad图标尺寸

系统
分辨率
圆角大小
iOS 6-
90像素– 1024像素
大约图标宽度×0.175
iOS 7以上
90像素– 1024像素
大约图标宽度×0.225

资产
iPhone 6 Plus（@ 3x）
iPhone 6和iPhone 5（@ 2x）
iPhone 4s（@ 2x）
iPad和iPad mini（@ 2x）
iPad 2和iPad mini（@ 1x）
应用程序图标
（所有应用程序都需要）
180×180
120×120
120×120
152×152
76×76
App Store的应用程序图标
（所有应用程序都需要）
1024×1024
1024×1024
1024×1024
1024×1024
1024×1024
启动文件或图像
（所有应用程序都需要）
使用启动文件
（请参阅启动图像）
对于iPhone 6，请使用启动文件
（请参阅启动图像）
对于iPhone 5，请使用640×1136
640×960
1536×2048（人像）
2048×1536（风景）
768×1024（人像）
1024×768（风景）
Spotlight搜索结果图标
（推荐）
120×120
80×80
80×80
80×80
40×40
设置图标
（推荐）
87×87
58×58
58×58
58×58
29×29
工具栏和导航栏图标
（可选）
约66×66
约44×44
约44×44
约44×44
约22×22
标签栏图标
（可选）
约75×75
（最大144×96）
约50×50
（最大96×64）
约50×50
（最大96×64）
约50×50
（最大96×64）
约25×25
（最大：48×32）
App Store的默认报亭封面图标
（报亭应用需要）
最长边缘上至少1024个像素
最长边缘上至少1024个像素
最长边缘上至少1024个像素
最长边缘上至少1024个像素
最长边缘上至少512像素
Web剪辑图标
（推荐用于Web应用程序和网站）
180×180
120×120
120×120
152×152
76×76

Android的设计尺寸屏幕尺寸



指实际的物理尺寸，为屏幕对角线的测量。
为了简单起见，Android把实际屏幕尺寸分为四个广义的大小：小，正常，大，特大。

曝光（PX）



代表屏幕上一个物理的预期点代表屏幕上一个物理的预期点。
屏幕密度
为解决Android设备碎片化，约会一个概念DP，也就是密度。指在一定尺寸的物理屏幕上显示其的数量，通常指分辨率。为了简单起见，Android把屏幕密度分为了四个广义的大小：低（120dpi），中（160dpi），高（240dpi）和超高（320dpi）代表= DP *（DPI / 160）例如，在一个240dpi的屏幕里，1DP等于1.5PX。
于设计而言，拾取一个合适的尺寸作为正常尺寸和中等屏幕密度（尺寸的选择依据打算进行适当的硬件，建议参考现有主流硬件分辨率），然后向下和向上做小，大，特大和低，高，超高的尺寸与密度。

典型的设计尺寸



•320dp：一个普通的手机屏幕（240X320，320×480，480X800）
•480dp：一个中间平板电脑像（480×800）
•600dp：7寸平板电脑（600×1024）
•720dp：10寸平板电脑（ 720×1280，800×1280）

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

名称
分辨率
比率rate（针对320px）
比率rate（针对640像素）
比率rate（针对750像素）
分辨率
240×320
0.75
0.375
0.32
分辨率
320×480
1个
0.5
0.4267
分辨率
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手机分辨率和尺寸

设备
分辨率
尺寸
设备
分辨率
尺寸
三星Galaxy S3
4.8英寸
720×1280
三星Galaxy S4
5英寸
1080×1920
三星Galaxy S5
5.1英寸
1080×1920
三星Galaxy S6
4.5英寸
1200×1920
小米1
4英寸
480×854
小米1s
4英寸
480×854
小米2
4.3英寸
720×1280
小米2s
4.3英寸
720×1280
小米3
5英寸
1080×1920
小米3s（概念）
5英寸
1080×1920
小米4
5英寸
1080×1920
红米
4.7英寸
720×1280
红米注意
5.5英寸
720×1280



OPPO Find 7
5.5英寸
1440×2560
OPPO Find 7轻装版
5.5英寸
1080×1920
OPPO N1 mini
5英寸
720×1280
OPPO R3
5英寸
720×1280
OPPO R1S
5英寸
720×1280



锤子Smartisan T1
4.95英寸
1080×1920



华为Ascend P7
5英寸
1080×1920
华为Ascend Mate7
6英寸
1080×1920
华为荣耀6
5英寸
1080×1920
华为Ascend Mate2
6.1英寸
720×1280
华为C199
5.5英寸
720×1280



HTC One（M8）
5英寸
1080×1920
HTC Desire 820
5.5英寸
720×1280
魅族MEIZU MX4
5.36英寸
1152×1920
魅族MEIZU MX3
5.1英寸
1080×1800

网站的设计尺寸


Windows XP任务栏的高度30px   Windows 7任务栏的高度40px

主流浏览器的界面参数

浏览器
状态栏
菜单栏
滚动条
Chrome浏览器
22px（浮动出现）
60像素
15像素
火狐浏览器
状态栏高度
导航栏高度
标签栏高度
IE浏览器
状态栏高度
导航栏高度
标签栏高度
360浏览器
状态栏高度
导航栏高度
标签栏高度

系统分辨率统计



安全分辨率为1024×768像素   可建议大分辨率为1280×800 px
综合分辨率及浏览器下的统计数据

网页宽度与首屏高度
安全宽度1002 px   可建议拉伸宽度1258 px
Window XP首屏大小580 px   Window 7首屏大小710 px



分享 :