2024【APP/小程序/PC网页/iPad】UI设计尺寸规范标准模板

思叔 12687 3

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电脑端用户显示器[aru_123]大多为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了
1440x900px 10% 还有不少人在用，一般是17/19英寸显示器
1280x800px 9% Macbook常用
3480x2160px 8% 4K，越来越受欢迎
其他分辨率 7% 小众的分辨率

 

常见电脑屏幕尺寸参考

设备名称 尺寸 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

APP小程序设计规范

在APP设计中，为了满足适配需要的设计稿，通常从中间尺寸开始设计，然后向两侧兼容。目前，iPhone14/13/12、iPhone13/12pro做为中间尺寸和构成了目前市面占比最高的设备。对我们来说，也就是未来创建设计稿，所以，推荐使用 390x844 pt (1170x2532 px @3x) 这个尺寸！忘掉 375x812 吧！

ip.jpg

关于“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 13Pro iPhone 12 iPhone 12Pro
屏幕尺寸in PPI 比例 设计尺寸与渲染分辨率 密度dpi
6.1 460 19.5 : 9 390x844 pt (1170x2532 px @3x) 3.0 xxhdpi

UI设计推荐使用这个尺寸

 

iPhone 13mini iPhone 12mini
屏幕尺寸in PPI 比例 设计尺寸与渲染分辨率 密度dpi
5.4 476 19.5 : 9 360x780 pt (1080x2340 px @3x) 3.0 xxhdpi

 

iPhone 11Pro Max iPhone XS Max

屏幕尺寸in PPI 比例 设计尺寸与渲染分辨率 密度dpi
6.5 458 19.5 : 9 414x896 pt (1242x2688 px @3x) 3.0 xxhdpi

 

iPhone 11Pro iPhone XS iPhone X
屏幕尺寸in PPI 比例 设计尺寸与渲染分辨率 密度dpi
6.1 326 19.5 : 9 375x812 pt (1125x2436 px @3x) 3.0 xxhdpi

 

iPhone XR iPhone 11
屏幕尺寸in PPI 比例 设计尺寸与渲染分辨率 密度dpi
5.8 458 19.5 : 9 414x896 pt (828x1792 px @2x) 2.0 xxhdpi

 

iPhone 8 Plus iPhone 7Plus iPhone 6 Plus iPhone 6S Plus
屏幕尺寸in PPI 比例 设计尺寸与渲染分辨率 密度dpi
5.5 401 16 : 9 414x736 pt (1242x2208 px @3x) 3.0xxhdpi

 

iPhone 8 iPhone 7 iPhone 6 iPhone 6S
屏幕尺寸in PPI 比例 设计尺寸与渲染分辨率 密度dpi
4.7 326 16 : 9 375x667 pt (750x1334 px @2x) 2.0xhdpi

 

iPhone 5 iPhone 5S iPhone 5C iPhone SE
屏幕尺寸in PPI 比例 设计尺寸与渲染分辨率 密度dpi
4.0 326 16 : 9 320x568 pt (640x1136 px @2x) 2.0xhdpi

 

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

苹果官方设计规范

安卓手机设计规范【更新到2022年】

dpi =屏幕宽度（或高度）像素 / 屏幕宽度（或高度）英寸，dp =(宽度像素 x 160)/ dpi

Android手机屏幕尺寸参考

设备名称 屏幕尺寸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
hdpi 480 x 800 240 1.5 48dp 72px
mdpi 320 x 480 160 1.0 48dp 48px

 

安卓字体使用

元素 字重 字号 行距 字间距
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

 

安卓图标规范

图标用途 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

 

UI设计规范标准模板下载

IOS16界面UI kit设计规范手机APP灵动岛壁纸标准尺寸Sketch素材XD
UI设计规范标准互联网APP小程序图标IOS安卓WEB网页设计模板尺寸
UI设计标准规范尺寸组件库手机APP界面UI模板Sketch案例PSD素材
BAT互联网公司UI UE UX APP视觉界面设计规范交互设计师学习案例
iOS15苹果iPhone手机UI界面组件设计标准规范模板figma素材模板
Taro Ui京东出品APP界面设计规范模板多终端Ui组件库sketch素材
扁平化卡片式多功能黑色APP通用组件库UI设计规范sketch素材模板
整套全面APP通用组件库大合集UI设计标准规范sketch素材XD模板fig
iOS14手机桌面GUI组件框架模式xd sketch设计规范标准素材模板
网页后台表单进度条弹窗导航下拉框分页按钮列表界面设计规范模板
网页后台UI组件规范标准仪表盘设计系统页面控件figma素材案例
中文手机APP移动端PC后台界面UI设计规范XD源文件AI矢量组件素材
全套后台Admin管理控制面板UI Kit界面设计规范组件.fig素材模板
iOS安卓Android应用程序手表Watch图标ICON设计模板规范标准素材
智能手表Apple Watch可穿戴设备UI界面设计规范xd素材sketch fig

本文作者为思叔，转载请注明。

发表评论 取消回复
表情 图片 链接 代码

  1. 飞飞
    飞飞 Lv 1

    做Ui时一直不太懂标准[aru_22]，这下可搞明白了[aru_36]，感谢思酷！[aru_57]

    2023-06-28 10:04 回复
    • 思叔
      思叔 站长

      @飞飞谢谢支持[aru_49]，我们不定时更新[aru_137]，如果在设计中有哪方面的问题[aru_76]，可以直接留言或加V[aru_143]:sskoo5

      2023-06-28 10:06 回复
  2. 思叔
    思叔 站长

    有问题记得找我们哦[aru_51]，标准中有错误的地方请指正出来[aru_66]，我们会及时的更新！[aru_136]

    2023-06-28 10:07 回复
分享