🚗
车机界面交互
原型制作实战
📘 30章完整课程 · 从入门到综合项目
🎯
风格 · 30章全
01
车机交互设计概述
趋势
智能座舱
发展趋势 · HMI设计原则 · 车载交互特殊性
02
设计工具入门
Figma
界面介绍
· 画板与图层管理 · 组件基础概念
03
设计系统搭建
规范
颜色系统
定义 · 字体排版规范 · 图标与控件库
04
布局与栅格
适配
车载屏幕分辨率
适配 · 栅格系统 · 安全区域与避让区
05
导航与页面结构
跳转
底部导航栏
· 侧边栏与仪表联动 · 页面层级与跳转逻辑
06
仪表盘设计
动效
时速与转速表盘
· 信息优先级排序 · 动效与数据刷新
07
中控屏主界面
卡片
卡片式布局
· 快捷控制面板 · 媒体播放器组件
08
空调控制面板
交互
温度调节
· 风量与风向控制 · 座椅加热与通风
09
车辆设置界面
配置
驾驶模式切换
· 灯光与门锁设置 · ADAS辅助驾驶配置
10
多媒体娱乐系统
影音
音乐播放器
· 电台与在线音频 · 视频播放与投屏
11
导航系统设计
地图
地图组件集成
· 路线规划与引导 · POI搜索与收藏
12
语音交互设计
语音
语音唤醒与反馈
· 多轮对话流程 · 语音控制车辆功能
13
方向盘控制适配
按键
按键功能映射
· 滚轮与拨片交互 · HUD联动设计
14
多屏互动设计
联动
仪表-中控-副驾屏
联动 · 信息流转与接力 · 拖拽与共享
15
HUD抬头显示设计
AR
信息层级与布局
· AR导航叠加 · 亮度与自适应调节
16
手势交互设计
触控
滑动、点击与长按
· 多指手势定义 · 防误触策略
17
深色模式与护眼模式
视觉
自动切换逻辑
· 色彩对比度优化 · 夜间驾驶场景适配
18
响应式布局与自适应
适配
不同车型屏幕适配
· 横竖屏切换 · 字体与控件缩放
19
交互动效设计
动效
页面转场动画
· 微交互动效 · 加载与反馈动效
20
原型交互连线
连线
Figma原型连线
· 触发条件与动作设置 · 条件逻辑与变量
21
用户测试与迭代
测试
可用性测试方法
· 热力图与眼动追踪 · 基于反馈的迭代优化
22
设计规范文档
规范
交互规范撰写
· 视觉规范输出 · 组件库维护与版本管理
23
竞品分析
分析
主流车型HMI对比
· 功能亮点拆解 · 差异化设计策略
24
设计系统实战
组件
从零搭建完整组件库
· 原子设计方法论 · 团队协作与共享
25
高保真原型制作
高保真
真实数据模拟
· 状态与异常处理 · 动效与交互细节
26
设计评审与交付
交付
评审流程与checklist
· 开发标注与切图 · 设计走查与验收
27
车载语音场景实战
语音
导航语音交互流程
· 音乐点播与控制 · 车辆控制指令集
28
驾驶模式主题设计
主题
运动模式
· 舒适模式 · 节能模式视觉切换
29
充电与能源管理
能源
充电状态显示
· 续航预估与充电规划 · 电池健康与提醒
30
综合项目实战
项目
完整车机HMI设计流程
· 从需求到交付全链路 · 作品集与面试指南