UI 设计规范与主流设备尺寸速查表 #
在跨端数字产品设计中，准确理解屏幕视口（Viewport）、逻辑像素（pt/dp）、物理像素（px）、设备像素比（DPR）以及安全区域（Safe Area）是构建健壮响应式界面的底层基石。
本文档汇总了移动端（iOS / Android）、平板端、桌面端的最新主流视口规格与系统级设计规范，为 Figma 画板建立、栅格布局与切图交付提供统一参考基准。
1. 基础物理与逻辑概念解析 #
在 Figma 中绘制界面时，始终遵循 1x 逻辑像素设计原则（即 1pt = 1px 在 Figma 画布上的度量），在最终切图导出时根据目标平台 DPR 倍率进行 @2x 或 @3x 缩放导出。
$$ \text{物理像素 (px)} = \text{逻辑像素 (pt / dp)} \times \text{设备像素比 (DPR)} $$
- 逻辑分辨率 (Logical Resolution)：在 CSS / Figma 画布中度量的坐标系统（例如 iPhone 16 为
393 × 852 pt）。 - 物理分辨率 (Physical Resolution)：屏幕硬件实际拥有的发光子像素点总数（例如 iPhone 16 为
1179 × 2556 px）。 - DPR (Device Pixel Ratio)：物理像素与逻辑像素的倍率关系（常见为
@2x或@3x）。
2. iOS 移动端设备规格矩阵 (iPhone 全系) #
苹果自 iPhone 14 Pro 系列起全面引入灵动岛 (Dynamic Island)，统一了现代全面屏的交互与避让区域。
| 设备型号 | 屏幕尺寸 | Figma 画板尺寸 (pt) | 物理分辨率 (px) | 倍率 | 状态栏 / 灵动岛高度 | 底部安全区 (Home) |
|---|---|---|---|---|---|---|
| iPhone 16 Pro Max | 6.9" | 440 × 956 | 1320 × 2868 | @3x | 54 pt (灵动岛 37×126 pt) | 34 pt |
| iPhone 16 Pro | 6.3" | 402 × 874 | 1206 × 2622 | @3x | 54 pt (灵动岛 37×126 pt) | 34 pt |
| iPhone 16 Plus / 15 Plus | 6.7" | 430 × 932 | 1290 × 2796 | @3x | 54 pt (灵动岛 37×126 pt) | 34 pt |
| iPhone 16 / 15 / 15 Pro | 6.1" | 393 × 852 | 1179 × 2556 | @3x | 54 pt (灵动岛 37×126 pt) | 34 pt |
| iPhone 14 Pro Max | 6.7" | 430 × 932 | 1290 × 2796 | @3x | 54 pt (灵动岛 37×126 pt) | 34 pt |
| iPhone 14 / 13 / 12 | 6.1" | 390 × 844 | 1170 × 2532 | @3x | 47 pt (刘海屏 Notch) | 34 pt |
| iPhone 13 mini / 12 mini | 5.4" | 375 × 812 | 1080 × 2340 | @3x (渲染) | 44 pt (刘海屏 Notch) | 34 pt |
| iPhone SE (第 3 代) | 4.7" | 375 × 667 | 750 × 1334 | @2x | 20 pt (经典非全面屏) | 0 pt |
iOS 关键界面部件高度规范 #
- 导航栏 (Navigation Bar): 标准高度
44 pt；大标题样式 (Large Title) 高度96 pt（含滚动收起动效）。 - 底部标签栏 (Tab Bar): 视觉内容高度
49 pt，叠加底部安全区域34 pt，总高度通常为83 pt。 - 操作热区基准: Apple HIG 建议最小可点交互区域不低于
44 × 44 pt。
3. iPad 与平板设备规格矩阵 #
iPadOS 支持多任务分屏（Split View 1/3、1/2、2/3），在设计时需要重点关注自适应流体布局。
| 设备型号 | 屏幕尺寸 | 竖屏尺寸 (pt) | 横屏尺寸 (pt) | 物理分辨率 (px) | 倍率 | 状态栏高度 |
|---|---|---|---|---|---|---|
| iPad Pro 13" (M4) | 13.0" | 1024 × 1366 | 1366 × 1024 | 2064 × 2752 | @2x | 24 pt |
| iPad Pro 11" (M4) | 11.0" | 834 × 1210 | 1210 × 834 | 1668 × 2420 | @2x | 24 pt |
| iPad Air 11" / 10.9" | 10.9" | 820 × 1180 | 1180 × 820 | 1640 × 2360 | @2x | 24 pt |
| iPad (第 10 代) | 10.9" | 820 × 1180 | 1180 × 820 | 1640 × 2360 | @2x | 24 pt |
| iPad mini (第 6/7 代) | 8.3" | 744 × 1133 | 1133 × 744 | 1488 × 2266 | @2x | 24 pt |
4. Android 视口与 Material Design 3 规范 #
Android 设备由于品牌碎片化，设计时通常选取基准通用视口，并配合 Auto Layout 撑满 (Fill Container) 实现弹性自适应。
| 基准视口分类 | 推荐 Figma 画板 (dp) | 常见代表机型 | 密度区间 | 倍率 |
|---|---|---|---|---|
| 紧凑型基准 (Compact) | 360 × 800 | Google Pixel 原生 / 绝大多数中端手机 | xhdpi / xxhdpi | @2x / @3x |
| 现代主流基准 (Standard) | 390 × 844 或 393 × 851 | 小米、OPPO、vivo、荣耀主流机型 | xxhdpi | @3x |
| 大屏旗舰基准 (Expanded) | 412 × 915 | Google Pixel 8/9 Pro, 三星 S24 Ultra | xxxhdpi | @3.5x / @4x |
Material Design 3 关键组件规范 #
- 系统状态栏 (Status Bar): 通常为
24 dp ~ 48 dp（带挖孔屏适配）。 - 顶部应用栏 (Top App Bar): 小标题
64 dp；中标题112 dp；大标题152 dp。 - 底部导航栏 (Navigation Bar): 标准高度
80 dp（含图标与标签文案）。 - 最小触控热区: Google 建议最小交互区域不小于
48 × 48 dp，相邻目标间距至少保留8 dp。
5. Web 响应式断点与桌面端尺寸速查 #
桌面端设计切忌以固定宽度交付，建议基于标准响应式网格进行容器最大宽度 (Max-width) 限制。
| 屏幕断点级别 | 视口范围 (Viewport) | 推荐 Figma 基准画板 | 常见应用场景 | 容器建议最大宽 |
|---|---|---|---|---|
| Desktop 2K / 4K | $\ge 1920\text{px}$ | 1920 × 1080 | 高清桌面显示器、企业级运营大屏 | 1440px 或 1200px 居中 |
| Desktop Laptop | $1440 \sim 1536\text{px}$ | 1440 × 900 | MacBook Pro 14"/16", 主流笔记本 | 1200px 或 1140px 居中 |
| Tablet Landscape | $1024 \sim 1280\text{px}$ | 1280 × 800 | 平板横屏、小屏笔记本 | 960px 或 100% - 48px |
| Tablet Portrait | $768 \sim 1023\text{px}$ | 768 × 1024 | iPad 竖屏、折叠屏展开态 | 流体两栏网格 |
| Mobile | $< 768\text{px}$ | 390 × 844 | 移动端单列堆叠排版 | 100% - 32px (左右 Margin 16) |
6. 8pt 与 4pt 栅格系统落地法则 #
现代主流设计系统（如 Apple HIG、Material Design、Ant Design、Tailwind CSS）均采用 8pt 栅格系统 作为度量基准，次级细节使用 4pt 进行微调。
为什么选择 8 作为基础单位？ #
- 跨分辨率无损缩放：8 能够被 2 和 4 整除，在
@1x、@2x、@3x（例如 8 × 1.5 = 12）以及各类高清视网膜屏幕缩放下极少产生半像素（Sub-pixel）虚边模糊。 - 极大减少决策成本：消除“这个间隙到底该设 13px 还是 15px”的无意义纠结。
间距梯度标尺对照表 (Spacing Scale) #
| 梯度 Token 标识 | 像素数值 (pt/px) | Tailwind 映射 | 典型设计系统应用场景 |
|---|---|---|---|
spacing-0 | 0 pt | p-0 / m-0 | 紧贴重合 |
spacing-0.5 | 2 pt | p-0.5 | 超细边框、状态小点避让 |
spacing-1 | 4 pt | p-1 | 图标与相邻极小文案间隙、Badge 微调 |
spacing-2 | 8 pt | p-2 | 紧凑型按钮内部 Padding、Tag 标签内边距 |
spacing-3 | 12 pt | p-3 | 卡片内部紧凑间隙、表单输入框水平边距 |
spacing-4 | 16 pt | p-4 | 全局最核心基准间距：移动端页面左右边距、标准卡片 Padding |
spacing-5 | 20 pt | p-5 | 表单项纵向间隔 |
spacing-6 | 24 pt | p-6 | 模块内部组块纵向间距、弹窗 Header 与 Content 间距 |
spacing-8 | 32 pt | p-8 | 模块与模块之间的大间隙、移动端板块垂直分隔 |
spacing-12 | 48 pt | p-12 | 桌面端大区块纵向 Margin、Hero 区域间隙 |
spacing-16 | 64 pt | p-16 | 网页各功能 Section 大分段 |
7. 栅格布局 (Grid System) 推荐参数设置 #
在 Figma 中为 Frame 添加 Layout Grid 时，推荐配置如下参数：
移动端网格配置 (Mobile: 390pt) #
- Count (列数):
4列 - Type:
Stretch - Margin (左右页边距):
16 pt(标准) 或20 pt(宽松) - Gutter (水槽间隙):
12 pt或16 pt
桌面端 12 列网格配置 (Desktop: 1440pt) #
- Count (列数):
12列 - Type:
Center - Width (每列固定宽度):
72 pt - Gutter (水槽间隙):
24 pt - 总容器有效内容宽: $(72 \times 12) + (24 \times 11) = 864 + 264 = \mathbf{1128\text{ pt}}$
核心手册与速查工具
高频手册与实用设计生产力工具直达常见问题与答疑 (FAQ)
高频疑难解析与避坑指南A
macOS 上主要使用 Command (⌘) 键，Windows 上对应 Ctrl 键；Option 键对应 Windows 的 Alt 键。建议使用快捷键 Ctrl + Shift + ?（Windows）或 Cmd + Shift + ?（Mac）随时调出内置快捷键助手。