Button 按钮

1. 组件概述

Button 是最基础的交互组件，用于触发一个操作或事件。 在车载场景中，按钮需要足够大的点击区域以确保驾驶中的操作安全。

2. 组件类型

3. 组件状态

4. 设计参数

尺寸

• 高度：48px（标准）/ 40px（紧凑）/ 56px（大号）
• 内边距：0 24px（水平）
• 圆角：8px

颜色（Primary类型）

• 背景：color_primary_500 (#0066FF)
• 文字：#FFFFFF
• 边框：无

字体

• 字号：font_size_body (16px)
• 字重：font_weight_medium (500)

5. 交互说明

• 单击触发操作
• 按下时有触觉反馈
• 异步操作时显示Loading状态
• 操作完成后显示结果反馈

6. 车规特殊属性

7. 代码示例

```html 确认 ```

```css .btn-primary { background-color: var(--color-primary-500); color: #FFFFFF; height: 48px; padding: 0 24px; border-radius: var(--radius-button); font-size: var(--font-size-body); } ```

8. 设计原则

• 一个页面中Primary按钮不超过1个
• 驾驶中按钮最小点击区域 ≥ 9mm
• 按钮文案使用动作动词

9. 相关组件

• [IconButton 图标按钮]
• [ButtonGroup 按钮组]

---

#### 5.6 开发对接流程与沟通要点

##### 5.6.1 标准对接流程

Step 1: 设计需求评审 ├── 产品需求对齐 ├── 技术可行性评估 └── 输出：需求评审纪要

Step 2: 设计稿交付 ├── UI设计稿完成 ├── 交互原型交付 └── 输出：设计稿 + 原型链接

Step 3: 设计走查（Design Walkthrough） ├── 设计师向开发讲解设计稿 ├── 开发提出技术疑问 └── 输出：走查纪要 + 问题清单

Step 4: 开发实现 ├── 前端开发 ├── 设计问题反馈（如有） └── 输出：开发版本

Step 5: 设计还原检查 ├── 设计师检查还原度 ├── 记录还原问题 └── 输出：还原问题清单

Step 6: 问题修复与验收 ├── 开发修复问题 ├── 设计师验收确认 └── 输出：验收通过

##### 5.6.2 沟通要点

| 阶段 | 设计师注意事项 | 开发注意事项 |
|------|--------------|-------------|
| **需求评审** | 提前准备设计思路，说明交互逻辑 | 评估技术可行性和性能影响 |
| **设计交付** | 提供完整的设计稿和标注 | 及时确认设计稿完整性 |
| **设计走查** | 详细讲解动效和交互细节 | 记录疑问点，当场确认 |
| **开发实现** | 及时响应开发的设计疑问 | 发现实现困难及时沟通 |
| **还原检查** | 使用还原度Checklist逐项检查 | 配合设计进行还原优化 |
| **验收交付** | 确认还原度达标后签字验收 | 修复所有P0/P1还原问题 |

##### 5.6.3 常见问题处理

| 问题类型 | 设计师应对 | 开发应对 |
|---------|----------|---------|
| 设计无法实现 | 提供替代方案，调整设计 | 说明技术限制，提供可行建议 |
| 动效性能不达标 | 简化动效，降低性能消耗 | 使用性能更好的实现方案 |
| 还原度偏差 | 明确标注和Token，减少模糊空间 | 严格使用设计Token |
| 需求变更 | 走正式变更流程，更新设计稿 | 评估变更影响，调整排期 |

---

#### 5.7 设计还原度检查要点

##### 5.7.1 还原度检查Checklist

**布局与间距（30%权重）：**

- [ ] 页面整体布局是否与 design 一致？
- [ ] 所有元素的尺寸是否准确？
- [ ] 元素间距是否与设计标注一致？
- [ ] 边距、内边距是否正确？
- [ ] 响应式布局在各屏幕尺寸下是否正常？

**色彩（25%权重）：**

- [ ] 所有颜色是否使用了正确的 Design Token？
- [ ] 深浅色模式切换是否正常？
- [ ] 对比度是否满足 ≥ 4.5:1 的要求？
- [ ] 状态色（hover/pressed/disabled）是否正确？

**字体（20%权重）：**

- [ ] 字体家族是否正确？
- [ ] 字号层级是否正确？
- [ ] 字重是否正确？
- [ ] 行高是否正确？
- [ ] 驾驶中最小字号是否 ≥ 18px？

**图标与图片（10%权重）：**

- [ ] 图标尺寸是否正确？
- [ ] 图标风格是否统一？
- [ ] 图标状态（default/disabled）是否正确？
- [ ] 图片清晰度是否达标？

**动效（10%权重）：**

- [ ] 页面转场时长是否在 200-300ms？
- [ ] 按钮反馈时长是否在 80-150ms？
- [ ] 缓动曲线是否正确？
- [ ] 驾驶中是否存在不安全的动画？

**交互（5%权重）：**

- [ ] 点击区域是否 ≥ 9mm（驾驶中）？
- [ ] 交互反馈是否正确？
- [ ] 异常状态处理是否完整？

##### 5.7.2 还原度评分标准

| 评分等级 | 分数范围 | 说明 | 处理方式 |
|---------|---------|------|---------|
| **优秀** | 95-100分 | 还原度极高，仅有极微小差异 | 直接通过 |
| **良好** | 85-94分 | 还原度良好，存在少量可接受差异 | 记录问题，下次迭代优化 |
| **及格** | 70-84分 | 还原度一般，存在明显差异 | 必须修复后重新验收 |
| **不及格** | < 70分 | 还原度差，需要大量修改 | 退回开发重新实现 |

**计算公式：**

还原度总分 = 布局间距得分 × 30% + 色彩得分 × 25% + 字体得分 × 20% + 图标图片得分 × 10% + 动效得分 × 10% + 交互得分 × 5%

---


---

---