HMI 视觉设计实战

🚀 30章 · 从入门到作品集

01 HMI设计概述

汽车HMI的定义、发展历程、设计原则与趋势。

02 设计工具入门

Figma/Sketch界面介绍、画板与图层、基础绘图工具。

03 色彩与品牌

汽车HMI色彩心理学、品牌色应用、深色模式设计规范。

04 排版与字体

车载字体选择、字号层级、信息可读性设计。

05 图标设计

功能图标与情感图标、图标网格与规范、图标动效基础。

06 布局与栅格

车载屏幕比例、栅格系统、信息层级与视觉流。

07 仪表盘设计

时速表、转速表、电量/油量显示、警示灯设计。

08 中控屏设计

导航界面、音乐播放器、空调控制面板布局。

09 HUD抬头显示

HUD信息架构、视觉干扰控制、AR导航元素设计。

10 交互手势

点击、滑动、拖拽、多指手势在车载场景的应用。

11 语音交互界面

语音唤醒、反馈动画、多模态交互设计。

12 动效设计

转场动画、微交互动效、加载与反馈动效。

13 驾驶模式切换

运动模式、舒适模式、经济模式的视觉差异。

14 夜间模式

自动亮度调节、色温变化、防眩光设计。

15 通知与警告

低电量警告、碰撞预警、系统通知的视觉优先级。

16 多屏联动

仪表-中控-副驾屏的交互逻辑与视觉一致性。

17 方向盘控制

方向盘按键布局、触控反馈、视觉映射。

18 无障碍设计

色盲模式、字体放大、语音辅助设计。

19 原型制作

Figma原型连线、交互流程、点击热区设置。

20 用户测试

可用性测试方法、眼动追踪基础、测试报告撰写。

21 设计系统

组件库搭建、设计Token、版本管理。

🧱 设计系统

22 3D视觉元素

3D车模渲染、场景切换、实时反射效果。

23 充电界面设计

充电状态显示、充电桩地图、预约充电流程。

24 泊车辅助界面

360环视、雷达波显示、泊车路径规划。

25 空调与座椅控制

触控滑条、座椅按摩模式、氛围灯联动。

26 娱乐系统设计

视频播放界面、游戏中心、K歌功能界面。

27 车辆设置界面

驾驶辅助设置、灯光设置、门锁控制布局。

28 OTA升级界面

升级进度显示、版本说明、重启提示设计。

29 国际化设计

左舵/右舵适配、多语言文本长度处理、文化差异。

30 作品集与求职

HMI作品集结构、项目复盘方法、面试常见问题。