交互设计：界面尺寸设计大全
自从七月公开课开始以来，就有不少新加我们的小伙伴在问：
“老师，请教下web端原型图长宽一般设置成多少啊？”
“老师，web端的输入框一般设计的长宽是多少啊？”
下面，就把常见的原型设计中界面尺寸一次性分享给大家，希望能在小伙伴做原型设计时有所帮助。
手机界面尺寸
| 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 |
电脑界面尺寸
| laptop 设备名称 |
操作系统 |
尺寸 in |
PPI |
纵横比 |
宽 x 高 dp |
宽 x 高 px |
密度 dpi |
| MacBook |
OS X |
12.0 |
226 |
16 : 10 |
1280 x 800 |
2304 x 1440 |
2.0 xhdpi |
| MacBook Air 11 |
OS X |
11.6 |
135 |
16 : 9 |
1366 x 768 |
1366 x 768 |
1.0 mdpi |
| MacBook Air 13 |
OS X |
13.3 |
128 |
16 : 10 |
1440 x 900 |
1440 x 900 |
1.0 mdpi |
| MacBook Pro 13 |
OS X |
13.3 |
227 |
16 : 10 |
1280 x 800 |
2560 x 1600 |
2.0 xhdpi |
| MacBook Pro 15 |
OS X |
15.4 |
220 |
16 : 10 |
1440 x 900 |
2880 x 1800 |
2.0 xhdpi |
| iMac 21.5 |
OS X |
21.5 |
102 |
16 : 9 |
1920 x 1080 |
1920 x 1080 |
1.0 mdpi |
| iMac 21.5 4K |
OS X |
21.5 |
218 |
16 : 9 |
1920 x 1080 |
4096 x 2304 |
2.0 xhdpi |
| iMac 27 |
OS X |
27 |
109 |
16 : 9 |
2560 x 1440 |
2560 x 1440 |
1.0 mdpi |
| iMac 27 5K |
OS X |
27 |
218 |
16 : 9 |
2560 x 1440 |
5120 x 2880 |
2.0 xhdpi |
| Surface Book |
Windows |
13.5 |
267 |
3 : 2 |
1500 x 1000 |
3000 x 2000 |
2.0 xhdpi |
| Surface Pro |
Windows |
12.3 |
267 |
3 : 2 |
1368 x 912 |
2736 x 1824 |
2.0 xhdpi |
| Surface Laptop |
Windows |
13.5 |
201 |
3 : 2 |
1128 x 752 |
2256 x 1504 |
2.0 xhdpi |
| Surface Studio |
Windows |
28 |
192 |
3 : 2 |
2250 x 1500 |
4500 x 3000 |
2.0 xhdpi |
| Dell XPS 13 |
Windows |
13.3 |
276 |
16 : 9 |
1920 x 1080 |
3200 x 1800 |
1.5 hdpi |
| Dell XPS 15 |
Windows |
15.6 |
280 |
16 : 9 |
1920 x 1080 |
3840 x 2160 |
2.0 xhdpi |
| 小米笔记本Air 12.5 |
Windows |
12.5 |
176 |
16 : 9 |
1920 x 1080 |
1920 x 1080 |
1.0 mdpi |
| 小米笔记本Air 13.3 |
Windows |
13.3 |
166 |
16 : 9 |
1920 x 1080 |
1920 x 1080 |
1.0 mdpi |
| 小米笔记本Pro 15.6 |
Windows |
15.6 |
166 |
16 : 9 |
1920 x 1080 |
1920 x 1080 |
1.0 mdpi |
平板界面尺寸
| tablet 设备名称 |
操作系统 |
尺寸 in |
PPI |
纵横比 |
宽 x 高 dp |
宽 x 高 px |
密度 dpi |
| iPad mini 4 (mini 4, mini 2) |
iOS |
7.9 |
326 |
4 : 3 |
768 x 1024 |
1536 x 2048 |
2.0 xhdpi |
| iPad Air 2 (Air 2, Air) |
iOS |
9.7 |
264 |
4 : 3 |
768 x 1024 |
1536 x 2048 |
2.0 xhdpi |
| iPad Pro 9.7 |
iOS |
9.7 |
264 |
4 : 3 |
768 x 1024 |
1536 x 2048 |
2.0 xhdpi |
| iPad Pro 10.5 |
iOS |
10.5 |
264 |
4 : 3 |
834 x 1112 |
1668 x 2224 |
2.0 xhdpi |
| iPad Pro 12.9 |
iOS |
12.9 |
264 |
4 : 3 |
1024 x 1336 |
2048 x 2732 |
2.0 xhdpi |
| Google Pixel C |
Android |
10.2 |
308 |
4 : 3 |
900 x 1280 |
1800 x 2560 |
2.0 xhdpi |
| Nexus 9 |
Android |
8.9 |
288 |
4 : 3 |
768 x 1024 |
1536 x 2048 |
2.0 xhdpi |
| Surface 3 |
Windows |
10.8 |
214 |
16 : 9 |
720 x 1080 |
1080 x 1920 |
1.5 hdpi |
| 小米平板 2 |
Android |
7.9 |
326 |
16 : 9 |
768 x 1024 |
1536 x 2048 |
2.0 xhdpi |
显示器界面尺寸
| desktop_windows 设备名称 |
操作系统 |
尺寸 in |
PPI |
纵横比 |
宽 x 高 dp |
宽 x 高 px |
密度 dpi |
| Apple Thunderbolt Display |
- |
27 |
109 |
16 : 9 |
2560 x 1440 |
2560 x 1440 |
1.0 mdpi |
| Dell UltraSharp HD 5K |
- |
27 |
218 |
16 : 9 |
2560 x 1440 |
5120 x 2880 |
2.0 xhdpi |
| Dell UltraSharp U2515H |
- |
25 |
123 |
16 : 9 |
1280 x 720 |
2560 x 1440 |
2.0 xhdpi |
| Dell UltraSharp U2417H |
- |
23.8 |
92 |
16 : 9 |
1920 x 1080 |
1920 x 1080 |
1.0 mdpi |
| Dell UltraSharp U2717D |
- |
27 |
114 |
16 : 9 |
2560 x 1440 |
2560 x 1440 |
1.0 mdpi |
| Dell UltraSharp U3415W |
- |
34 |
110 |
21 : 9 |
3440 x 1440 |
3440 x 1440 |
1.0 mdpi |
| LG 34UC98-W |
- |
34 |
110 |
21 : 9 |
3440 x 1440 |
3440 x 1440 |
1.0 mdpi |
| LG UltraFine 4K |
- |
21.5 |
218 |
16 : 9 |
1920 x 1080 |
4096 x 2304 |
2.0 xhdpi |
| LG UltraFine 5K |
- |
27 |
218 |
16 : 9 |
2560 x 1440 |
5120 x 2880 |
2.0 xhdpi |
手表界面尺寸
| watch 设备名称 |
操作系统 |
尺寸 in |
PPI |
纵横比 |
宽 x 高 dp |
宽 x 高 px |
密度 dpi |
| Apple Watch 38mm |
watch OS |
1.5 |
326 |
5 : 4 |
136 x 170 |
272 x 340 |
2.0 xhdpi |
| Apple Watch 42mm |
watch OS |
1.7 |
326 |
5 : 4 |
156 x 195 |
312 x 390 |
2.0 xhdpi |
| Moto 360 |
Android |
1.6 |
205 |
32 : 29 |
241 x 218 |
320 x 290 |
1.3 tvdpi |
| Moto 360 v2 42mm |
Android |
1.4 |
263 |
65 : 64 |
241 x 244 |
320 x 325 |
1.3 tvdpi |
| Moto 360 v2 46mm |
Android |
1.6 |
263 |
33 : 32 |
241 x 248 |
320 x 330 |
1.3 tvdpi |