HMI车载UI设计 - 第三章:HMI车载模块设计
分享给朋友:

按住画面移动小窗

下载
HMI应用图标设计-车载界面实操课08
虎课APP支持视频下载
扫码下载/打开虎课APP
支持视频下载,随时随地学
手机观看
扫一扫,手机继续学
扫码下载/打开虎课APP
支持视频下载,随时随地学
HMI应用图标设计-车载界面实操课08_虎课网
记笔记

全新AI视频总结上线

一键节省你80%学习时间

视频暂不支持AI视频总结
AI视频总结
编辑完成后,记得点我~

383

已学

9小时

时长

0

配套素材

完课证书

¥199(¥299)

全站通VIP免费畅学

立即购买
图文教程学员评价 (4条评论)视频字幕

本节课讲解虎课_车载课程_第八课,同学们可以在下方评论区进行留言,老师会根据你们的问题进行回复,作业也可以在评论区进行提交。

那我们开始今天的教程吧。

1.车载应用图标,左边是汽车的,右边是手机的,车载图标有系统应用图标+第三方APP组成。

2.车载应用图标的原则,不要设计的过于复杂,保证识别性,风格保持一致。

3.打开【PS】,新建256*256的画布,创建背景颜色,添加【圆角】。

4.制作开关的造型,浏览器找参考,调整位置和间距。

查看更多
您需要学习后才可以评价, 立即学习
您需要学习后才可以评价, 立即学习
评论列表
仅显示有内容的评论
仅显示带图评论
排序方式:

Hello大家好 ,我是本节课的讲师大冯 ,我们今天要讲的这个课 ,是HMI的应用图标设计 ,在设计之前我们要知道 ,什么是车载的应用图标 ,那车载的应用图标 ,其实看到这张图上来讲的话 ,也能很好的理解 ,左边的图是车机的 ,右边图是手机的 ,你可以对比一下 ,像左边图的这个全部功能有地图,音乐 ,电台,车辆 ,空调,座椅这些等等 ,那你再看一下右边图 ,从头到尾就是计算器,日历,照片 ,相机,时钟,天气 ,备忘录这些等等 ,那么这些功能全是手机上 ,或者是车机上 ,原生自带的系统里面的这个图标 ,那车载的应用图标 ,其实就是涉及这些 ,在原生系统上的这个图标 ,那车载的应用图标 ,大体上组成的部分有两种 ,第一个是系统的应用图标 ,第二个是第三方的APP图标 ,第三方的APP图标 ,其实包括像B站 ,还有这个微博,爱奇艺等等的 ,车载应用的APP接入 ,那么像第三方的APP图标 ,其实是由他们本场自带的 ,UI设计师来去进行适配的 ,并不需要我们HMI设计师 ,来去进行设计 ,我们所设计的就是系统应用的图标 ,其实在车载应用图标里 ,设计的风格也是多种多样的 ,比如说像左边和右边的这种 ,那么左边的这种图标风格 ,是玻璃拟物化是吧 ,然后右边的可能是一些比较美观的 ,白金色的配色 ,那其实你可以看到这种图标 ,都是HMI比赛上的一个图标 ,并不太适合我们真正 ,落地到现实车机风格中 ,因为我们在现实车机风格中 ,设计的时候需要考虑到很多的元素 ,单单的这种颜色识别性差 ,基本上就把这个图标就pass掉了 ,

说到这里我们再来看一下 ,车载应用图标的原则 ,到底什么样的应用图标 ,才算能落地 ,是一个好的应用图标 ,实车应用图标首先要遵循第一个 ,就是 ,不要设计的太过于复杂 ,一定要保证它的识别性 ,第二个就是风格保持一致 ,最少是需要保持这两种原则 ,如果说这两种原则都不能保证的话 ,这个一定是不能落地的概念图标 ,那么废话不多说 ,我们来到实操时间 ,那首先说明一下 ,我们实操最好使用PS ,来去进行设计 ,因为PS的光影表现很强 ,然后它的效果也会很好 ,包括它也是可以自定义 ,你可以用一个蒙版来去进行擦除 ,体现它的光效这一块会更加的好用 ,其实这种风格也可以使用 ,Sketch或者 ,使用Figma来去进行设计 ,这个软件不限 ,只不过Sketch跟Figma的话 ,它的光影效果表现的会比较差一些 ,更不会特别好操作一些 ,毕竟一个是矢量软件 ,一个是位图的软件 ,那么好,废话不多说 ,我们来开始进行今天的实操 ,首先打开这个PS ,在这里文件新建,新建一个 ,256×256的 ,乘256的这个图标是正方形 ,分辨率就是72 ,颜色,RGB颜色 ,8bit ,剩下的都不用动 ,我们点击创建就可以了 ,因为演示所以说 ,图标设计的会稍微的大一些 ,具体需要设计多大尺寸 ,按照工作的需要来去进行好吧 ,那么我们首先来去设计第一个图标 ,也就是偏拟物化的这个图标开关 ,首先给它建立一个 ,256×256的尺寸 ,

Ctrl+A对齐 ,我这里面把快捷键也打出来了 ,Ctrl+D可以看到 ,我这个快捷键就OK了 ,接下来为了方便识别 ,我们可以稍微的给它换一个颜色 ,然后在这里给它一点圆角 ,那么这个圆角你可以随意的拖动 ,在中间的这个部分 ,是将角半径值连接到一起 ,也就是说我无论拖动到多大 ,上下左右的4个角 ,都会跟着我来去进行变形 ,如果说我把这个小链接的 ,小锁符号点掉之后 ,假如说我调一个60 ,你可以看到此时的这个角度 ,就是单独的控制这一个角 ,而不是说4个角都是控制的好吧 ,那么我们这个调回到原先的数值 ,让它保持一致 ,给它一个30就OK了 ,或者说那个你自己自定义 ,大小也是OK的 ,那么我们来先把这个造型来去确定 ,这个背板确定好之后 ,就是这个造型,那开关 ,大概是长什么样呢 ,给它换一个颜色 ,然后给它拉伸一下 ,接下来就是里面的这个圆形是吧 ,这会儿按住Shift ,就可以给它改变一下颜色了 ,大概是这么个造型对吧 ,确定好造型之后 ,我们再来去看一下参考 ,这里面可以打开浏览器,找到花瓣 ,找到花瓣之后 ,你可以去搜索很多的参考 ,

比如说我们要做的开关 ,是吧,去看一下 ,在这里面选中UI,UX ,或者是画板也OK的 ,你可以看一下这个图标 ,为什么说找到花瓣 ,是因为它这里面有很多的 ,早些年的 ,拟物图标风格 ,很适合我们车载里面的应用 ,可以看到像这样的图标 ,也是非常的合适 ,和我们刚才所做的差不多 ,或者是稍微追求个性一点 ,追求整车体验多一些的话 ,也可以设计成这种六边形的 ,还有像这个图标 ,就已经是非常经典了 ,好些年之前的经典图标,确定好这个形状 ,我们要去设计成这样的形状 ,可以看到 ,它是一个比较偏蓝色的配置是吧 ,接下来就是细致的调整一下 ,我们可以Shift稍微的 ,把这个大体的形状确定下来 ,给它一个70,试一下 ,差不太多 ,其实我们也可以 ,通过后续调整的方式 ,来去进行调动 ,给它一个对齐 ,这个时候可以按住 ,Command键 ,也就是这个Alt键去进行测量 ,可以看到这个测量的值 ,并不是特别的准确是吧 ,因为它这个是多出来点4 ,在这里PS里面 ,尽量不要出现这种小数点 ,会很容易造成对不齐的情况发生 ,保证上下和右 ,都是5的像素间距就可以了 ,如果到时不合适 ,我们再去往里面去缩 ,调整好之后我们先去调整一下这个背板 ,

可以使用一个蓝色 ,上面的颜色 ,吸一下直接 ,这里面好像吸取不了 ,我们就给它稍微一个 ,饱和度低一点点的这个蓝色值 ,看一下 ,其实在整个拟物图标设计里面 ,颜色和投影 ,以及外发光这种空间的调用 ,需要配合得非常的好 ,否则的话你设计出来的图形 ,可能并不是特别的好看 ,这个颜色也是一个大项 ,再就是我们这个显示器的颜色 ,不一定要特别的准 ,你可以根据你实际项目 ,来去进行判断 ,这个颜色差不太多了 ,具体再往深的话我就不进行调整了 ,接下来就是这个里面的开关 ,后嵌背景 ,双击右边,这个空白之处 ,可以先给它一个内阴影,这个内阴影的主要作用 ,是向下去嵌 ,你可以看到这个 ,光是打在这个面上的对吧 ,上面是有一个影子 ,就是有一个凹陷的效果 ,同样让它要是有凸出的话怎么办 ,把这个内阴影去勾选掉 ,然后使用这个投影 ,就是投影是让这个图形有种浮起来的感觉对吧 ,因为你是整个造型 ,在板子之上 ,受光的影响下面 ,才会出现投影的形式 ,在这里为了使凹陷的程度更加逼真 ,我们可以使用内阴影 ,先去来确定造型了 ,也可以使用一下这个 ,描边这种各种工具 ,你都可以去试验试验 ,

比如说使用这个白色的描边 ,内阴影 ,

登录后查看更多
UX/交互设计师
共 45 节课
HMI车载UI设计
共 20 节课
UI设计师
共 104 节课
网页设计师
共 166 节课
已是第一张图了
已是最后一张图了
记笔记

导出笔记

笔记导出历史

00:00

0/12
确定保存
笔记导出历史导出完成的笔记将保留1天,如有需求请及时下载
课程名称
导出时间
文件大小
状态
操作
AI视频总结
AI正在分析视频,请稍等…
AI总结遇到了一些问题 点击重新获取
点击重新获取
成为全站通VIP 查看完整AI总结
复制

职业路径建议意见

请选择你对职业路径课程的满意程度

请选择你对职业路径课程的满意程度

请填写关于职业路径的建议意见:

同学,小虎知道你非常努力的想学习!

老师录制课程真的也很辛苦

赞助一下吧

确定学习吗?

您每天可免费学习一个教程。

成为VIP可无限学习 !

成为VIP吧!

成为VIP吧!

您已经免费学习 1 个教程 !

我们录制教程很努力的,赞助下吧 !

升级VIP吧!

您已经学习 5 个教程啦!

我们录制教程很努力的,赞助升级下吧 !

您已经累计下载5个源文件


您在当前分类下不是VIP,赞助VIP享受无限下载


您已经累计下载5个素材文件


您在当前分类下不是VIP,赞助VIP享受无限下载


您已经累计下载5个源文件


您在当前分类下不是VIP,赞助VIP享受无限下载


您已经累计观看5个图文教程


您在当前分类下不是VIP,赞助VIP享受无限观看


学习后才能评价哦!

获得30虎课币

评论提交成功,将在审核通过后显示

×

下载素材/源文件:

收藏成功
取消成功
特惠
充值
7折购
今日还在继续学习的你,太棒了!
7
折扣券可用于
年费无限VIP
立 即
使 用
此活动优惠不可与其他活动叠加使用
有效期:000000
消息
登录即可查看消息记录
建议
意见
官方
客服
在线咨询

您可以与在线客服进行沟通获得帮助

工作日:9:00~22:00节假日:9:00~18:00

联系在线客服
虎课
积分
免费学习91000+个教程!
配套素材、源文件一键下载!
昨日学员已学习了32,676
并提交了86份作业!
登录后立即学习!
loading
微信扫码关注即可登录
您需要同意协议才可以进行登录
登录虎课网,每天免费学课程全站 91000+ 视频会员教程 | 每日可免费学 1
为确保账户信息安全
请先进行真实姓名验证后进行充值付款
立即验证