屏幕尺寸大全和设计尺寸规范
smartphone 设备名称
|
操作系统 | 尺寸 in | PPI | 纵横比 | 宽 x 高 dp | 宽 x 高 px | 密度 dpi |
---|---|---|---|---|---|---|---|
iPhone X | iOS | 5.8 | 458 | 19 : 9 | 375 x 812 | 1125 x 2436 | 3.0 xxhdpi |
iPhone 8+ (8+, 7+, 6S+, 6+) | iOS | 5.5 | 401 | 16 : 9 | 414 x 736 | 1242 x 2208 | 3.0 xxhdpi |
iPhone 8 (8, 7, 6S, 6) | iOS | 4.7 | 326 | 16 : 9 | 375 x 667 | 750 x 1334 | 2.0 xhdpi |
iPhone SE(SE, 5S, 5C) | iOS | 4.0 | 326 | 16 : 9 | 320 x 568 | 640 x 1136 | 2.0 xhdpi |
Android One | Android | 4.5 | 218 | 16 : 9 | 320 x 569 | 480 x 854 | 1.5 hdpi |
Google Pixel | Android | 5.0 | 441 | 16 : 9 | 411 x 731 | 1080 x 1920 | 2.6 xxhdpi |
Google Pixel XL | Android | 5.5 | 534 | 16 : 9 | 411 x 731 | 1440 x 2560 | 3.5 xxxhdpi |
Moto X | Android | 4.7 | 312 | 16 : 9 | 360 x 640 | 720 x 1280 | 2.0 xhdpi |
Moto X 二代 | Android | 5.2 | 424 | 16 : 9 | 360 x 640 | 1080 x 1920 | 3.0 xxhdpi |
Nexus 5 | Android | 5.0 | 445 | 16 : 9 | 360 x 640 | 1080 x 1920 | 3.0 xxhdpi |
Nexus 5X | Android | 5.2 | 565 | 16 : 9 | 411 x 731 | 1080 x 1920 | 2.6 xxhdpi |
Nexus 6 | Android | 6.0 | 493 | 16 : 9 | 411 x 731 | 1440 x 2560 | 3.5 xxxhdpi |
Nexus 6P | Android | 5.7 | 518 | 16 : 9 | 411 x 731 | 1440 x 2560 | 3.5 xxxhdpi |
Samsung Galaxy S8 | Android | 5.8 | 570 | 18.5 : 9 | 360 x 740 | 1440 x 2960 | 4.0 xxxhdpi |
Samsung Galaxy S8+ | Android | 6.2 | 529 | 18.5 : 9 | 360 x 740 | 1440 x 2960 | 4.0 xxxhdpi |
Samsung Galaxy Note 4 | Android | 5.7 | 515 | 16 : 9 | 480 x 853 | 1440 x 2560 | 3.0 xxhdpi |
Samsung Galaxy Note 5 | Android | 5.7 | 518 | 16 : 9 | 480 x 853 | 1440 x 2560 | 3.0 xxhdpi |
Samsung Galaxy S5 | Android | 5.1 | 432 | 16 : 9 | 360 x 640 | 1080 x 1920 | 3.0 xxhdpi |
Samsung Galaxy S7 (S7, S6, S6 Edge) | Android | 5.1 | 576 | 16 : 9 | 360 x 640 | 1440 x 2560 | 4.0 xxxhdpi |
Samsung Galaxy S7 Edge | Android | 5.5 | 534 | 16 : 9 | 360 x 640 | 1440 x 2560 | 4.0 xxxhdpi |
Smartisan T2 | Android | 4.95 | 445 | 16 : 9 | 360 x 640 | 1080 x 1920 | 3.0 xxhdpi |
Smartisan M1 | Android | 5.15 | 428 | 16 : 9 | 360 x 640 | 1080 x 1920 | 3.0 xxhdpi |
Smartisan M1L | Android | 5.7 | 515 | 16 : 9 | 480 x 853 | 1440 x 2560 | 3.0 xxhdpi |
坚果 Pro | Android | 5.5 | 403 | 16 : 9 | 360 x 640 | 1080 x 1920 | 3.0 xxhdpi |
OnePlus 5 | Android | 5.5 | 401 | 16 : 9 | 360 x 640 | 1080 x 1920 | 3.0 xxhdpi |
OnePlus 3T | Android | 5.5 | 401 | 16 : 9 | 360 x 640 | 1080 x 1920 | 3.0 xxhdpi |
Oppo R9s (R9s, R11) | Android | 5.5 | 401 | 16 : 9 | 360 x 640 | 1080 x 1920 | 3.0 xxhdpi |
Oppo R9s Plus (R9s Plus, R11 Plus) | Android | 6.0 | 368 | 16 : 9 | 360 x 640 | 1080 x 1920 | 3.0 xxhdpi |
Oppo A57 | Android | 5.2 | 282 | 16 : 9 | 360 x 640 | 720 x 1280 | 2.0 xhdpi |
Oppo A59s | Android | 5.5 | 267 | 16 : 9 | 360 x 640 | 720 x 1280 | 2.0 xhdpi |
Oppo A37 | Android | 5.0 | 293 | 16 : 9 | 360 x 640 | 720 x 1280 | 2.0 xhdpi |
小米MIX2 | Android | 5.99 | 403 | 18 : 9 | 360 x 720 | 1080 x 2160 | 3.0 xxhdpi |
小米MIX | Android | 6.4 | 362 | 17 : 9 | 360 x 680 | 1080 x 2040 | 3.0 xxhdpi |
小米Note 3 | Android | 5.5 | 403 | 16 : 9 | 360 x 640 | 1080 x 1920 | 3.0 xxhdpi |
小米Note 2 | Android | 5.7 | 386 | 16 : 9 | 360 x 640 | 1080 x 1920 | 3.0 xxhdpi |
小米6 | Android | 5.15 | 428 | 16 : 9 | 360 x 640 | 1080 x 1920 | 3.0 xxhdpi |
小米5s | Android | 5.15 | 428 | 16 : 9 | 360 x 640 | 1080 x 1920 | 3.0 xxhdpi |
小米5s Plus | Android | 5.7 | 386 | 16 : 9 | 360 x 640 | 1080 x 1920 | 3.0 xxhdpi |
小米Max | Android | 6.44 | 342 | 16 : 9 | 360 x 640 | 1080 x 1920 | 3.0 xxhdpi |
红米Note 4 (4, Note 4X) | Android | 5.5 | 403 | 16 : 9 | 360 x 640 | 1080 x 1920 | 3.0 xxhdpi |
红米 4 (4, 4X) | Android | 5.0 | 296 | 16 : 9 | 360 x 640 | 720 x 1280 | 2.0 xhdpi |
Vivo X9 (X9, X9s) | Android | 5.5 | 401 | 16 : 9 | 360 x 640 | 1080 x 1920 | 3.0 xxhdpi |
Vivo X9 Plus (X9 Plus, X9s Plus) | Android | 5.88 | 375 | 16 : 9 | 360 x 640 | 1080 x 1920 | 3.0 xxhdpi |
HUAWEI P10 | Android | 5.1 | 432 | 16 : 9 | 360 x 640 | 1080 x 1920 | 3.0 xxhdpi |
HUAWEI P10 Plus | Android | 5.5 | 540 | 16 : 9 | 360 x 640 | 1440 x 2560 | 4.0 xxxhdpi |
iOS Design Guidelines
字体(默认) Typography
中文字体:PingFang SC
英文字体:SF UI Text 、SF UI Display
其中SF UI Text适用与小于19pt的文字,SF UI Display适用于大于20pt的文字
元素 | 字重 | 字号(pt) | 行距 | 字间距 |
---|---|---|---|---|
Title 1 | Light | 28pt | 34pt | 13pt |
Title 2 | Regular | 22pt | 28pt | 16pt |
Title 3 | Regular | 20pt | 24pt | 19pt |
Headline | Semi-Bold | 17pt | 22pt | -24pt |
Body | Regular | 17pt | 22pt | -24pt |
Callout | Regular | 16pt | 21pt | -20pt |
Subhead | Regular | 15pt | 20pt | -16pt |
Footnote | Regular | 13pt | 18pt | -6pt |
Caption 1 | Regular | 12pt | 16pt | 0pt |
Caption 2 | Regular | 11pt | 13pt | 6pt |
元素 | 字号(pt) | 字重 | 字距(pt) | 类型 |
---|---|---|---|---|
Nav Bar Title | 17 | Medium | 0.5 | Display |
Nav Bar Button | 17 | Regular | 0.5 | Display |
Search Bar | 13.5 | Regular | 0 | Text |
Tab Bar Button | 10 | Regular | 0.1 | Text |
Table Header | 12.5 | Regular | 0.25 | Text |
Table Row | 16.5 | Regular | 0 | Text |
Table Row Subline | 12 | Regular | 0 | Text |
Table Footer | 12.5 | Regular | 0.2 | Text |
Action Sheets | 20 | Regular / Medium | 0.5 | Display |
点和像素 Points and Pixels

图标 Icon
应用图标 App Icon

设备名称 | 应用图标 | App Store图标 | Spotlight图标 | 设置图标 |
---|---|---|---|---|
iPhone X, 8+, 7+, 6s+, 6s | 180 x 180 px | 1024 x 1024 px | 120 x 120 px | 87 x 87 px |
iPhone X, 8, 7, 6s, 6, SE,5s, 5c, 5, 4s, 4 |
120 x 120 px | 1024 x 1024 px | 80 x 80 px | 58 x 58 px |
iPhone 1, 3G, 3GS | 57 x 57 px | 1024 x 1024 px | 29 x 29 px | 29 x 29 px |
iPad Pro 12.9, 10.5 | 167 x 167 px | 1024 x 1024 px | 80 x 80 px | 58 x 58 px |
iPad Air 1 & 2, Mini 2 & 4, 3 & 4 |
152 x 152 px | 1024 x 1024 px | 80 x 80 px | 58 x 58 px |
iPad 1, 2, Mini 1 | 76 x 76 px px | 1024 x 1024 px | 40 x 40 px | 29 x 29 px |
自定义图标 Custom Icons
设备名称 | 导航栏和工具栏图标尺寸 | 标签栏图标尺寸 |
---|---|---|
iPhone 8+, 7+, 6+, 6s+ | 66 x 66 px | 75 x 75 px 最大144 x 96 px |
iPhone 8, 7, 6s, 6, SE | 44 x 44 px | 50 x 50 px 最大96 x 64 px |
iPad Pro, iPad, iPad mini | 44 x 44 px | 50 x 50 px 最大96 x 64 px |
分辨率和显示规格 Resolutions and Display
设备名称 | 屏幕尺寸 | PPI | Asset | 竖屏点(point) | 竖屏分辨率(px) |
---|---|---|---|---|---|
iPhone X | 5.8 in | 458 | @3x | 375 x 812 | 1125 x 2436 |
iPhone 8+, 7+, 6s+, 6+ | 5.5 in | 401 | @3x | 414 x 736 | 1242 x 2208 |
iPhone 8, 7, 6s, 6 | 4.7 in | 326 | @2x | 375 x 667 | 750 x 1334 |
iPhone SE, 5, 5S, 5C | 4.0 in | 326 | @2x | 320 x 568 | 640 x 1136 |
iPhone 4, 4S | 3.5 in | 326 | @2x | 320 x 480 | 640 x 960 |
iPhone 1, 3G, 3GS | 3.5 in | 163 | @1x | 320 x 480 | 320 x 480 |
iPad Pro 12.9 | 12.9 in | 264 | @2x | 1024 x 1366 | 2048 x 2732 |
iPad Pro 10.5 | 10.5 in | 264 | @2x | 834 x 1112 | 1668 x 2224 |
iPad Pro, iPad Air 2, Retina iPad | 9.7 in | 264 | @2x | 768 x 1024 | 1536 x 2048 |
iPad Mini 4, iPad Mini 2 | 7.9 in | 326 | @2x | 768 x 1024 | 1536 x 2048 |
iPad 1, 2 | 9.7 in | 132 | @1x | 768 x 1024 | 768 x 1024 |
配色

UI组件布局 UI Element Layout
状态栏 Status Bar

导航栏 Navigation Bar

搜索栏 Search Bar

标签栏 Tab Bar

表格视图 Table View

Modals

行为区 Actions

提示框 Alerts

Segment Controls

滑动条 Sliders

切换按钮 Switch

计步器 Stepper

字体 Typography
中文字体:Source Han Sans / Noto
英文字体:Roboto
元素 | 字重 | 字号 | 行距 | 字间距 |
---|---|---|---|---|
App bar | Medium | 20sp | - | - |
Buttons | Medium | 15sp | - | 10 |
Headline | Regular | 24sp | 34dp | 0 |
Title | Medium | 21sp | - | 5 |
Subheading | Regular | 17sp | 30dp | 10 |
Body 1 | Regular | 15sp | 23dp | 10 |
Body 2 | Bold | 15sp | 26dp | 10 |
Caption | Regular | 13sp | - | 20 |
图标 icons
图标用途 | mdpi (160dpi) | hdpi (240dpi) | xhdpi (320dpi) | xxhdpi (480dpi) | xxxhdpi (640dpi) |
---|---|---|---|---|---|
应用图标 | 48 x 48 px | 72 x 72 px | 96 x 96 px | 144 x 144 px | 192 x 192 px |
系统图标 | 24 x 24 px | 36 x 36 px | 48 x 48 px | 72 x 72 px | 196 x 196 px |
应用图标 Product icons
-
高度:152dp 宽度:152dp
-
直径:176dp
-
高度:176dp 宽度:128dp
-
高度:128dp 宽度:176dp
系统图标 System icons
-
高度:18dp 宽度:18dp
-
直径:20dp
-
高度:20dp 宽度:16dp
-
高度:16dp 宽度:20dp
快捷图标 Shortcut icon
-
高度:44dp 宽度:44dp
-
高度:48dp 宽度:48dp
-
高度:24dp 宽度:24dp
-
剩余高度:24dp
剩余宽度:24dp
单位和度量 Units and measurements
dpi =屏幕宽度(或高度)像素 / 屏幕宽度(或高度)英寸
dp =(宽度像素 x 160)/ dpi
dp =(宽度像素 x 160)/ dpi
名称 | 分辨率 px | dpi | 像素比 | 示例 dp | 对应像素 |
---|---|---|---|---|---|
xxxhdpi | 2160 x 3840 | 640 | 4.0 | 48dp | 192px |
xxhdpi | 1080 x 1920 | 480 | 3.0 | 48dp | 144px |
xhdpi | 720 x 1280 | 320 | 2.0 | 48dp | 96px |
hdpi | 480 x 800 | 240 | 1.5 | 48dp | 72px |
mdpi | 320 x 480 | 160 | 1.0 | 48dp | 48px |
UI组件布局 Element Layout
列表 List
-
边框左右外边距各16dp
带有图标或者头像的内容有 72dp 的左边距。
-
1. 状态栏:24dp
2. 工具栏:56dp
3. 子标题:48dp
4. 列表项:72dp
-
边框左右外边距各16dp
带有图标或者头像的内容有 72dp 的左边距。
-
1. 状态栏:24dp
2. 工具栏:56dp
3. 标题和列表项:48dp
4. 子标题:48dp
5. 内容区域间的距离:8dp
详情视图 Detail view
-
边框左右外边距各16dp
带有图标或者头像的内容有 72dp 的左边距。
右边图标的右边距为32dp
-
1. 状态栏:24dp
2. 工具栏:56dp
3. 内容区域间的距离:8dp
4. 列表项:72dp
-
边框左右外边距各16dp
带有图标或者头像的内容有 72dp 的左边距。
弹出菜单与右边框的距离为56dp
-
1. 列表项:48dp
2. 内容区域间的距离:8dp
3. 导航右边距:56dp
触控区域尺寸 Touch target size
-
图标:24dp
触控区:48dp
-
-
按钮高度:36dp
-
应用栏 App bar
-
应用栏左右内边距:16dp
应用栏图标上、下、左内边距:16dp
应用栏标题左内边距:72dp
应用栏标题下内边距:20dp
-
-
标题栏高度:80dp
标题栏底部内边距:8dp
描述区域高度:72dp
描述区底部内边距:16dp
https://uiiiuiii.com/screen/index.htm
评论