OneOS1.2/docs/superpowers/specs/2026-07-21-vehicle-assets-ui-measure.md

车辆资产 UI · 边距与尺寸标注（估算）

来源：参考截图标注
基准宽：390pt（iPhone 常见逻辑宽）
方法：按屏内容像素测量后换算，并按 8pt 栅格圆整
标注图：docs/superpowers/specs/2026-07-21-vehicle-assets-ui-measure.png

1. 页面骨架

元素	尺寸 / 边距	备注
内容区宽度	390	逻辑宽
左右页边距	16	搜索、KPI、列表、Chip 统一
主内容可用宽	358	390 − 16×2
区块纵向间距	12–16	搜索→KPI、Chip→列表

2. 顶栏

元素	尺寸	备注
标题行高	40	「车辆资产」+ 右侧操作
标题字号	≈22–24 / Semibold	SF Pro Display 观感
通知铃 / 加号	36×36	触控建议扩到 44
右侧图标间距	8

3. 搜索栏

元素	尺寸	备注
高度	44	满足触控下限
宽度	358	满宽 − 页边距
圆角	12
左右内边距	12	左放大镜 / 右扫码
占位字号	15–17

4. KPI 横滑卡片

元素	尺寸	备注
卡片宽 × 高	90 × 100	约露出 4 张
卡片间距	8
圆角	12–16
主数字	≈20–22 / Bold	tabular-nums
分类标题	12
底部分页点	Ø6 / 间距 6

5. 筛选 Chip 行

元素	尺寸	备注
Chip 高	32	若偏难点可提到 36
Chip 宽	≈78–90	随文案
Chip 间距	8
圆角	8
字号	13–14	选中态浅蓝底

6. 车辆列表卡片

元素	尺寸	备注
卡片宽 × 高	358 × 118
卡片圆角	16
卡片垂直间距	12
卡片内边距	12	四边一致
车辆缩略图	100 × 74	圆角 ≈8
图文间距	12	缩略图 ↔ 文案
车牌字号	≈17–18 / Semibold
车型副文	13–14	次要灰
Tag 高	≈22	圆角 6
Tag 间距	6–8
右侧状态区	≈72 宽	状态点 + 里程 + 异常标
右箭头	12–16

7. 底栏

元素	尺寸	备注
底栏总高	≈83	含 Home Indicator ≈34
可点区域高	≈49
Tab 等分	5
图标	24×24
文案	10
中心「工作台」	⌀56	略浮起
消息红点	≈16–18

8. 推荐实现 Token（可直接写 CSS）

--page-pad: 16px;
--gap-sm: 8px;
--gap-md: 12px;
--gap-lg: 16px;
--radius-chip: 8px;
--radius-control: 12px;
--radius-card: 16px;
--search-h: 44px;
--chip-h: 32px;
--kpi-w: 90px;
--kpi-h: 100px;
--thumb-w: 100px;
--thumb-h: 74px;
--card-pad: 12px;
--touch-min: 44px;

9. 说明

• 数值为视觉估算，不是设计工具导出的精确标注。
• 若要以设计稿为准，请用 Figma / Sketch 再量一次关键项（页边距、卡片高、缩略图）。
• 手机实现时：触控热区 ≥ 44×44，即使视觉图标只有 24/36。