2️⃣0️⃣2️⃣3️⃣手机APP小程序UI界面设计尺寸规范标准

思叔 10656 0

到底使用哪款设备做UI设计标准尺寸？

面对市场各种各样的手机设备，作为一个UI设计师在设计尺寸上很困惑，在UI设计中，为了满足适配需要的设计稿，通常从中间尺寸开始设计，然后向两侧兼容。所以长期以来375款的设备一直是中间尺寸的设备，包括iPhone6/X/mini。

但随着iPhone15/14/13系列发布，iPhone mini成为 iPhone主流机型中的的最小尺寸了。现在iPhone14/13/12、iPhone13/12pro做为中间尺寸和构成了目前市面占比最高的设备。对我们来说，也就是未来创建设计稿，所以，推荐使用 390x844 pt (1170x2532 px @3x) 这个尺寸！忘掉 375x812 吧！

ip.jpg

关于“XX倍图”问题

有些设计师说APP的设计尺寸为1倍原型(@1x)，2倍UI视觉(@2x)，3倍开发(@3x)，严格来说，这些说法都不对！Adobe XD和Sketch及Figma这两个UI专业设计工具的APP界面设计默认规格就是1倍标准(@1x)，所以我们在设计APP时，如果是用PS做设计最好的3倍图(@3x)尺寸，例如 iPhoneX 用 1125x2436px 的尺寸，如果是用SKetch/XD/Figma来设计，常见是用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

 

手表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

 

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

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

分享