3、移动端设计规范速览：iOS和Android设计规范差异、常用尺寸单位（pt、dp、sp、px）、适配基础概念
移动端UI视觉验收的第一道门槛，是确认设计稿是否符合目标平台的规范。iOS和Android两套系统在设计语言、尺寸单位、适配逻辑上存在系统性差异。如果验收时只凭肉眼“看个大概”，很容易漏掉状态栏高度错误、字体缩放异常、图标间距失衡等细节问题。本章从设计规范差异、尺寸单位换算、适配基础概念三个维度，建立一套可执行的验收检查框架。
3.1 iOS与Android设计规范的核心差异
核心原理
iOS和Android的设计规范分别由Apple和Google制定，两者在视觉语言、交互模式、组件尺寸上存在系统性差异。iOS偏向内容优先、层级清晰，使用毛玻璃质感、大标题、底部Tab Bar；Android遵循Material Design，强调纸张隐喻、阴影层级、顶部App Bar和FAB（浮动操作按钮）。验收时不能混用两套规范，例如在iOS设计稿中出现底部“悬浮球”按钮，或在Android设计稿中使用iOS风格的返回箭头，都属于规范错误。
关键差异对比表
| 对比维度 | iOS | Android |
|---|---|---|
| 设计语言 | HIG（Human Interface Guidelines） | Material Design |
| 导航模式 | 底部Tab Bar + 左上角返回 | 顶部App Bar + 系统返回键/手势 |
| 字体 | SF Pro（英文）/ SF Compact（小屏） | Roboto / Noto Sans CJK |
| 圆角风格 | 大圆角（卡片、按钮、弹窗） | 中等圆角（4dp-16dp） |
| 阴影/层级 | 轻阴影，强调模糊和透明度 | 明显阴影，体现纸张高度 |
| 状态栏高度 | 44pt（刘海屏）/ 20pt（传统） | 24dp（常规）/ 24dp+（挖孔屏） |
| 底部安全区 | Home Indicator 区域 34pt | 手势导航条区域 48dp |
| 图标风格 | 线性图标为主，粗细均匀 | 面性图标为主，可带填充 |
判断方法
- 查看导航结构：iOS页面底部应有Tab Bar（如有多个一级模块），Android页面顶部应有App Bar。
- 检查返回方式：iOS左上角有返回按钮，Android使用系统返回手势或顶部返回箭头。
- 观察字体风格：iOS默认使用SF Pro，Android默认使用Roboto，中文字体两者都可用系统默认。
- 验证安全区：iOS刘海屏顶部避开刘海区域，底部避开Home Indicator；Android挖孔屏顶部避开摄像头区域。
案例拆解：跨平台设计稿的规范冲突
某金融App在双端设计稿中，iOS版本底部使用Tab Bar（首页、理财、账户、我的），Android版本却沿用了iOS的底部Tab Bar，同时顶部又加了App Bar。真机测试时发现Android底部导航与系统手势导航条重叠，导致点击区域变小。修复方案：Android版本改为底部导航+顶部App Bar的组合，并将底部导航上移48dp避开手势区域。验收时需同时打开两套设计稿对比，不能只检查单端。
3.2 常用尺寸单位：pt、dp、sp、px
核心原理
移动端设计稿中常见的尺寸单位有四种：pt（iOS逻辑点）、dp（Android密度无关像素）、sp（Android缩放无关像素）、px（物理像素）。pt和dp在数值上等价（1pt = 1dp），都用于描述逻辑尺寸；sp专门用于字体，会跟随系统字体缩放设置变化；px是屏幕上的实际物理像素点，与设备分辨率直接相关。
单位换算关系表
| 单位 | 适用平台 | 换算关系 | 典型场景 |
|---|---|---|---|
| pt | iOS | 1pt = 2px（@2x）/ 3px（@3x） | 布局、间距、图标尺寸 |
| dp | Android | 1dp = 1px × (dpi/160) | 布局、间距、组件尺寸 |
| sp | Android | 1sp = 1dp（默认字体缩放=1） | 字体大小 |
| px | 通用 | 物理像素，与设备分辨率一致 | 切图导出、图标位图 |
判断方法
- 看设计稿标注：iOS设计稿通常标注pt，Android设计稿标注dp/sp。
- 检查字体单位：Android设计稿中字体必须使用sp，不能使用dp或px，否则系统字体缩放时文字不会跟随变化。
- 验证倍率关系：iOS @2x设计稿中，标注为16pt的元素，切图导出应为32px；@3x设计稿中应为48px。
实战场景：字体缩放适配
Android系统允许用户将字体大小调整为“特大”模式（通常为1.3倍）。如果设计稿中字体使用dp标注，则文字不会随系统设置缩放，导致界面文字过小。正确做法是使用sp标注字体，并预留足够的布局空间以应对字体放大后的换行。验收时可在Android真机上将字体设置为“特大”，检查文字是否完整显示、是否出现截断或重叠。
3.3 适配基础概念：逻辑分辨率、像素密度与倍率
核心原理
适配的核心目标是让同一套设计稿在不同尺寸、不同像素密度的设备上呈现一致的视觉效果。关键概念包括：逻辑分辨率（设计稿使用的尺寸）、物理分辨率（屏幕实际像素数）、像素密度（ppi/dpi，每英寸像素数）、倍率（物理像素与逻辑像素的比值）。iOS常见倍率为@2x和@3x，Android常见倍率为mdpi（1x）、hdpi（1.5x）、xhdpi（2x）、xxhdpi（3x）、xxxhdpi（4x）。
适配流程清单
- 确定基准设计稿：iOS以375×812pt（iPhone X/XS/11 Pro）为基准，Android以360×800dp为基准。
- 检查关键元素：状态栏、导航栏、底部安全区、左右边距是否在目标设备上正确显示。
- 验证弹性布局：中间内容区域是否可伸缩，两端对齐是否保持固定间距。
- 测试极端场景：小屏设备（iPhone SE 375×667pt）和大屏设备（iPhone 15 Pro Max 430×932pt）上的显示效果。
- 确认切图资源：iOS需要@2x和@3x两套切图，Android需要xhdpi、xxhdpi、xxxhdpi三套切图。
案例拆解：多尺寸设备适配验收
某电商App设计稿以375×812pt为基准，在iPhone SE（375×667pt）上测试时发现底部Tab Bar与Home Indicator重叠，且商品卡片间距过小。分析原因：设计稿中Tab Bar高度为83pt（49pt Tab Bar + 34pt安全区），但iPhone SE没有Home Indicator，安全区高度为0，导致Tab Bar实际高度只有49pt，底部出现34pt空白。修复方案：使用Auto Layout的安全区约束，让Tab Bar高度自适应设备类型。验收时需在至少3种不同尺寸的设备上检查布局。
常见误区与总结
- 误区一：认为pt和px可以直接互换。实际上pt是逻辑单位，px是物理单位，两者需要通过倍率换算。
- 误区二：忽略Android系统字体缩放。使用dp标注字体会导致字体不跟随系统设置，影响可读性。
- 误区三：只检查一种屏幕尺寸。移动设备尺寸碎片化严重，至少需要覆盖小屏、标准屏、大屏三类设备。
- 误区四：混淆安全区与状态栏。状态栏是显示时间、电量的区域，安全区是保证内容不被刘海、圆角、手势条遮挡的完整区域。
掌握iOS和Android的规范差异、尺寸单位换算和适配基础概念，是UI视觉验收的第一步。在实际验收中，建议建立一份双端对照检查表，逐项核对导航结构、字体单位、安全区、倍率资源等关键指标，确保设计稿在开发还原前就符合平台规范。