大家好，我是本节课的讲师大冯 ，今天我们讲一下 ，HMI的车载设计规范 ，在正式实操之前 ，首先跟大家讲一下 ，车载的设计规范都有什么 ，那车载的设计规范其实包含了字体 ，颜色 ，图标，组件库，切图 ，交付等等 ，关于以上的这几个部分 ，我都会给大家去进行一一讲解 ，首先我们来看一下 ，规范组件的原子理论 ，也就是我们常说的一个组件Kate ，那原子理论最早先是 ，由国外的网页设计师 ，这位大哥提出来的 ，那里面包括了 ，原子，分子，组织，模板 ，还有这个页面 ，那原子是包括什么呢 ，原子其实是设计中最小的元素 ，里面包括icon，toast ，Button，也就是按钮这些等等部分 ，可以看一下我右边的这个设计图 ，它是整个设计里面 ，不可以再去进行拆分的元素 ，那么接下来看一下分子 ，也是很好理解，就是 ，原子去结合起来 ，看左边这个演示图 ，也能看得出来 ，那组合起来之后 ，就是设计中的一个组件 ，可能是文字加上图标的形式 ，或者是看一下我所展示的这个 ，微信小程序的一个组件演示图 ，接下来就是组织复杂 ，但是可以重复的产品 ，就是把很多的原子和分子 ，去进行再次组合起来 ，最典型的有最上面的这个导航栏 ，大量可重复的文字 ，和icon去组合起来的 ，它就是叫一个组织 ，接下来就是模板，模板又称为原型图 ，

这个其实也是很好理解 ，原子加分子，加组件的一个排版形式 ，它们组合起来就是模板 ，模板的下面就是页面 ，再直接一点就是设计稿 ，整个原子，分子加组件 ，加模板结合起来 ，最终产出的一个视觉稿 ，那么我们看一下原子理论 ，其实不难理解 ，它就是从最小的一个元素 ，慢慢的去组合起来 ，最终成为一个视觉概念稿的 ，这么一个过程 ，那么我们在组件里面 ，其实也是这么应用的 ，包括刚才上面讲的字体还有图标 ，先把这些东西 ，去做一个规范的形式去弄出来 ，然后我们再去组合成最终的界面 ，看完上面 ，我们再来去看一下字体的规范 ，其实字体规范这一块很有意思 ，手机端的字体规范我们先来看一下 ，像在MAC端和iOS ，使用中文 ，是苹方的SC，数字和英文的字体 ，相信也不陌生 ，简称为SF的这款字体 ，包括像安卓里面 ，中文使用的是思源黑是吧 ，英文和数字使用的是 ，Roboto ，苹果或者安卓这个端 ，如果你要不知道使用什么字体的话 ，使用这两款字体准没有错 ，因为这是一个默认的字体 ，反观过来我们再看一下 ，车载端的这个字体规范 ，车载端的这个字体规范分为横屏和竖屏 ，不一样的尺寸屏幕 ，可能最后对应的字号也不一样 ，这里面我拿一个12.3寸的横屏 ，1920×720的这个尺寸为例子 ，去给大家看一下 ，手机里面的小程序端 ，最小的字号可能是12 ，但是反观过来在车上面就是24 ，包括12，14，15，17，22 ，

再去看一下车载就是24，什么36 ，最大的甚至可能达到80 ，可能和手机端这个22 ，有很大的出入区别 ，为什么会造成这样 ，也是在上一课上讲过的那一个部分 ，所有的车载的字体 ，一定是要遵循安全性为原则 ，让驾驶员能瞬间进行读取 ，那某品牌的车载中控屏幕 ，这个也是12.3寸 ，1920×720的横屏 ，你可以看到它的中文字体 ，使用的是思源的这个字体 ，英文字体也是非常的经典 ，包括透明度的100%，80% ，50%，常用的字号24 ，30，36，42 ，甚至到80的这个重要文字 ，和数字所用的字号 ，那么我们首先来说一下这个字体 ，为什么选择思源的这个字体 ，是因为现在可能有 ，侵权的危险，那使用思源 ，或者是使用现在普遍的 ，开源的字体 ，是没有任何问题的 ，一旦你使用了商用的字体 ，还是未经授权的情况下 ，可能后果会很严重 ，接下来我们看一下字体的识别度 ，左边的字体的识别度 ，和右边的字体识别度 ，你觉得哪个更好 ，左边是1 ，右边是2 ，你可以在自己心里 ，或者在咱们评论区打出来 ，可以判断一下 ，很明显，我这里面揭晓一下答案 ，321，当然是左边的这个字体识别度 ，会更加的准确一些 ，那在车载端和手机端不一样的区别 ，可能也在这里面 ，右边这个字体可能是比较炫酷 ，在手机的运营字体来讲 ，或者说H5上来讲 ，使用是完全没有问题的 ，但是还是刚才给大家挖的那个坑 ，

安全性，易识别性 ，就是车载端安全性的总体原则 ，我们再来看一下 ，衬线体和无衬线体之间的一个区别 ，衬线体比较适合印刷 ，典型的代表可能像宋体，楷体 ，这种就是衬线字体 ，无衬线字体比较适合屏幕上的显示 ，典型代表有苹方，思源雅黑 ，微软雅黑等等这样的字体 ，下面这张图很明显能看出来 ，它之间的区别是没有这个勾的 ，在汽车上的识别度 ，无衬线字体 ，远远是大于衬线体的 ，所以说我们在车载端 ，无论使用什么样的字体 ，包括后期你们公司 ，可能买版权的 ，那种商务字体也好 ，或者我们使用免费的开源字体也好 ，一定要注意使用无衬线的字体 ，在网上前几年还流传一个梗 ，车显示器上有个小人拉屎是什么意思 ，车要去厕所，你把图标发回来 ，我看看，你可以看到我右边放大在这个图标 ，明显是零下4度对吧 ，但是如果你要看成是 ，小人拉屎的 ，这个图标的话 ，可能第二眼就回不去了 ，这说明了什么 ，这说明了我们在设计上的时候 ，字体的间距以及字行高 ，一定要把握的精准 ，否则的话 ，就会很容易弄出来这样的笑话 ，再给大家去讲解一下切图的规范 ，因为切图规范这一块 ，也是有很多人问我 ，到底是怎么命名的 ，还有是怎么样的切图 ，应该怎么样的切图，视觉范围 ，1点击范围 ，2你可以再去想一下 ，给你们3秒的时间 ，123 ，当然切图就是需要去切点击范围了 ，

这个点击范围俗称一点的话 ，它叫热区 ，而不是说切这个16PT的视觉区域 ，一定要去切带点击范围的这个区域 ，接下来我也会给大家 ，去进行一个实操 ，然后我们再来看一下 ，需要切图的区域 ，包括左上角的这个状态栏 ，切一遍就够用了 ，这个不用重复的去切 ，下面的播放键 ，还有像这个上一曲，下一曲，循环，收藏 ，以及下面导航栏的这个所有的图标 ，额外的说一句 ，不同状态之下可能做出来的状态 ，也是不一样的 ，比如说这张图上现在是播放的状态 ，我们还需要做一个暂停的状态 ，也就是一个三角符号的那个标志 ，在切图的命名上 ，这里面给大家一个公式 ，可以去进行套用 ，但是不同的车厂 ，可能对切图有不同的要求 ，这里面需要灵活的运用 ，