谈到 HMI 大多数设计师可能感到既熟悉又陌生。不敢轻易进入车载 HMI 这个新型的行业，觉得有难度、门槛要求高。其实简单来讲，HMI 就是汽车上的 UI 界面。如果你对这个车载 HMI 这个行业领域感兴趣，快来跟着本期临摹教程一起学习，相信你会对车载 HMI 设计有新的认识和理解 ~
车载 HMI 设计相关素材、模板、教程集合
https://js.design/f/cp9XKY?source=zhihu&plan=ys326
多功能区教程
新建背景 新建画板尺寸为：1440PX ^ 720PX ，设置背景色 #20212C
添加图片注释，不超过 140 字（可选）
绘制多功能区 使用【矩形工具】绘制一个 460px ^ 632px 的矩形，并设置上方两个圆角为 24px，设置线性渐变 #151921、#20212C 。再绘制两个 400px ^ 210px 的矩形，调整矩形形状如下，全选矩形点击上方的「减去顶层」。
添加图片注释，不超过 140 字（可选）
选中矩形，设置填充：#44576E、不透明度20%设置阴影：颜色：#000000、不透明度 70%、「0、10、25、0」背景模糊：60
添加图片注释，不超过 140 字（可选）
绘制圆形，设置填充：#FF0000、不透明度10%高斯模糊：100
添加图片注释，不超过 140 字（可选）
绘制圆形，设置线性渐变：#0A2EA3、#004FE3设置阴影：颜色：#003ECF、不透明度 60%、「-20、18、65、0」
添加图片注释，不超过 140 字（可选）
再给月球增加一些元素装饰，绘制圆形添加线性渐变，在月球表面增加陨石坑，周围的小星星元素就是在圆形上添加阴影完成。
添加图片注释，不超过 140 字（可选）
把刚才的矩形复制一个复制，制作矩形卡片的高光部分，取消填充，添加两个大小为1.5px的描边渐变渐变角度从左上至右下，渐变颜色 #ADC9D9，不透明度100%-0%渐变角度从右下至左上，渐变颜色 #ADC9D9，不透明度100%-0%
添加图片注释，不超过 140 字（可选）
添加一些文案信息，丰富卡片的内容
添加图片注释，不超过 140 字（可选）
同样使用线性渐变再一个制作音乐播放器卡片和车辆行驶模式，这样左侧的多功能区卡片就完成了。
添加图片注释，不超过 140 字（可选）
地图导航教程
使用【矩形工具】绘制一个 780px ^ 592px 的矩形，圆角为 24px，填充颜色 #151921 设置阴影：颜色：#000000、不透明度 5%、「0、10、25、0」把素材地图放置于矩形上方，同时选中见创建「轮廓蒙版」
添加图片注释，不超过 140 字（可选）
复制一个矩形放在地图上方，填充径向渐变，由地图的中心点向外渐变设置两端颜色为：#151921、渐变不透明度：0%-100%营造一种地图中间实，边缘虚化的效果
添加图片注释，不超过 140 字（可选）
绘制一个 780px ^ 190px 的矩形，置于地图底部，设置填充为线性渐变设置两端颜色为：#151921、渐变不透明度：0%-100%
添加图片注释，不超过 140 字（可选）
添加一些里程相关的文本信息和图标
添加图片注释，不超过 140 字（可选）
绘制一个60px ^ 60px 的圆形，填充线性渐变：#D2273C、#FF344D设置描边：颜色 #FFE8E8、居中、3px设置阴影：颜色 #701111、不透明度50%、「0、0、20、0」
添加图片注释，不超过 140 字（可选）
绘制一个260px ^ 160px 的矩形，圆角为24，填充颜色： #4F78D6设置阴影：#000000、不透明度70%、「0、10、25、0」设置外观：不透明度10%
添加图片注释，不超过 140 字（可选）
复制一个矩形，取消填充，描边设置内部线性渐变，两端颜色为：#3F466E，渐变不透明度：80%-0%
添加图片注释，不超过 140 字（可选）
添加相关的文本信息，同样的操作，再为地图导航增加功能图标
添加图片注释，不超过 140 字（可选）
在左侧添加一个工具栏，大家也可以根据自己的想法来添加，案例图只是作为参考
扫一扫
2025
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
