1. 设计规范体系
1.1 设计规范的意义与价值
在车载HMI领域,设计规范不仅是视觉统一的标准文档,更是保障驾驶安全、提升开发效率、降低维护成本的核心基础设施。
核心价值体现:
| 维度 | 价值说明 | 车载场景特殊性 |
|---|---|---|
| 安全层面 | 统一的交互与视觉规范确保驾驶者在任何界面都能形成肌肉记忆,减少认知负荷 | 驾驶中视线离开路面时间不得超过2秒,一致性直接关联生命安全 |
| 效率层面 | 规范化的组件库和设计系统可显著减少重复设计工作,加速开发迭代(行业研究表明设计系统可提升20%-50%的设计效率,具体取决于组件库成熟度和项目规模) | 车规级开发周期长,规范能显著压缩设计-开发对齐时间 |
| 质量层面 | 通过标准化设计Token和组件状态定义,消除设计偏差,提升产品质感 | 车规级对字体清晰度、对比度、防眩光有强制要求 |
| 协同层面 | 设计规范作为设计与开发之间的"共同语言",减少沟通成本和还原误差 | 多供应商、多团队协同开发是行业常态 |
| 品牌层面 | 统一的设计语言构建品牌认知,提升用户对座舱体验的满意度和忠诚度 | 座舱体验已成为汽车品牌差异化竞争的核心 |
理论依据: 根据Nielsen Norman Group的十大可用性原则及ISO 9241-210人机交互标准,一致性(Consistency)和容错性(Error Prevention)在车载场景中的权重远高于消费电子场景。
1.2 设计规范体系框架
结合车载HMI的特殊性,设计规范体系采用**"五层金字塔"架构**(该框架参考了主流设计系统的层级理论,并根据车规场景进行了针对性调整):
┌─────────────────┐
│ 第五层:应用模板 │ ← 页面模板、流程模板、典型场景方案
│ (Templates) │
├─────────────────┤
│ 第四层:页面组件 │ ← 按钮、输入框、卡片、导航栏等
│ (Components) │
├─────────────────┤
│ 第三层:设计模式 │ ← 导航模式、表单模式、列表模式
│ (Patterns) │
├─────────────────┤
│ 第二层:基础规范 │ ← 色彩、字体、布局、图标、动效
│ (Foundations) │
├─────────────────┤
│ 第一层:设计原则 │ ← 安全性、一致性、效率性、可控性
│ (Principles) │
└─────────────────┘
各层级详细说明:
| 层级 | 名称 | 核心内容 | 对应文档/交付物 |
|---|---|---|---|
| L1 | 设计原则 | 定义产品设计的核心价值观和决策准则 | 设计原则白皮书 |
| L2 | 基础规范 | 色彩体系、字体系统、网格系统、图标规范、动效参数 | Design Token库、视觉规范文档 |
| L3 | 设计模式 | 经过验证的通用交互解决方案(导航、搜索、筛选、设置等) | 模式库、最佳实践文档 |
| L4 | 页面组件 | 可复用的UI组件,含全部状态定义(默认/悬停/按下/禁用/加载) | Figma/Sketch组件库 |
| L5 | 应用模板 | 针对典型业务场景的完整页面方案 | 页面模板库、流程图 |
1.3 设计原则的制定
车载HMI设计原则以**"安全第一"**为最高准则,在此基础之上建立五大核心原则:
原则一:安全性(Safety-First)
定义:所有设计决策必须以驾驶安全为首要考量,任何可能分散驾驶者注意力或延长操作时间的方案都应被拒绝。
具体标准:
- 驾驶中界面操作的**单次扫视(single glance)**不得超过 2秒【推荐·美国】NHTSA自愿性指南(2013),非强制法规。mean glance duration ≤ 2s,且85%的扫视≤2s
- 驾驶中**总视线离开时间(TEORT, Total Eyes-Off-Road Time)**不得超过 12秒【推荐·美国】NHTSA自愿性指南,非强制法规。任务过程中所有离开路面的扫视时间累加值
- 驾驶中禁止播放视频、禁止文本输入、禁止复杂的层级导航
- 所有关键信息必须在 1.5秒内 可被驾驶者识别和理解
- 紧急警告信息应在 200ms内 开始呈现(声音+视觉+触觉三重提醒),确保驾驶者能够及时感知
实践指导:
- 设计评审时必须进行"驾驶场景模拟测试":在模拟驾驶环境下测试操作时长
- 建立"安全红线清单",任何跨越红线的设计直接否决,无需讨论
- 安全相关功能(如倒车影像、碰撞预警)的界面交互最高优先级,可打断任何当前任务
- 具体车速阈值和交互限制策略因车企和产品定义而异,部分车企在D档停车(AutoHold)时允许中等复杂度的交互
原则二:一致性(Consistency)
定义:在同一产品的不同界面、不同屏幕、不同使用场景中,保持视觉、交互、语义的统一。
具体标准:
- 同类操作的手势必须全局一致(如:左滑删除在所有列表中行为一致)
- 同类组件的视觉样式必须全局一致(如:主按钮在所有界面使用同一套Design Token)
- 同一语义的图标不得出现多种视觉表达
- 反馈机制全局统一(成功 = 简短文字 + 品牌绿色,失败 = 简短文字 + 品牌红色)
实践指导:
- 建立组件使用Checklist,设计师在交付前逐项自查
- 定期(每两周)进行跨模块的一致性走查
- 使用Figma的Shared Library功能确保组件全局同步
原则三:反馈性(Feedback)
定义:系统必须在合理时间内对用户的每一个操作给予清晰的反馈,让用户知道系统已响应其操作。
具体标准:
- 触觉反馈(按钮按下)延迟 ≤ 50ms(基于行业通用标准,参考Qualcomm Snapdragon Automotive Platform推荐值)
- 视觉反馈(按下状态)延迟 ≤ 100ms
- 操作响应超过 200ms 应显示加载状态
- 加载超过 3秒 必须显示进度指示
- 任何可能失败的操作必须有明确的错误提示和恢复指引
实践指导:
- 定义"零反馈场景清单"——哪些场景不需要反馈(如:音量旋钮连续调节的中间过程)
- 为所有异步操作设计Skeleton Screen,避免白屏等待
- 错误提示必须包含:错误说明 + 解决建议 + 操作入口(如需要)
原则四:可控性(Controllability)
定义:用户对系统和界面具有充分的控制能力,可以自由地发起、中断、撤销操作。
具体标准:
- 任何二级及以上页面必须提供明确的"返回"入口
- 不可逆操作(如:恢复出厂设置)必须提供二次确认
- 长时间运行的任务必须支持取消
- 系统自动化行为(如:自动调节亮度)必须允许用户覆盖
实践指导:
- 所有弹窗/浮层必须可通过点击蒙层或物理返回键关闭
- 设计"操作熔断机制":连续错误操作3次后提供引导帮助
- 状态变更前(如导航路线切换)提供预览和确认
原则五:效率性(Efficiency)
定义:在满足安全性的前提下,通过合理的布局、快捷操作、智能推荐等手段,帮助用户以最少操作步数完成目标。
具体标准:
- 高频功能的操作层级不得超过 2层(从首页算起)
- 首屏必须承载用户 80%以上 的常用操作
- 提供快捷操作入口:快捷卡片、全局搜索、语音唤起
- 支持操作记忆:记住用户上次的选择和偏好设置
实践指导:
- 通过数据埋点分析功能使用频率,定期调整功能布局
- 使用"一键操作"替代"多步操作"(如:一键回家、一键连接蓝牙)
- 首页支持自定义,允许用户将常用功能前置
1.4 设计规范的生命周期管理
设计规范是"活文档",需要建立完整的生命周期管理机制:
创建 → 评审发布 → 应用落地 → 收集反馈 → 迭代优化 → 版本更新 → 培训宣贯 → 创建...
各阶段要点:
| 阶段 | 核心任务 | 参与角色 | 输出物 |
|---|---|---|---|
| 创建 | 梳理产品需求,定义设计原则和基础规范 | 主设计师 | 设计原则草案、基础规范V0.1 |
| 评审发布 | 跨部门评审(设计/开发/产品/测试),确保安全合规 | 设计评审委员会 | 评审纪要、正式发布版规范 |
| 应用落地 | 在实际项目中应用规范,验证可行性 | 全体设计师 | 设计稿、组件库 |
| 收集反馈 | 收集设计师和开发者的使用反馈和改进建议 | 规范管理员 | 反馈清单、问题报告 |
| 迭代优化 | 定期更新规范,新增组件,优化参数 | 主设计师 | 更新日志、优化方案 |
| 版本更新 | 按SemVer规范发布新版本,同步所有团队 | 规范管理员 | 版本说明文档 |
| 培训宣贯 | 组织培训和分享,确保新成员快速上手 | 设计负责人 | 培训PPT、Q&A文档 |
版本管理规范:
采用语义化版本控制(SemVer):主版本号.次版本号.修订号
| 版本变更类型 | 说明 | 示例 |
|---|---|---|
| 主版本号(X.0.0) | 不兼容的规范性变更,原则级调整 | 1.0.0 → 2.0.0:全面改版 |
| 次版本号(x.Y.0) | 向下兼容的功能新增,组件新增 | 1.1.0 → 1.2.0:新增HUD组件 |
| 修订号(x.y.Z) | 向下兼容的Bug修复和参数微调 | 1.1.0 → 1.1.1:按钮圆角从6px改为8px |
最佳实践:
- 每季度进行一次规范的全面评审
- 每月收集一次使用反馈
- 规范更新后必须在 3个工作日 内同步到所有相关团队
- 保留规范的完整变更历史,便于追溯和回滚