移动设备 UI 设计规范与尺寸指南
免费使用
超详细版
可复制
全面整理 iOS / Android 主流设备屏幕尺寸、逻辑分辨率、物理像素、DPR，以及触控区域、字体、状态栏、安全区域、间距等关键设计规范，助力您打造精准适配的移动界面。
| 分类 | 项目 | 规范 / 尺寸 | 说明 | 备注 / 示例 |
|---|---|---|---|---|
| 屏幕尺寸 | ||||
| iPhone 14 / 15 | 6.1 英寸 | 393 × 852 pt (逻辑) | 物理分辨率 1170 × 2532 px, DPR=3 | |
| iPhone 14 Plus / 15 Plus | 6.7 英寸 | 428 × 926 pt | 物理分辨率 1284 × 2778 px, DPR=3 | |
| iPhone 14 Pro / 15 Pro | 6.1 英寸 | 393 × 852 pt | 物理分辨率 1179 × 2556 px, DPR=3 (灵动岛) | |
| iPhone 14 Pro Max / 15 Pro Max | 6.7 英寸 | 430 × 932 pt | 物理分辨率 1290 × 2796 px, DPR=3 | |
| iPhone SE (3代) | 4.7 英寸 | 375 × 667 pt | 物理分辨率 750 × 1334 px, DPR=2 | |
| iPad Pro 12.9 (第6代) | 12.9 英寸 | 1024 × 1366 pt | 物理分辨率 2048 × 2732 px, DPR=2 | |
| iPad Pro 11 (第4代) | 11 英寸 | 834 × 1194 pt | 物理分辨率 1668 × 2388 px, DPR=2 | |
| iPad (第10代) | 10.9 英寸 | 820 × 1180 pt | 物理分辨率 1640 × 2360 px, DPR=2 | |
| Android 常用 (小屏) | 5.0~5.5 英寸 | 360 × 640 dp ~ 360 × 780 dp | 对应 xhdpi (~2x) 或 xxhdpi (~3x) | |
| Android 常用 (主流) | 6.0~6.5 英寸 | 360 × 760 dp ~ 412 × 915 dp | 对应 xxhdpi (~3x) | |
| Android 大屏 / 平板 | 7~10 英寸 | 600 × 960 dp 及以上 | 对应 hdpi (~1.5x) ~ xhdpi (~2x) | |
| Apple Watch | 45mm / 41mm | 396 × 484 pt / 352 × 430 pt | 物理分辨率 484×396 / 430×352, DPR=2 | |
| 设计规范 | ||||
| 触控目标最小尺寸 | 44 pt (iOS) / 48 dp (Android) | 约 7~9mm 物理尺寸 | Apple HIG 建议 44pt，Material Design 建议 48dp | |
| 最小字体大小 | 11 pt (iOS) / 12 sp (Android) | 正文通常 ≥ 15pt / 16sp | 确保可读性，老年模式需更大 | |
| 状态栏高度 | 约 44 pt (有刘海) / 20 pt (无刘海) | iOS 刘海屏状态栏≈44pt，非刘海≈20pt | Android 状态栏≈24~28dp (因设备而异) | |
| 导航栏高度 | 44 pt (iOS) / 56 dp (Android) | iOS 大标题导航栏≈96pt | Android 工具栏≈56dp (含左右内边距) | |
| 标签栏 / 底部导航高度 | 49 pt (iOS) / 56 dp (Android) | iPhone X 系列需额外安全区域 (34pt) | Android 底部导航栏≈56dp (含内边距) | |
| 安全区域 (Safe Area) | 顶部 +44pt, 底部 +34pt (iPhone X 系列) | 避开刘海、圆角、Home Indicator | Android 需考虑状态栏和导航栏 (手势区) | |
| 圆角半径 | 大圆角 ~ 10~16pt, 小圆角 ~ 4~8pt | 卡片、按钮常用 8~12pt 圆角 | 图标常使用 20~22pt (iOS) 或 12~16dp (Android) | |
| 间距系统 | 基线网格：4pt/8pt (iOS) / 4dp/8dp (Android) | 常用间距：8, 16, 24, 32, 40, 48 | 保持垂直节奏，提升可读性 | |
| 颜色对比度 | 文本与背景对比度 ≥ 4.5:1 (WCAG AA) | 大文本 ≥ 3:1 | 符合无障碍标准 | |
| 触摸反馈 | 按钮点击有高亮/涟漪效果 | iOS 使用系统高亮 (highlighted)，Android 使用 Ripple | 反馈时间应 < 100ms | |
| 适配要点 | ||||
| 响应式断点 | 手机 < 768px, 平板 768~1024px, 桌面 > 1024px | 也可按设备宽度 (320, 375, 414, 768, 1024) | 使用百分比/flex/grid 布局 | |
| 图片适配 | 使用 srcset / picture 或 @2x/@3x 倍图 | 根据 DPR 提供不同分辨率 | 矢量图 (SVG) 优先 | |
| 字体适配 | 使用 rem 或 vw 单位 | 正文建议 1rem = 16px，移动端可适当放大 | 避免使用 px 写死字体大小 | |
| 点击区域增强 | 使用 padding 扩大触控范围 (至少 44px) | 或使用 touch-action: manipulation 禁用双击缩放 | 按钮最小宽高 44px (iOS) / 48dp (Android) | |
| 横竖屏适配 | 通过 @media (orientation: portrait/landscape) | 布局可根据宽高比调整 | 视频/图片可自动适应 | |
| 手势兼容 | 避免与系统手势冲突 (边缘滑动, 返回) | 建议在屏幕中央区域使用自定义手势 | 提供 fallback 按钮 | |
设计规范核心要点
- • 触控目标：iOS 建议 ≥44pt，Android 建议 ≥48dp，物理尺寸约 7~9mm，避免误触。
- • 安全区域：iPhone X 系列顶部 +44pt，底部 +34pt，避开刘海和 Home Indicator。
- • 字体：正文 ≥15pt (iOS) / 16sp (Android)，最小可读字体 11pt / 12sp。
- • 间距系统：采用 4/8 点网格，常用间距 8,16,24,32,48，保持视觉节奏。
- • 适配：使用相对单位 (rem/vw)，图片提供 @2x/@3x，使用 srcset 或 picture 元素。
- • 对比度：文本与背景对比度 ≥4.5:1 (WCAG AA)，大文本 ≥3:1。
- • 反馈：按钮点击需有高亮或涟漪效果，响应时间 <100ms。
- • 横竖屏：通过媒体查询调整布局，避免内容错位。
屏幕尺寸
iPhone 15: 393×852pt (6.1″)，Android 主流: 360×760dp (6.0″)
触控区域
最小 44pt/48dp，确保手指精确点击，避免相邻元素过近
字体规范
正文 15~17pt，标题 20~34pt；使用系统字体 (SF Pro / Roboto)
适配策略
响应式断点：手机 <768px，平板 768~1024px，桌面 >1024px