3. 视觉UI设计理论

3.1 色彩体系

3.1.1 色彩分类框架

以下色值仅为示例性参考值，展示色彩体系的方法论应用。实际项目应以品牌规范和车厂设计系统为准。

车载HMI的色彩体系采用功能化分类，确保每种颜色都有明确的使用场景和语义：

3.1.2 车规对比度标准

车载场景对对比度有极为严格的要求，需同时满足国际标准和车规认证要求：

对比度实测场景：

3.1.3 深浅色模式色彩映射

3.2 字体与排版

3.2.1 字号层级系统

车载HMI采用等差数列构建字号层级，确保信息的层次清晰可辨。

以下字号基于ISO 15008视角高度要求和150PPI屏幕基准的参考值。实际项目应根据目标屏幕PPI和厂商规范调整。

ISO 15008:2017【推荐·国际标准】视角高度要求：可读文本最小视角高度 ≥ 20角分（推荐 ≥ 25角分）。在600mm观看距离、167 PPI屏幕上，对应最小字号约23px（推荐28px）。在500mm近距离观看时，最小字号约19px。

车规字号硬性要求：

单位说明：Android平台推荐使用sp（scalable pixels）作为字号单位，1sp ≈ 1px（默认160 DPI下），在不同DPI屏幕上会按比例缩放，以支持系统字体大小设置（辅助功能）。

3.2.2 字体族规范

字体加载策略：

• 优先加载 Regular (400) 和 Bold (700) 两个字重
• Medium (500) 按需加载
• 字体文件总大小控制在 2MB以内（常驻内存部分）
• 使用字体子集化（Subset）技术，仅加载需要的字符集
• 完整字体库可按需从存储加载，不占用常驻内存

3.2.3 排版规范

3.3 布局与网格系统

3.3.1 安全区域定义

车载屏幕需要在物理安装位置的基础上，定义有效显示和交互的安全区域：

左右舵差异：

3.3.2 网格系统

以下间距值基于8px网格系统的示例性参考。实际项目可根据屏幕尺寸和厂商规范调整基数。

车载HMI采用 8px网格系统（8-Point Grid）作为布局基础：

常用间距对照表：

3.3.3 响应式适配

车载屏幕分辨率是固定的硬件参数，适配应基于固定分辨率设计，配合比例缩放（scale factor）进行适配。

常见车机固定分辨率：

说明：车机适配应以目标分辨率为基准进行固定布局设计，通过scale factor适配不同PPI屏幕，而非使用Web式的响应式断点。

3.4 图标设计规范

3.4.1 图标尺寸规范

以下尺寸基于车载屏幕视角高度计算的参考值。实际项目应根据屏幕PPI和操作距离调整。

车规要求：车机图标最小尺寸应为 24×24px（标准），紧凑场景不低于 20×20px。按钮内图标不低于 20×20px。 参考：Google Material Design车载图标规范推荐最小24dp，Apple CarPlay推荐25pt（约24px@1x）。 12×12px和16×16px图标在车载屏幕上因视角过小（约10.5角分）而不可靠识别，已删除。

3.4.2 图标绘制规范

车规要求：车机图标最小线条粗细应为 2px，标准图标推荐 2.5px，大型图标可使用 3px。1.5px线条在强光直射（>50,000 lux）条件下可能丢失可见性，已删除。

3.4.3 图标设计原则

• 语义清晰：图标应在1秒内被理解，不依赖文案也能传达含义
• 风格统一：同一产品内的图标必须保持风格一致（线型/面型/线面结合）
• 最小复杂度：图标细节不宜过多，在最小尺寸下依然清晰可辨
• 避免文字：图标内不得嵌入文字（除品牌Logo外）
• 状态完整：每个图标至少提供 默认/选中/禁用 三种状态

3.5 组件设计规范

3.5.1 按钮组件（Button）

以下参数为示例性参考值，展示组件规范的方法论。实际项目应以厂商设计系统为准。

按钮是HMI中最核心的交互组件，必须定义完整的状态体系：

物理高度参考：48px对应约7.5mm物理高度（@160dpi），约屏幕高度的6-8%。不同屏幕尺寸下应保持物理高度一致。

按钮全状态定义：

3.5.2 输入框组件（Input）

3.5.3 列表组件（List）

3.5.4 弹窗组件（Dialog / Modal）

弹窗类型：

3.5.5 导航栏组件（Navigation Bar）

3.6 Design Token体系

3.6.1 Token命名规范

采用结构化命名法：{类型}_{用途}_{状态}_{深浅度}

命名示例：

color_primary_default_500     → 主色默认状态（#0066FF）
color_primary_hover_600       → 主色悬停状态（#0052CC）
color_primary_pressed_700     → 主色按下状态（#003D99）
color_primary_disabled_300    → 主色禁用状态（#99C2FF）

bg_primary_light              → 浅色模式主背景（#FFFFFF）
bg_primary_dark               → 深色模式主背景（#121212）

text_primary_light            → 浅色模式主文本（#1A1A1A）
text_primary_dark             → 深色模式主文本（#BDBDBD）

font_size_h1                  → H1标题字号（36px）
font_weight_bold              → 粗体（700）

space_2x                      → 标准间距（16px）
radius_button                 → 按钮圆角（8px）

shadow_card                   → 卡片阴影（0 2px 8px rgba(0,0,0,0.08)）
time_transition_fast          → 快速过渡（150ms）
time_transition_normal        → 标准过渡（250ms）

3.6.2 Token层级架构

┌─────────────────────────────────────────────┐
│           第一层：Global Token                │  ← 品牌基础值
│  （品牌色板、基础字号、基础间距）              │
├─────────────────────────────────────────────┤
│           第二层：Alias Token                 │  ← 语义化映射
│  （语义命名：color_primary、text_primary）    │
├─────────────────────────────────────────────┤
│           第三层：Component Token             │  ← 组件级映射
│  （组件专用：button_primary_bg、               │
│            input_focus_border）               │
└─────────────────────────────────────────────┘

Token层级对应关系示例：

3.7 明暗模式设计

3.7.1 日间模式设计策略

3.7.2 夜间模式设计策略

3.7.3 模式切换规则

切换过渡动画：

• 日间↔夜间模式颜色切换：推荐 1000-2000ms 慢速渐变（匹配人眼瞳孔适应时间）
• 亮度调节：推荐 100-300ms 快速响应（基于环境光传感器）
• 两者应分开处理，亮度调节快速响应，颜色切换缓慢过渡
• 切换方式：颜色渐变过渡，避免闪烁
• 过渡区间（50-200 lux）内平滑过渡亮度而非硬切换模式

3.8 车规视觉安全

3.8.1 强光可见性

亮度设计基准：标注1000 cd/m²（nits）仅高端车机可达，设计时请以实际屏幕参数为准。建议以最低目标亮度（如400 nits）作为强光场景验证基准。

3.8.2 夜间舒适性

3.8.3 无干扰设计

3.8.4 防眩光设计