车载HMI设计系统 · 课程目录

01 车载HMI概述

智能座舱发展趋势 · HMI设计原则 · 与传统UI的区别

查看章节 01

02 设计系统基础

设计系统的定义 · 原子设计方法论 · 设计Token概念

查看章节 02

03 设计工具与流程

Figma/Sketch应用 · 设计交付流程 · 版本管理策略

查看章节 03

04 色彩系统设计

车载HMI色彩心理学 · 深色模式 · 高对比度与可读性

查看章节 04

05 字体与排版

车载字体选择 · 字号层级 · 行距与字间距规范

查看章节 05

06 图标系统设计

图标风格统一 · SVG库搭建 · 语义化与可识别性

查看章节 06

07 间距与栅格系统

8px网格 · 间距规范 · 响应式布局适配

查看章节 07

08 组件库架构

组件分层设计 · 命名规范 · 组件文档化

查看章节 08

09 按钮组件

按钮状态 · 尺寸规范 · 图标按钮与文字按钮

查看章节 09

10 输入组件

文本输入框 · 搜索框 · 数字调节器 · 语音输入

查看章节 10

11 导航组件

底部导航栏 · 侧边栏 · 标签页 · 面包屑导航

查看章节 11

12 卡片与列表

信息卡片 · 列表视图 · 网格视图 · 滑动操作

查看章节 12

13 弹窗与对话框

警告弹窗 · 确认对话框 · 底部面板 · Toast

查看章节 13

14 仪表盘组件

时速表 · 转速表 · 电量显示 · 进度环

查看章节 14

15 地图与导航组件

地图容器 · 路线规划 · POI标记 · 实时交通

查看章节 15

16 媒体控制组件

音乐播放器 · 音量控制 · 视频播放 · 电台

查看章节 16

17 空调控制组件

温度调节 · 风量控制 · 座椅加热 · 空气净化

查看章节 17

18 车辆设置组件

驾驶模式切换 · 灯光控制 · 门锁 · 驾驶辅助

查看章节 18

19 通知与告警系统

通知优先级 · 告警弹窗 · 语音播报联动

查看章节 19

20 多模态交互设计

触控 · 语音 · 手势 · 旋钮融合设计原则

查看章节 20

21 动效设计原则

缓动函数 · 动效时长 · 微交互 · 转场动画

查看章节 21

22 无障碍设计

色盲模式 · 字体放大 · 语音导航 · 触觉反馈

查看章节 22

23 设计Token管理

Token命名规范 · 层级结构 · 与代码映射

查看章节 23

24 主题系统设计

浅色/深色切换 · 品牌主题定制 · 动态更新

查看章节 24

25 组件状态管理

加载态 · 空态 · 错误态 · 边界情况处理

查看章节 25

26 响应式布局

7寸~15.6寸适配 · 横竖屏切换

查看章节 26

27 设计系统文档化

Storybook搭建 · 组件使用文档 · 规范文档

查看章节 27

28 设计系统测试

视觉回归测试 · 可用性测试 · 组件功能测试

查看章节 28

29 设计系统维护

版本更新策略 · 废弃组件处理 · 社区反馈

查看章节 29

30 实战项目

从0到1搭建车载HMI设计系统 · 完整组件库与规范文档

查看章节 30