Hello，大家好 ，我是本节课的讲师大冯 ，今天我们来介绍一下 ，HMI的功能图标设计 ，其实说到功能图标 ，也是我们UI设计师 ，和HMI设计师 ，最基本的这个基本功 ，那么我们首先来看一下 ，什么是车载的功能图标 ，整个的功能图标分类 ，其实和UI大体上是差不太多的 ，所以说如果你要是会UI图标的话 ，你可以去详细的看一下 ，UI和HMI差距的这一个部分 ，也就是包括像我以下介绍的 ，以及仪表盘图标的那些差异的点 ，在这节课里面 ，我是主要针对中控的图标 ，来去进行一个介绍 ，那么我们首先来看一下 ，中控的图标上到底都有什么 ，第一个就是Dock栏的图标 ，可以看到右面是有声音加 ，和声音减的这个控制图标 ，这是一个实体的图标 ，明显是在于屏幕之外的 ，这个是一个实体的Dock栏 ，那部分车辆的话还是有屏幕内置的 ，像这种，类似于这种是屏幕内置的 ，但是像我目前图上展示的这款车型 ，它是外置的车型 ，那么这个Dock栏在UI里面 ，其实你要称之为底部导航栏的话 ，也是没有太大的毛病 ，这里面屏幕内置的返回键 ，和快速的一键返回首页 ，这个不就是最早先 ，大概在2013年 ，14年左右的时候 ，安卓盛行的三大金刚的那个按键吗 ，大体上的意思和功能都是很接近的 ，所以说HMI图标 ，其实和UI的图标 ，差距并不是特别大 ，这边也不用太过于担心 ，第二点就是状态栏 ，这个状态栏其实换算成 ，在手机上来讲也很好理解 ，最上面的一条包括时间，电量 ，

WiFi ，4G，5G的那个数据开关等等 ，它的意思其实大体上是一样的 ，那么状态栏在这里 ，我也不做太过多的介绍了 ，大家可以自行的看一下你自己手机 ，就明白是什么样的了 ，第三个就是功能图标 ，这里面功能图标 ，其实还包括上面这个部分 ，甚至包括下拉 ，这个返回，设置，菜单 ，还有这个语音控制等等 ，这个部分都是，包括上一曲，下一曲 ，喜欢，音量 ，这里面都是有的 ，虽然说它这个是FM ，手机上FM很少 ，但是和音乐的这个软件相差不是特别多 ，可以作为一个参考 ，最后一个就是硬按键的图标 ，那关于硬按键的图标 ，其实推荐大家看一本书 ，叫汽车符号大全 ，这本书其实在微信读书上 ，是可以搜索到的 ，可以有一个免费的电子档 ，虽然说书比较老 ，但是还有很多车上图标的介绍 ，大家有兴趣话可以去看一看 ，再简单介绍一下 ，车载功能图标的风格类型 ，风格类型无非就是这几类 ，像圆角 ，还有这个直角，粗细结合，断点图标等等 ，它是属于线性图标的 ，还有这个面形图标以及其他类别 ，大体上就是这个三类 ，具体细分就是什么渐变图标 ，透明叠加这些等等 ，其实在我们HMI设计当中 ，并不是和手机设计一样 ，手机上这些图标的类型 ，都是可以使用的 ，可以看你的风格而定 ，有的APP类型 ，可能比较适合于线形的设计 ，有的在重要功能上 ，可能需要使用面形的设计 ，或者是像美团 ，还有这个饿了么 ，上面的宫格区 ，

都是使用这个2.5D的形式 ，去进行设计 ，那最后就是这个logo类的设计 ，可以把这个logo当做成主页 ，放在这个上面 ，是一个比较特殊性的图标设计 ，但是在我们HMI设计当中 ，以上和以下的这个图标都是不可以的 ，我们只选用两种最基础 ，最还原本质上的图标设计，是哪种的 ，大家可以想一下，给你们三秒的时间 ，321，揭晓一下这个正确答案 ，大体上就是使用这个线性和面性 ，最初的这两种形态去进行设计 ，那本节课主要是给大家讲解一下 ，这个图标设计的方法 ，主要使用布尔运算等等的形式 ，那么我们来进入到 ，这个车载功能图标的实操环节 ，操环节这里面还有一页 ，这个课件是我们在以下几节课上需要讲的 ，这里面包括车辆的信息，显示的调整 ，车锁的设置 ，安全设置等等的 ，左边都是功能图标 ，甚至包括首页还有这个应用 ，下面这些都是功能图标 ，如果有兴趣的话 ，可以在我这个基础之上去进行改变 ，也可以去字形的原创设计好吧 ，这个不限，大家可以发挥一下这个想象力 ，但是还是遵循 ，刚才我所说的两点 ，你要脱离这两种形式上的设计，好的 ，那么我们来进行实操 ，在功能图标上设计 ，我们并不可以进行凭空的捏造 ，比如说喜欢，你使用一个香水的瓶 ，或者是一个帽子的小图标，可以吗 ，当然是不可以 ，这里面需要找一些参考 ，再进行结合自己的产品特色 ，来去进行定制设计 ，

这里面的这个参考哪里找 ，给大家推荐两个网站 ，第一个是iconfont ，第二个是iconpark ，一个是阿里 ，一个是字节的出品调整 ，它是两个网站各有各的特色 ，但是很遗憾 ，现在Figma还没有接入这个国内最大的 ，这两个组件设计库 ，反而在Sketch里面 ，是支持了这个组件库的调用 ，也就是可以通过右边的 ，插件的形式 ，直接就拖拽到你当前的设计板 ，这个形式参考就会非常的简便 ，在Figma这里面 ，还是有几个设计icon的插件 ，比如说给大家举一个例子 ，像这个插件的icon8 ，打开这个插件之后 ，就可以看到它整个的面板 ，但是并不是特别全 ，有像这个PNG还是SVG这个格式 ，SVG这个格式后面 ，还是需要付费的 ，各种尺寸 ，所以说国外的这个插件图标库 ，并不是特别的好用 ，我们还是可以以国内的形式 ，来去进行借鉴 ，而且很多的图标 ，国外和国内的设计 ，并不是特别的相同 ，这点也是需要注意一下 ，它的表述方式也是不一样 ，那么我们来首先看一下 ，阿里的组件库 ，iconfont ，在这里面我们可以搜索一下喜欢 ，这个图标你可以看到大部分这个喜欢 ，都是以心形的这个形式去展现的 ，那个别还有这个小星星 ，还有这个小手 ，小手在国内的图标更多来讲 ，代表的是赞，那星星 ，代表的是收藏会更多一些 ，在这里面你可以多去看一些2页 ，3页 ，甚至4页的这个图标 ，你可以看到它整个前4页 ，

大部分都是使用这个小心形 ，来去进行展现的 ，所以说在国内来讲 ，这个心形基本上就能代表喜欢，这个参考是吧 ，我们截图放进去 ，最后再去确定线性或者面性的形式 ，那GPS ，GPS ，在车里面来讲 ，这个叫定位 ，那定位你可以看一下 ，有是这样的设计 ，有的是百度地图那个指向标设计 ，还有这种卫星以及这个导航标，卫星 ，