APP小程序设计规范
在APP设计中，为了满足适配需要的设计稿，通常从中间尺寸开始设计，然后向两侧兼容。目前，iPhone14/13/12、iPhone13/12pro做为中间尺寸和构成了目前市面占比最高的设备。对我们来说，也就是未来创建设计稿，所以，推荐使用 390x844 pt (1170x2532 px @3x) 这个尺寸！忘掉 375x812 吧！
关于“XX倍图”问题
有些设计师说APP的设计尺寸为1倍原型【@1x】、2倍UI视觉【@2x】、3倍开发【@3x】，严格来说这些说法都不对！[aru_154][aru_155][aru_156]这些专业UI设计工具的APP界面设计默认规格就是1倍标准【@1x】，所以我们在设计APP时，如果是用PS做设计最好的3倍图【@3x】尺寸，例如 iPhoneX 用 1125x2436px 的尺寸，如果是用[aru_154][aru_155][aru_156]来设计，常见是用1倍尺寸【@1x】来说，也就是375*812（iPhoneX）或者390*844（iPhone14/13/12），最后导出时可以导出2倍或者3倍即可。
IOS手机屏幕尺寸参考
iPhone 14 Pro Max
| 屏幕尺寸in |
PPI |
比例 |
设计尺寸与渲染分辨率 |
密度dpi |
| 6.7 |
460 |
19.5 : 9 |
430x932 pt (1290x2796 px @3x) |
3.0 xxhdpi |
iPhone 14 Pro
| 屏幕尺寸in |
PPI |
比例 |
设计尺寸与渲染分辨率 |
密度dpi |
| 6.1 |
460 |
19.5 : 9 |
393x852 pt (1179x2556 px @3x) |
3.0 xxhdpi |
iPhone 14Plus / iPhone 13Pro Max / iPhone 12Pro Max
| 屏幕尺寸in |
PPI |
比例 |
设计尺寸与渲染分辨率 |
密度dpi |
| 6.7 |
458 |
19.5 : 9 |
428x926 pt (1284x2778 px @3x) |
3.0 xxhdpi |
iPhone 14 / iPhone 13 / iPhone 12 / iPhone 12Pro
| 屏幕尺寸in |
PPI |
比例 |
设计尺寸与渲染分辨率 |
密度dpi |
| 6.1 |
460 |
19.5 : 9 |
390x844 pt (1170x2532 px @3x) |
3.0 xxhdpi |
iPhone 12mini/13mini
| 屏幕尺寸in |
PPI |
比例 |
设计尺寸与渲染分辨率 |
密度dpi |
| 5.4 |
476 |
19.5 : 9 |
360x780 pt (1080x2340 px @3x) |
3.0 xxhdpi |
IOS字体使用
中文字体【苹方】：PingFang SC，英文字体：SF UI Text 、SF UI Display。(其中SF UI Text适用与小于19pt的文字，SF UI Display适用于大于20pt的文字)，常见的字体大小:24px、26px、28px、30px、32px、34px，36px等等。记住是偶数的。最小字号20px。以下列表供参考！
| 元素 |
字重 |
字号(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 |
IOS图标规范
| 设备名称 |
应用图标 |
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 |
IOS自定义图标
| 设备名称 |
导航栏和工具栏图标尺寸 |
标签栏图标尺寸 |
| 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 |
苹果官方设计规范
Android手机屏幕尺寸参考
安卓手机【更新到2022年】dpi =屏幕宽度（或高度）像素 / 屏幕宽度（或高度）英寸，dp =(宽度像素 x 160)/ dpi
| 设备名称 |
屏幕尺寸in |
PPI |
比例 |
1倍宽高px |
设计宽高px |
密度 dpi |
| Android One |
4.5 |
218 |
16 : 9 |
320 x 569 |
480 x 854 |
1.5hdpi |
| Google Pixel |
5.0 |
441 |
16 : 9 |
411 x 731 |
1080 x 1920 |
2.6xxhdpi |
| Google Pixel XL |
5.5 |
534 |
16 : 9 |
411 x 731 |
1440 x 2560 |
3.5xxxhdpi |
| Moto X |
4.7 |
312 |
16 : 9 |
360 x 640 |
720 x 1280 |
2.0xhdpi |
| Moto X 二代 |
5.2 |
424 |
16 : 9 |
360 x 640 |
1080 x 1920 |
3.0xxhdpi |
| Nexus 5 |
5.0 |
445 |
16 : 9 |
360 x 640 |
1080 x 1920 |
3.0xxhdpi |
| Nexus 5X |
5.2 |
565 |
16 : 9 |
411 x 731 |
1080 x 1920 |
2.6xxhdpi |
| Nexus 6 |
6.0 |
493 |
16 : 9 |
411 x 731 |
1440 x 2560 |
3.5xxxhdpi |
| Nexus 6P |
5.7 |
518 |
16 : 9 |
411 x 731 |
1440 x 2560 |
3.5xxxhdpi |
| Samsung Galaxy S8 |
5.8 |
570 |
18.5 : 9 |
360 x 740 |
1440 x 2960 |
4.0xxxhdpi |
| Samsung Galaxy S8+ |
6.2 |
529 |
18.5 : 9 |
360 x 740 |
1440 x 2960 |
4.0xxxhdpi |
| Samsung Galaxy Note 4 |
5.7 |
515 |
16 : 9 |
480 x 853 |
1440 x 2560 |
3.0xxhdpi |
| Samsung Galaxy Note 5 |
5.7 |
518 |
16 : 9 |
480 x 853 |
1440 x 2560 |
3.0xxhdpi |
| Samsung Galaxy S5 |
5.1 |
432 |
16 : 9 |
360 x 640 |
1080 x 1920 |
3.0xxhdpi |
| Samsung Galaxy S7 (S7, S6, S6 Edge) |
5.1 |
576 |
16 : 9 |
360 x 640 |
1440 x 2560 |
4.0xxxhdpi |
| Samsung Galaxy S7 Edge |
5.5 |
534 |
16 : 9 |
360 x 640 |
1440 x 2560 |
4.0 xxxhdpi |
| Smartisan T2 |
4.95 |
445 |
16 : 9 |
360 x 640 |
1080 x 1920 |
3.0 xxhdpi |
| Smartisan M1 |
5.15 |
428 |
16 : 9 |
360 x 640 |
1080 x 1920 |
3.0 xxhdpi |
| Smartisan M1L |
5.7 |
515 |
16 : 9 |
480 x 853 |
1440 x 2560 |
3.0 xxhdpi |
| 坚果 Pro |
5.5 |
403 |
16 : 9 |
360 x 640 |
1080 x 1920 |
3.0 xxhdpi |
| OnePlus 5 |
5.5 |
401 |
16 : 9 |
360 x 640 |
1080 x 1920 |
3.0 xxhdpi |
| OnePlus 3T |
5.5 |
401 |
16 : 9 |
360 x 640 |
1080 x 1920 |
3.0 xxhdpi |
| Oppo R9s (R9s, R11) |
5.5 |
401 |
16 : 9 |
360 x 640 |
1080 x 1920 |
3.0 xxhdpi |
| Oppo R9s Plus (R9s Plus, R11 Plus) |
6.0 |
368 |
16 : 9 |
360 x 640 |
1080 x 1920 |
3.0 xxhdpi |
| Oppo A57 |
5.2 |
282 |
16 : 9 |
360 x 640 |
720 x 1280 |
2.0 xhdpi |
| Oppo A59s |
5.5 |
267 |
16 : 9 |
360 x 640 |
720 x 1280 |
2.0 xhdpi |
| Oppo A37 |
5.0 |
293 |
16 : 9 |
360 x 640 |
720 x 1280 |
2.0 xhdpi |
| 小米MIX |
6.4 |
362 |
17 : 9 |
360 x 680 |
1080 x 2040 |
3.0 xxhdpi |
| 小米Note 2 |
5.7 |
386 |
16 : 9 |
360 x 640 |
1080 x 1920 |
3.0 xxhdpi |
| 小米6 |
5.15 |
428 |
16 : 9 |
360 x 640 |
1080 x 1920 |
3.0 xxhdpi |
| 小米5s |
5.15 |
428 |
16 : 9 |
360 x 640 |
1080 x 1920 |
3.0 xxhdpi |
| 小米5s Plus |
5.7 |
386 |
16 : 9 |
360 x 640 |
1080 x 1920 |
3.0 xxhdpi |
| 小米Max |
6.44 |
342 |
16 : 9 |
360 x 640 |
1080 x 1920 |
3.0 xxhdpi |
| 红米Note 4 (4, Note 4X) |
5.5 |
403 |
16 : 9 |
360 x 640 |
1080 x 1920 |
3.0 xxhdpi |
| 红米 4 (4, 4X) |
5.0 |
296 |
16 : 9 |
360 x 640 |
720 x 1280 |
2.0 xhdpi |
| Vivo X9 (X9, X9s) |
5.5 |
401 |
16 : 9 |
360 x 640 |
1080 x 1920 |
3.0 xxhdpi |
| Vivo X9 Plus (X9 Plus, X9s Plus) |
5.88 |
375 |
16 : 9 |
360 x 640 |
1080 x 1920 |
3.0 xxhdpi |
| HUAWEI P10 |
5.1 |
432 |
16 : 9 |
360 x 640 |
1080 x 1920 |
3.0 xxhdpi |
| HUAWEI P10 Plus |
5.5 |
540 |
16 : 9 |
360 x 640 |
1440 x 2560 |
4.0 xxxhdpi |
安卓设计分辨率
| 名称 |
分辨率 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 |
安卓图标规范
| 图标用途 |
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 |
谷歌官方设计规范谷歌中文设计规范
APP及网页切图及UI命名规范参考
常见界面、控件、功能、状态命名集合，APP产品经理、APP设计师、APP开发工程师，包括H5前端开发人员都可以记住的文件命名规范。
| 中文 |
英文 |
中文 |
英文 |
中文 |
英文 |
中文 |
英文 |
| 整个主程序 |
App |
搜索结果 |
Search results |
活动 |
Activity |
信息 |
Messages |
| 首页 |
Home |
应用详情 |
App detail |
探索 |
Explore |
音乐 |
Music |
| 软件 |
Software |
日历 |
Calendar |
联系人 |
Contacts |
新闻 |
News |
| 游戏 |
Game |
相机 |
Camera |
控制中心 |
Control center |
笔记 |
Notes |
| 管理 |
Management |
照片 |
Photo |
健康 |
Health |
天气 |
Weather |
| 发现 |
Find |
视频 |
Video |
邮件 |
Mail |
手表 |
Watch |
| 个人中心 |
Personal center |
设置 |
Settings |
地图 |
Maps |
锁屏 |
Lock screen |
| 状态栏 |
Status bar |
搜索栏 |
Search bar |
提醒视图 |
Alert view |
弹出视图 |
Popovers |
| 导航栏 |
Navigation bar |
表格视图 |
Table view |
编辑菜单 |
Edit menu |
开关 |
Switch |
| 标签栏 |
Tab bar |
分段控制 |
Segmented |
选择器 |
Pickers |
弹窗 |
Popup |
| 工具栏 |
Tool bar |
活动视图 |
Activity view |
滑杆 |
Sliders |
扫描 |
Scanning |
| 确定 |
Ok |
添加 |
Add |
卸载 |
Uninstall |
选择 |
Select |
| 默认 |
Default |
查看 |
View |
搜索 |
Search |
更多 |
More |
| 取消 |
Cancel |
删除 |
Delete |
暂停 |
Pause |
刷新 |
Refresh |
| 关闭 |
Close |
下载 |
Download |
继续 |
Continue |
发送 |
Send |
| 最小化 |
Min |
等待 |
Waiting |
导入 |
Import |
前进 |
Forward |
| 最大化 |
Max |
加载 |
Loading |
导出 |
Export |
重新开始 |
Restart |
| 菜单 |
Menu |
安装 |
Install |
后退 |
Back |
更新 |
Update |
| 图片 |
Image |
滚动条 |
Scroll |
进度条 |
Progress |
线条 |
Line |
| 图标 |
Icon |
标签 |
Tab |
树 |
Tree |
蒙版 |
Mask |
| 静态文本框 |
Label |
勾选框 |
Checkbox |
动画 |
Animation |
标记 |
Sign |
| 编辑框 |
Edit |
下拉框 |
Combo |
按钮 |
Button |
动画 |
Animation |
| 列表 |
List |
单选框 |
Radio |
背景 |
Backgroud |
播放 |
Play |
| 普通 |
Normal |
获取焦点 |
Focused |
已访问 |
Visited |
默认 |
Default |
| 按下 |
Press |
点击 |
Highlight |
禁用 |
Disabled |
选中 |
Selected |
| 悬停 |
Hover |
错误 |
Error |
完成 |
Complete |
空白 |
Blank |
| 顶部 |
Top |
底部 |
Bottom |
第二 |
Second |
页关 |
Header |
| 中间 |
Middle |
第一 |
First |
最后 |
Last |
页脚 |
Footer |
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 |
iPad/平板电脑设计规范
| 设备名称 |
操作系统 |
尺寸 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 |
PC网页设计规范
根据2024年中国互联网对网民上网终端分辨率的统计分析，中国PC电脑端用户显示器大多为24~27英寸屏幕，分辨率从几年前主流的1440×900、1280×800提升到1920×1080和2K为主，少数已在使用4K屏、5K屏，甚至苹果iMac在已推出了8K屏，所以我们在设计PC端项目时以1920×1080(全高清)为主，以下表格为2024年国内用户的屏幕分辨率使用情况：
| 分辨率 |
使用率 |
说明 |
| 1920x1080px |
48% |
全高清FHD，比较常用，一般是24英寸显示器 |
| 2560x1440px |
18% |
2K，目前很多屏幕都是2K了 |
| 3480x2160px |
14% |
4K，越来越受欢迎 |
| 1440x900px |
12% |
还有不少人在用，一般是17/19英寸显示器 |
| 1280x800px |
9% |
Macbook常用 |
常见电脑屏幕尺寸参考
| 设备名称 |
尺寸 in |
PPI |
比例 |
宽x高 dp |
宽x高 px |
| MacBook |
12.0 |
226 |
16 : 10 |
1280 x 800 |
2304 x 1440 |
| MacBook Air 11 |
11.6 |
135 |
16 : 9 |
1366 x 768 |
1366 x 768 |
| MacBook Air 13 |
13.3 |
128 |
16 : 10 |
1440 x 900 |
1440 x 900 |
| MacBook Pro 13 |
13.3 |
227 |
16 : 10 |
1280 x 800 |
2560 x 1600 |
| MacBook Pro 15 |
15.4 |
220 |
16 : 10 |
1440 x 900 |
2880 x 1800 |
| iMac 21.5 |
21.5 |
102 |
16 : 9 |
1920 x 1080 |
1920 x 1080 |
| iMac 21.5 4K |
21.5 |
218 |
16 : 9 |
1920 x 1080 |
4096 x 2304 |
| iMac 27 |
27 |
109 |
16 : 9 |
2560 x 1440 |
2560 x 1440 |
| iMac 27 5K |
27 |
218 |
16 : 9 |
2560 x 1440 |
5120 x 2880 |
| Surface Book |
13.5 |
267 |
3 : 2 |
1500 x 1000 |
3000 x 2000 |
| Surface Pro |
12.3 |
267 |
3 : 2 |
1368 x 912 |
2736 x 1824 |
| Surface Laptop |
13.5 |
201 |
3 : 2 |
1128 x 752 |
2256 x 1504 |
| Surface Studio |
28 |
192 |
3 : 2 |
2250 x 1500 |
4500 x 3000 |
