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个工作日 内同步到所有相关团队
  • 保留规范的完整变更历史,便于追溯和回滚