111 lines
3.2 KiB
Markdown
111 lines
3.2 KiB
Markdown
# 车辆资产 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）
|
||
|
||
```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。
|