点滴进步，只为明天更好
目录：
一、 Android 的设计尺寸
1. 屏幕尺寸
2. 像素（PX）
3. 屏幕密度
4. 典型的设计尺寸
5. Android 安卓系统 dp/sp/px 换算表
6. iPhone 分辨率和显示屏规格
二、 iPhone、iPad 分辨率和显示屏规格
1. ICON 规格
2. iPad ICON 规格
3. iPhone ICON 规格
4. iPhone6+缩减像素取样
5. iPad 分辨率和显示屏规格
6. iPhone 分辨率和显示屏规格
三、 Web 的设计尺寸
1. 网页宽度与首屏高度:
2. 主流浏览器的界面参数:
3. 最新网名网页浏览设备分辨率统计
四、 UI 设计常用软件
五、 UI 设计原则
Android
Android 的设计尺寸
1. 屏幕尺寸
指实际的物理尺寸，为屏幕对角线的测量。
为了简单起见，Android 把实际屏幕尺寸分为四个广义的大小：小，正常，大，特大。
2. 像素（PX）
代表屏幕上一个物理的像素点代表屏幕上一个物理的像素点。
3. 屏幕密度
为解决 Android 设备碎片化，引入一个概念 DP，也就是密度。指在一定尺寸的物理屏幕上显示像素的数量，通常指分辨
率。为了简单起见，Android 把屏幕密度分为了四个广义的大小：低（120dpi）、中（160dpi）、高（240dpi）和超高
（320dpi）像素= DP * （ DPI / 160 ) 例如，在一个 240dpi 的屏幕里，1DP 等于 1.5PX。
于设计来说，选取一个合适的尺寸作为正常大小和中等屏幕密度（尺寸的选取依据打算适配的硬件，建议参考现主流硬件分
辨率），然后向下和向上 做小、大、特大和低、高、超高的尺寸与密度。
4. 典型的设计尺寸
• 320dp：一个普通的手机屏幕（240X320，320×480，480X800）
• 480dp：一个中间平板电脑像（480×800）
• 600dp：7 寸平板电脑（600x1024）
• 720dp：10 寸平板电脑（720x1280，800x1280）
5. Android 安卓系统 dp/sp/px 换算表
换算表
换算表
6. iPhone 分辨率和显示屏规格
分辨率和规格
设备 尺寸 分辨率 设备 尺寸 分辨率
三星 Galaxy S3 4.8 英寸 720 × 1280 三星 Galaxy S4 5 英寸1080 ×
1920
三星 Galaxy S5 5.1 英寸1080 ×
三星 Galaxy S6 4.5 英寸1200 ×
1920 1920
小米 1 4 英寸 480 × 854 小米 1s 4 英寸 480 × 854
小米 2 4.3 英寸 720 × 1280 小米 2s 4.3 英寸 720 × 1280
小米 3 5 英寸1080 ×
小米 3s(概念) 5 英寸1080 ×
1920 1920
小米 4 5 英寸1080 ×
红米 4.7 英寸 720 × 12801920
红米 Note 5.5 英寸 720 × 1280
OPPO Find 7 5.5 英寸1440 ×
OPPO Find 7 轻装版 5.5 英寸1080 ×
2560 1920
OPPO N1 mini 5 英寸 720 × 1280 OPPO R3 5 英寸 720 × 1280
OPPO R1S 5 英寸 720 × 1280
华为 Ascend P7 5 英寸1080 ×
华为 Ascend Mate7 6 英寸1080 ×
1920 1920
华为 荣耀 6 5 英寸1080 ×
华为 Ascend Mate2 6.1 英寸 720 × 12801920
华为 C199 5.5 英寸 720 × 1280
HTC One (M8) 约 66 x 66 约 44 x 44 HTC Desire 820 5.5 英寸 720 × 1280
魅族 MEIZU MX4 5 英寸1080 ×
1920
锤子 Smartisan T1 4.95 英寸1080 ×
魅族 MEIZU MX3 5.1 英寸1080 ×
1920 1800
点滴进步，只为明天更好
ipone
iPhone、iPad 分辨率和显示屏规格
分辨率和规格
设备 分辨率 状态栏高度 导航栏高度 标签栏(工具栏)高度
iPhone6 plus 设计版 1242 × 2208 60px 132px 147px
iPhone6 plus 物理版 1080 × 1920 54px 132px 147pxiPhone6 750 × 1334 40px 88px 98px(88px)
iPhone5s 640 × 1136 40px 88px 98px(88px)iPhone5c 640 × 1136 40px 88px 98px(88px)
iPhone5 640 × 1136 40px 88px 98px(88px)iPhone4s 640 × 960 40px 88px 98px(88px)
iPhone4 640 × 960 40px 88px 98px(88px)iPad 1024 × 768 20px 44px 49px(44px)
iPad(@2x) 2048 × 1536 40px 88px 98px(88px)
1. iPhone 分辨率和显示屏规格
iPhone 分辨率和显示屏规格
2. iPad 分辨率和显示屏规格
Pad 分辨率和显示屏规格
3. iPhone6+缩减像素取样
在 iOS 上渲染像素和物理像素（physical pixels）是等同的，只有一个例外：iPhone 6 Plus 的 Retina HD 显示屏。
由于它屏幕的像素分辨率要低于一个常规的@3x 分辨率，所以被渲染内容会自动调整为原始尺寸的 87%（从 2208*1242像素来适应为 1920*1082 像素的显示屏分辨率）
iPhone6+缩减像素取样
4. ICON 规格
ICON 规格1
ICON 规格2
iPhone 6iPhone 6 and iPhone
iPad and iPad iPad 2 and iPad描述 iPhone 4s /4/iPod
Plus （@3x） mini（@2x） mini （@1x）5 （@2x） touch（@2x）
应用程序图标（应用180 x 180 120 x 120 120 x 120 152 x 152 76 x 76
程序所需的所有）
为 App Store（应用
程序所需的所有应 1024 x 1024 1024 x 1024 1024 x 1024 1024 x 1024 1024 x 1024
用程序图标）
设计版： 1242 × iPhone 6: 750 1536 x 2048
启动影像（所有的应 2208 × 1334640 x 960
(纵向) 768 x 1024 (纵向)
用程序所需的） 物理版： 1080 × iPhone 5: 640 2048 x 1536 1024 x 768 (横向)
1920 x 1136 (横向)
Spotlight 搜索结果120 x 120 80 x 80 80 x 80 80 x 80 40 x 40
图标（推荐）
设置图标（推荐） 87 x 87 58 x 58 58 x 58 58 x 58 29 x 29
工具栏和导航栏图 约 66 x 66 约 44 x 44 约 44 x 44 约 44 x 44 约 22 x 22
点滴进步，只为明天更好
iPhone 6iPhone 6 and iPhone
iPad and iPad iPad 2 and iPad描述 iPhone 4s /4/iPod
Plus （@3x） mini（@2x） mini （@1x）5 （@2x） touch（@2x）
标（可选）
About 75 x 75约 50 x 50 (最 约 50 x 50 (最
约 50 x 50约 25 x 25 (最大:
标签栏图标（可选） (maximum: 144 x (maxi 最 大大: 96 x 64) 大: 96 x 64) 48 x 32)
96) mum: 96 x 64)
默 认 报 刊 亭 盖 为至少为 1024 像素 至 少 为 1024 至 少 为 1024 至少为 1024 至少为 512 像素
App Store 图标（书的最长边 像素的最长边 像素的最长边 像素的最长边 的最长边
报亭应用程序所需）
网页剪辑图标（推荐
的 Web 应用程序和 180 x 180 120 x 120 120 x 120 152 x 152 76 x 76
网站）
5. iPhone ICON 规格
iPhone ICON 规格
6. iPad ICON 规格
iPad ICON 规格
Web 的设计尺寸
Windows XP 任务栏的高度 30px Windows 7 任务栏的高度 40px
1. 主流浏览器的界面参数:
主流浏览器的界面参数
2. 最新网名网页浏览设备分辨率统计
最新网名网页浏览设备分辨率统
3. 网页宽度与首屏高度:
安全宽度 1002 px 可建议较大宽度 1258 px
Window XP 首屏大小 580 px Window 7 首屏大小 710 px
网页宽度与首屏高度
点滴进步，只为明天更好
UI 设计常用软件
UI 设计常用软件
UI设计原则
点滴进步，只为明天更好