手机UI界面设计尺寸规范标准

一、IOS设计规范

1、IOS使用字体(苹方)

中文字体: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

2、IOS界面设计规范

sskoo.com

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

3、图标规范

设备名称 应用图标 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

自定义图标

设备名称 导航栏和工具栏图标尺寸 标签栏图标尺寸
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)

1、安卓(Android)使用字体

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

2、安卓图标规范

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

3、安卓设计分辨率

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

三、常用手机屏幕尺寸参考【更新到2021年】

设备名称 操作系统 尺寸 in PPI 比例 宽x高 dp 宽x高 px 密度 dpi
iPhone 12 Pro Max iOS 6.7 458 19.5 : 9 428 x 926 1284 x 2778 3.0 xxhdpi
iPhone 12(Pro) iOS 6.1 460 19.5 : 9 390 x 844 1170 x 2532 3.0 xxhdpi
iPhone 12 mini iOS 5.4 476 19.5 : 9 360 x 780 1080 x 2340 3.0 xxhdpi
iPhone Xs(Max,Pro Max) iOS 6.5 458 19.5 : 9 414 x 896 1242 x 2688 3.0 xxhdpi
iPhone XR(11) iOS 6.1 326 19.5 : 9 414 x 896 828 x 1792 2.0 xxhdpi
iPhone X(Xs,Pro) iOS 5.8 458 19.5 : 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.0xxhdpi
iPhone 8 (7, 7, 6S, 6) iOS 4.7 326 16 : 9 375 x 667 750 x 1334 2.0xhdpi
iPhone SE(SE, 5S, 5C) iOS 4.0 326 16 : 9 320 x 568 640 x 1136 2.0xhdpi
Android One Android 4.5 218 16 : 9 320 x 569 480 x 854 1.5hdpi
Google Pixel Android 5.0 441 16 : 9 411 x 731 1080 x 1920 2.6xxhdpi
Google Pixel XL Android 5.5 534 16 : 9 411 x 731 1440 x 2560 3.5xxxhdpi
Moto X Android 4.7 312 16 : 9 360 x 640 720 x 1280 2.0xhdpi
Moto X 二代 Android 5.2 424 16 : 9 360 x 640 1080 x 1920 3.0xxhdpi
Nexus 5 Android 5.0 445 16 : 9 360 x 640 1080 x 1920 3.0xxhdpi
Nexus 5X Android 5.2 565 16 : 9 411 x 731 1080 x 1920 2.6xxhdpi
Nexus 6 Android 6.0 493 16 : 9 411 x 731 1440 x 2560 3.5xxxhdpi
Nexus 6P Android 5.7 518 16 : 9 411 x 731 1440 x 2560 3.5xxxhdpi
Samsung Galaxy S8 Android 5.8 570 18.5 : 9 360 x 740 1440 x 2960 4.0xxxhdpi
Samsung Galaxy S8+ Android 6.2 529 18.5 : 9 360 x 740 1440 x 2960 4.0xxxhdpi
Samsung Galaxy Note 4 Android 5.7 515 16 : 9 480 x 853 1440 x 2560 3.0xxhdpi
Samsung Galaxy Note 5 Android 5.7 518 16 : 9 480 x 853 1440 x 2560 3.0xxhdpi
Samsung Galaxy S5 Android 5.1 432 16 : 9 360 x 640 1080 x 1920 3.0xxhdpi
Samsung Galaxy S7 (S7, S6, S6 Edge) Android 5.1 576 16 : 9 360 x 640 1440 x 2560 4.0xxxhdpi
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
小米MIX Android 6.4 362 17 : 9 360 x 680 1080 x 2040 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

APP及网页切图及UI命名规范参考

1、常见界面、控件、功能、状态命名集合,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

 

2、以iOS为范例(安卓通用)的切片文件命名规范如下(个人觉得标识符命名原则,尽可能的用最少的字符而又能完整的表达标识符的含义,如:Navigation bar可以缩减成nav):