车载 HMI 设计超简单!跟练教程让你3 步搞定!

发布时间:2023-01-10 19:02:40

HMI(Human Machine Interface)是指人机界面,是指人与机器相互作用的界面。在汽车领域,HMI 就是汽车内部用于人与车辆交互的界面。这包括了车载信息娱乐系统、仪表盘、方向盘控制、座椅控制等。设计车载 HMI 界面需要考虑到很多因素,例如安全、可用性、易用性、用户体验等。同时,车载 HMI 设计还需要考虑到车辆内部空间的限制、光线条件、使用场景等。如果你想进入车载 HMI 设计行业,需要具备一定的设计能力和技能,例如界面设计、交互设计、用户体验设计等。同时,对汽车行业的知识也是必不可少的。本期我们将带来车载 HMI 设计教程,让你更快掌握车载 HMI 设计!还等什么,点击即时设计一起跟练吧!

车载 HMI 设计

1、设计技巧要点

通过调整背景模糊的不透明度打造通透的毛玻璃效果。

工具栏和状态栏可以通过自动布局快速排版。

2、车载 HMI 多功能区教程

新建背景

新建画板尺寸为:1440PX ^ 720PX ,设置背景色 #20212C

绘制多功能区域

使用【矩形工具】绘制一个 460px ^ 632px 的矩形,并设置上方两个圆角为 24px,设置线性渐变 #151921、#20212C 。再绘制两个 400px ^ 210px 的矩形,调整矩形形状如下,全选矩形点击上方的「减去顶层」。

选中矩形,设置填充:#44576E、不透明度20%设置阴影:颜色:#000000、不透明度 70%、「0、10、25、0」背景模糊:60

绘制圆形,设置填充:#FF0000、不透明度10%高斯模糊:100

绘制圆形,设置线性渐变:#0A2EA3、#004FE3设置阴影:颜色:#003ECF、不透明度 60%、「-20、18、65、0」

再给月球增加一些元素装饰,绘制圆形添加线性渐变,在月球表面增加陨石坑,周围的小星星元素就是在圆形上添加阴影完成。

把刚才的矩形复制一个复制,制作矩形卡片的高光部分,取消填充,添加两个大小为1.5px的描边渐变渐变角度从左上至右下,渐变颜色 #ADC9D9,不透明度100%-0%渐变角度从右下至左上,渐变颜色 #ADC9D9,不透明度100%-0%

添加一些文案信息,丰富卡片的内容

同样使用线性渐变再一个制作音乐播放器卡片和车辆行驶模式,这样左侧的多功能区卡片就完成了。

3、车载 HMI 地区导航教程

使用【矩形工具】绘制一个 780px ^ 592px 的矩形,圆角为 24px,填充颜色 #151921 设置阴影:颜色:#000000、不透明度 5%、「0、10、25、0」把素材地图放置于矩形上方,同时选中见创建「轮廓蒙版」

使用【矩形工具】绘制一个 780px ^ 592px 的矩形,圆角为 24px,填充颜色 #151921 设置阴影:颜色:#000000、不透明度 5%、「0、10、25、0」把素材地图放置于矩形上方,同时选中见创建「轮廓蒙版」

使用【矩形工具】绘制一个 780px ^ 592px 的矩形,圆角为 24px,填充颜色 #151921 设置阴影:颜色:#000000、不透明度 5%、「0、10、25、0」把素材地图放置于矩形上方,同时选中见创建「轮廓蒙版」

添加一些里程相关的文本信息和图标

绘制一个60px ^ 60px 的圆形,填充线性渐变:#D2273C、#FF344D设置描边:颜色 #FFE8E8、居中、3px设置阴影:颜色 #701111、不透明度50%、「0、0、20、0」

绘制一个260px ^ 160px 的矩形,圆角为24,填充颜色: #4F78D6设置阴影:#000000、不透明度70%、「0、10、25、0」设置外观:不透明度10%

复制一个矩形,取消填充,描边设置内部线性渐变,两端颜色为:#3F466E,渐变不透明度:80%-0%

添加相关的文本信息,同样的操作,再为地图导航增加功能图标

在左侧添加一个工具栏,大家也可以根据自己的想法来添加,案例图只是作为参考

以上就是车载 HMI 设计教程的全部内容,在即时设计上万个免费资源一搜即用,更多车载 HMI 设计资源都有哦!