如何搭建HMI

入行做车载HMI已有2年余久，也该沉淀输出一些行业内容的内容，HMI行业还是一片蓝海，很多设计师都不敢轻易的进入这个新型的行业，觉得有难度、门槛、视觉要求高、这篇文章先带你入行，文章还是以一些HMI基础知识作为讲解，在设计规范的内容 我会添加很多干货 结合实际案例讲解。

先给大家打一个预防针💉 （规范是用来打破的，本篇文章只做为参考价值）

设计规范包含什么内容

设计规范包含视觉规范和交互规范，本章节先说一下视觉规范，车载交互内容会安排在后续写作中...

车载端设计和移动端、web端设计显示差别还是蛮大的的，最主要的差异就在于布局的不同，接下来我们从文字、颜色、布局、圆角、图标 等角度讲解，PS：偶尔还会穿插一些工作心得的内容。

文字是UI界面设计中重要的组成元素，对于文字的使用是检验设计师基础功底的时候，用的好坏会直接影响到用户在使用产品的过程中的一个体验，文字的使用从这几个纬度出发：字体选择、字号大小、颜色、字重、行高.

在做车机系统设计的时候，需要选定该款车机中文、英文、数字或多国语言需要用什么字体。如果在乙方公司呢，客户会指定给到你相对于的字体包，插播一段小插曲（职场心得）：当客户选定字体后，如果该款字体是付费字体，你得先和客户确认是否得到使用许可，避免后续官司纠纷）在甲方爸爸工作的同学一般会遇到两种情况：

1.公司已明确字体（请专业字体设计师设计一套）

2.用常规设计的字体，建议使用（中文字体：思源黑体、英文/数字：Roboto）如果有做海外项目的，对于Roboto未涵盖的语言，建议使用Noto Sans字体。Noto Sans源自类似于Roboto的度量标准，旨在实现视觉上和谐的国际化。

这边肯定会有人问为什么不能用苹果字体呢？他不是免费字体嘛？

普及一下：首先该车机系统属于商业用途，并且未得到许可使用，这就是侵权，在app store上 发布的app是可以免费使用的，因为这是在苹果生态下使用，所以不属于侵权。

2-1.车机端的字号大小的制定也是要循规蹈矩，字号肯定要远大于移动端和web端，为了确保文字信息的扫描性，结合了：基于IDX & 同济 (2020) 百度Apollo中控视觉基础研究项目，设置清晰的文字阶级参数，还有谷歌Android Automotive OS 研究，以下是用字的规范（标红色区域是他们之间的区别）

可参考谷歌：字体大小的遵循4px倍数大小增量

我们在做项目的时候，规定的字体大小维持在4px，这样有助于保持一致性和视觉层次感

2-2.用字的注意事项：

字体大小要控制在20px，这个要谨慎使用，一般都是使用在小标签辅助类的文字上，最小的正文字号为24px

2-3.设定文字规范有两个好处：

1.文字样式复用，不管对于设计师还是开发同学来说，都是极大提高工作效率的一件事情

2.对于界面设计来说，有规可循，避免设计时降低的整体的视觉感

3-1.文字与背景颜色对比度要遵循WCAG的标准，需要考虑到无障碍设计需求，因此保持在4.5:1 - 7:1对比度，确保文字清晰易读.

3-2.将注意力需要集中最重要的区域内容.

3-3.文本元素之间传达视觉层次感.

字重是指一种字体的粗细样式，下面展示字重的种类：

上实际案列讲解：

谨慎使用中等字体粗细 ，尽量别用最粗的字体，这样会使得页面感觉差别很大，过度的不是那么自然，没有了细腻、轻盈的感觉。所以在制定字体规范的时候就尽量将Bold 字重去掉，如果你想通过加粗字体的方式来和下面信息作为区分，请选择Medium字重（根据实际项目需求来定，我的规范只做参考价值）

为什么要加这一pa，因为这个问题一直有小伙伴问到我 我就一次性解决了，文字模块需要增加安全距离，这块比较复杂不行我后期录一期视屏讲解，下文也有详细的讲解。

字体的文本的高度一直困扰着设计师，我该用什么方式去对接开发？在设计过程我们是否可以使用文字字号的高度进行对齐方式，而不是使用文字区域的行高，NO 肯定是不可以的。

微信朋友圈主页作为案列：

文本的行高肯定是要大于字号的，个人动态的字号为16px（在@1x设计稿中）如果是多行文本的时候，微信是手动调整了文本行高（正常Line：22px  微信实际Line：20px），当行高为20px的时候，需要将文本上移3px 才能使得图片和文本视觉在一条线上面，如果按照这个进行开发的话，开发小哥需要在CSS属性过程中注意图片和文本之间的实际差异，这种左右高度不一致的设计，会直接导致在开发布局过程中变得更加繁琐。

最后的结论：按照文本的行高来对接开发 

普及一下小知识点：车载的段落的行高一般为字号的140%-180%的视觉呈现，提供舒适的阅读环境给到用户（取整数）

下面是一些专业性的知识 了解一下：

在设计字体过程中，字体设计师一般都会给字体预留安全距离，让字体展示更加稳定。

我们在做设计的时候，将字号设置为30px，但实际字体的空间是需要包含上下部分的安全距离，最终实际高度就变成了42px（Font:pingfang） 穿插一个小干货：在不同字体下相同字号，行高（Line Height）是不同的，Ant Design的30号字，行高为38px （详见配图  计算方式）

场景：白天阳光暴晒（阳光强度有很多档位早、中、下午） 、 梅雨季节阴雨连天 、夜晚模式、地下隧道等。

驾驶汽车在室外不确定因素会比较的多，光线强度的干扰尤其重要，照明会根据一天中的时间，天气，窗户的色调等等而有很大不同。当你设计的车载应用程序在现实世界中使用时，在设计时在计算机上看到的颜色并不总是相同。考虑颜色亮度如何影响驾驶条件，以及低对比度的颜色在阳光直射下如何被洗掉。始终在多种光照条件下预览您的应用，以查看颜色的显示方式。如有必要，请进行调整以在大多数用例中提供最佳的观看体验。

最初车机厂商系统大多数都是偏爱深色背景，具有代表性的两家系统谷歌的Android Auto系统 和苹果Carplay系统，我在做项目最初也是沿用了深色系。

我想用一句苹果的官方话说：“配色可以提供交互性，提供视觉连贯性，并且对界面赋予生命力。”这句话总结的真的非常到位。

集中注意力认真听  ➡️  重点来了，UI设计中颜色的使用法则，在一个页面设计中需要讲究 60-30-10法则， 在60％+30％+10％的比例下创造一种平衡感，是为了视角能够从一个焦点舒适的过渡到下一个点，避免给驾驶中的我们产生视觉落差很大的感觉。

一个项目车载系统的色彩规范，包括了品牌色、语义色、中性色。

1.品牌色：又称为 “强调色“  ，通常一个车载系统只有一个品牌色，也是出现频率较高的一种颜色，强调色一般使用场景为：tab的切换选中，按钮开启状态、音乐在播放中的音符小动画等等  ➡️（拿我练习稿讲解）

2.语义色：语义色需要在UI界面中承载这具有准确的信息传达，在复杂的场景里颜色的倾向性应十分明显，减少用户的理解成本和理解时间，给出行体验者带来良好的驾驶体验。

根据交通标志的定义，红色表示禁止、停止、危险，那么用户需要在第一时间识别出这种信息，黄色为警示或不良结果等，绿色则代表通行、成功，上诉说的颜色为状态色。下面要讲一下功能色：链接色大家第一时间肯定想到的是蓝色。

3.中性色：主要用于除文字外，还被运用到背景色、分割线、置灰填充、边框、等场景中 （注：根据背景色的变化，系统其余颜色也随之而变，这是两套用色规范切换）。

1.尽量使用较少的颜色，颜色饱和度不要过高，避免对驾驶的视觉干扰，吸引驾驶者的注意力，让老司机翻了车🤦‍♂️。

2.避免让交互性元素和非交互性元素使用相同的配色（如果交互式和非交互式元素具有相同的颜色，则很难知道在何处点击）。

3.保持色彩一致性（请勿使用不同的颜色来任意，区分单个屏幕中的重复组件。当颜色不能增加价值时，请谨慎使用）。

4.建立视觉层次（通过不透明度值或者是同一色系，但不要通过将过多的不透明度或对比度值应用于太多元素来过度使用它们）。

5.尽量使用深色背景，这是市面上很多车厂的选择（不过蔚来、特斯拉、小鹏、carplay都相继推出了白色版本，来适配白天，我们项目中后期也加入白天模式，经过了路测在阳光很刺眼情况下，黑色会反光，无法看清显示屏幕内容）最终在实际各种照明条件下，对应用配色方案进行测试。

6.车载UI系统中使用足够色彩对比度,上诉在使用场景中有所提到，

继续讲干货👇👇👇

(在后续文章安排里我会单独拿出WCAG从感知，可操作性，易于理解和稳定性去详细讲解，这次先挑重点说)

WCAG全称是Web Content Accessibility Guidlines（网页内容无障碍指南）它们是一组是网页内容更容易访问的建议，主要针对残疾人。一共分为三个级别 A（最低）、AA、AAA（最高）

讲个概念：两个白色的对比度是 1:1 , 白色（#FFFFFF）与黑色（#000000）的对比度为 21:1

做颜色对比的网站链接 https://next.rsuitejs.com/en/tools/palette

要满足 AAA 级准则，文本视觉呈现及文本图像至少要有 7:1 的对比度，针对大号文本以及大文本图像至少有 4.5:1 的对比度

总结：

对于颜色运用的细节，是证明了一位设计师的深度、且具备耐久力。上诉全部阐述对于颜色的规则不适用全部的设计方案，还是具体项目具体分析，用户人群不同，运用场景也不一致，比如驾驶者和后排人的 屏幕设计内容肯定会有差别。还有一个点在设计需要阅读内容页面，例如：微信发来的消息、设置中文本，最好能够达到AAA标准。

HMI的设计和其余终端设计，最大的差异就在与布局，布局是整个页面设计的框架，也是最重要的内容之一，在讲该模块内容，我会从实际项目案例出发。开始制作车载UI系统，需要和汽车厂商确认车载UI可在屏幕中，设计的尺寸区域（注：其中“屏幕”是指应用正常工作空间而不是到边缘的全部空间，有的厂商把固定按键也镶嵌这块区域中）

我们先要了解一下热门和主流车机分辨率👇👇👇

众所周知我们车机上的屏幕尺寸和分辨率种类可以说是种类繁多，在设计过程中 设计师主要还是关注屏幕的分辨率是多少？（ 需要我们设计的屏幕为 仪表盘、中控、有的车载还包含有副驾驶和后排娱乐屏幕 ）

特斯拉（Tesla）

Model3 1920*1200  15英寸（底部控件的尺寸为120像素是固定 ）Model S/X 用竖屏设计 分辨率 1200*1920 

蔚来 

ES8 10.4英寸 分辨率 1600*1200   /   ES6 11.3英寸 分辨率 1600*1400 

理想ONE 

比较特殊它拥有4块屏幕，仪表盘12.3英寸 1920x720  / 中控屏16.2英寸 2608x720 

副驾驶娱乐屏12.3英寸  1920x720  / 再外加功能控制屏 10.1英寸的1280x720

小鹏

G3 竖屏幕 15.6  1920x1080   P7控屏在目前汽车产品中属于分辨率较高的梯队 2400x1200 精度超过2K（普及一下 2K分辨率标准为2048x1080像素）

接下来给大家观看苹果的CarPlay系统分辨率和谷歌车载系统

CarPlay系统分辨率： 800 * 480、 1280 * 720、960 * 540、 1920 * 720 

相信大家已经找出规律了 

在设计横屏的时候高度基本都为720px，其余横屏幕按照比列缩小。

这块内容非常重要，以至于关乎到后面整个系统的布局方式，苹果的CarPlay、谷歌Android Auto、国内的百度carLife+等 都有着自己的车载系统，如有的车企屏幕分辨率不一致，就无法适配成功，会出现拉伸等现象，除非通过定制化服务重新按照厂商的尺寸去重新搭建一套。我们项目中涉及到的屏幕和CarPlay尺寸大致很像，但布局方面我们有这自己的想法，后面在自适应布局会有所提到。

制定一组间距值，用于布局中元素和组件之间的固定纵向和横向的间距，

参考规格布局8像素点网格上构建，这意味着规范中的UI组件和元素之间相隔8px的倍数

谷歌Android Auto间距规范一共制定了常用的九种数值，P0 - P8

注意事项：提供4px、12px间距大小，是为了对齐较小的元素之间的距离，这两个数值谨慎使用，在大屏幕车载系统内，也有很多间距需要大于96px，因此在对于这些数值制定规范的要求就是8px的倍数即可使用。

说到这边肯定会有人有疑问，我们在做规范能不能将间距不设定成8的倍数，4、5、6......倍数是否可行呢，当然是可以的，“规矩是死的，人是活的“。只要是按照倍数叠加完全都OK，如果选定一种倍数，就不能加入其他倍数，如果页面出现多种间距会使得页面没有节奏感，打破了亲密性原则。

下面干货来了👇👇👇 

对于想接触车载设计同学非常友好讲一下通用的布局，具体交互设计等待我后续更新文章，这次就简单按照1920x720分辨率每个模块我都会稍微带一下。

讲完前面每个模块的大致布局，接下来我们来探讨一下自适应布局，这个真的非常非常！！！超级重要，工作后期经常会遇到这个问题，甲方爸爸后续需要增加屏幕分辨率的需求。我们前期在布局上花费的时间相对较多（但后期维护起来可以减少你很多工作量，前期需要你规划好基础框架）

下面拿实际做过的案列来陈述：抛出一个问题 ➡️ 我们如何将分辨率1920x720页面的内容 转变成1280x720 呢？

（有同学说 直接丢开发然他们写自适应布局）导航相关页面需要调用地图的接口，这个开发是可以直接去写自适应，但其余元素还是需设计师重新来排版。

（还有人说直接缩放比列，调整页面布局）这个方案在比例相差很大时候是行不通的，但同比列或者很相近是完全OK，正巧我们项目上有800x480分辨率，和1280x720 极其相似。

（还有人表示不服：折叠某块区域内容，将该区域内容做成icon点击后弹出来）该方法可以使用在部分内容。

有的模块内容没法降低层级，这个办法就不行，遇到这类的情况我们就直接将这块内容适配做成1280x720尺寸。

如果前两种办法都行不通，有的内容就得需要做弹性布局控件了，例如设置页面，当中间空间很大的时候，放置到短屏中可以根据弹性布局拉伸该控件长度，拉至适配该屏幕的设计，如有需要请留言，后续弹性布局我会写一篇文章详细说明使用。

我们项目多种分辨率进行转化基本都按照这些方案推进下去的，来一句鸡汤：办法总比困难多，真的只要用心做事情，没有什么困难能难倒你的，还有不要做理想主义者，要做实践者，实践才会见真理。

😂 不好意思 一下子说多了没收住 ，进入正题 👇👇👇

谨慎重新改变布局 ： 第一是增加开发工作量，其次就是增加用户的学习成本，当然，屏幕是竖屏的时候则就需要重新布局，因为横宽比列变成了相反数值。（旋转屏幕大家可以去看看比亚迪的唐、汉车型）

上诉的内容都是我们一步一个坑踩过来的，“且看且珍惜”。

1-1.更圆的角和全圆角的使用

对主要动作和组件使用更圆的角（更大的角半径 or 全圆角），是需要重点突出的，圆形对大多数直线形状具有更大的视觉影响，如果在页面有足够空间的前提下，全圆角形式会更加，和其他按钮做出反差，鼓励用户去点击。比如：全局消息通知按钮、电话模块中接听、挂断、下拉负一屏中的按钮等 ➡️ （下方是练习稿案列）

1-2.较低的圆角和直角的使用

对于不需要 or 低强调的元素，使用较低角半径 or 0px圆角=直角，例如：工具栏或列表可以用较小的圆角，专辑封面不需要再强调，所以直接将它降到0px，我们项目音乐专辑大封面就用的直角，具体问题需要具体去分析，像音乐控件的外轮廓就是带圆角的，因此专辑封面在容器里面就必须带有圆角，不然设计风格则就不统一。

还有一个模块，就是在音乐分类的情况下会有很多专辑封面，我们对比一下两种方案：有圆角or无圆角，两张图对比下来，带有圆角的专辑封面，边角有更明显的边缘产生了视觉差的感觉，而直角的专辑看起来就没有,不易突出，因此不太可能引起我们的注意。所以在网格布局中，圆角的效果更好

1-3.谷歌对于圆角的定义

在设定圆角规则时，需要注意一个事项：大小种类不宜太多，不然显得杂乱无章。

注意：即使应用布局是在8dp网格上构建的，但仍会提供4dp的半径大小，以帮助在较小的组件中成形元素。该值应谨慎使用，因为它不是8dp的倍数

总结：圆角还是直角没有对错之分，合适的才是最好的。

1-1.应用程序图标

现在HMI的设计趋势已经去掉了应用程序图标，取而代之的是卡片化的设计方案，简单说一下卡片式设计有两大好处，第一，把学习成本降至最低，第二，增大的接触面积让驾驶时误触率也降到最低，给到用户最直观的体验就是简单易用。不过有的汽车厂商对这一块还是有需求，我们就稍微再提一下。

我自己也负责过有应用程序图标的项目，在1920x720中 为160px 分辨率和苹果@3x 分辨率相同 ；在相对较小的屏幕中应该按照比例同比缩小，如同800x480分辨率中 首页中的应用程序图标 为80px ，这是如何计算的呢？

项目中还有一款车型的屏幕分辨率为1280x720，由于屏幕变窄，应用程序图标需要缩小到120px，高度720 and 480 有一个共同240的倍数，所以最终小屏幕的应用程序图标为80px，圆角大小也随之而变：R：24/18/12 。其余分辨率按照实际情况使用。

1-2.系统性图标（后续HMI组件库搭建文章中我会详细的讲解）

该系统提供了许多小图标（代表常见任务和内容类型），供导航栏和选项卡栏中使用。最好尽可能使用这些内置图标，因为它们是人们熟悉的。

2-1.大厂是如何制定图标尺寸

很多博主在讲到图标尺寸的时候都是一笔带过，拿到别人得出的结论，却没说怎么计算出来，对于车载来说，前期发布这些研究报告的内容极少，所以我对图标的计算想找到了计算方式，如果大家想知道怎么换算的话可以查看https://zhuanlan.zhihu.com/p/158099749

根据百度IDX 驾驶体验中心，在对于《车载HMI界面效果客观指标实验报告》在基于视距为50cm，计算出最小图标为9mm 推荐使用12mm。

视觉上的1cm的实际像素是多少呢？这就是一个错误的想法，上面文章中也有提到屏幕分辨率无法与物理长度单位进行转换，（实际项目工作经验告诉我，因为相同的屏幕大小 但是分辨率不一样 所以得出的结果不能共用）

2-2.PPI的计算

我就大概讲一下计算原理，这个根据屏幕的分辨率，我做过一款相同屏幕尺寸的车机，都是8寸屏幕，但分辨率一个为1280x720 另外一个则为800x480，每一个格子为一个像素。

2-3.最小图标尺寸计算

接下来找一下分辨率 1280x720 最大公约数为80 最后得出结论屏幕的比列16:9

两边比例的平方相加 = 屏幕英寸的平方

根据勾股定理 （16X）^2 +（9X）^2=8x8 最后 x 算出的结果为0.4357

16:9的8英寸屏幕 长度（单位：英寸）=0.4357x16 =6.9712  宽 =0.4357x9=3.9213

国际计算单位1英寸 = 2.54cm

所得出屏幕的长度（单位：厘米）=6.9712x2.54≈17.7cm    宽 =3.9213x2.54≈9.96cm

分辨率：1280x720 宽度约等于10cm来计算，720/10 = 72px

分辨率：800x480 由于他们屏幕大小一致（英寸） 480/10=48px

得出结论：视觉上的1cm的实际像素是有所差距的。

按照设计规则  按照4的倍数来制定，因此最小图标为40px（这个结论只是作为推荐使用，在做项目的时候，变数有很多，甲方爸爸就喜欢超级大的，你也没办法，所以还是按照项目来制定）

为了计算这个我还特地的回顾 高中学习的开根号、初中的最大公约数都搬出来了 幸好当时数学还算是个小学霸 哈哈哈🤦‍♂️🤦‍♂️🤦‍♂️

2-4.下面展示一下：

谷歌Android Auto 图标大小规范

基础的图标：主图标：44px  次要图标：36px    第三方图标：24px

头像的使用：小头像：56px   中头像：76px      大头像：96px

百度车载生态开放平台下载了他们组件库，进行了研究

基础为图标：48px  次要图标40px（最小图标尺寸）

这边还要说一下，对于大图标的尺寸设定，会有很多尺寸icon，后续我还会在输出关于在车载图标详细的内容，尽请关注吧。

3-1.图标触摸区域分为 驾驶中使用 和 静止中使用 

例如说驾驶中 需要调节空调的内外循环，原本老车机的硬按键替换成了屏幕中的按钮，原有的硬按键已经通过长期使用已经有了记忆性，并且有触感并且操作硬按键大小适中，所以在操作中减少了操作时间降低了危险系数。新能源汽车在设计的时候可以通过增大触摸区域降低误操作、无法点击使得驾驶员视野长时间远离方向盘的情况，研究表明视野超过 2秒以上停留 就会存在危险。

静止使用例如：在设置页面中调节车辆设置中的属性，巡航模式、电动尾门打开百分比的调节等等，

3-2.谷歌制定触摸区域的规则

最小触摸目标尺寸为76 x 76px  ，需要在单个图标设计基础上再额外增加一块触摸区域，易于驾驶中可操作，在静止使用的话，我们可以遵循苹果设计规范中最小手指触摸的区域为44x44px

这是我根据实际项目并在车内进行路测（路测：驾驶中测试）中得出结论。

还有一种特殊情况：文字+图标组合点击区域，在icon很小的时候也可以考虑将文字也组合一起，增大点击区域

1、统一风格  /  2、统一光源

3、统一线条粗细  / 4、统一圆角/直角

5、统一倾斜角度 /  6、断点的距离、大小统一

之前经常有小伙伴问我，落地项目的icon切图命名规范怎么制作？就拿我之前做的风格稿首页来说，首页音乐卡片中的“下一首”的图标如何命名。

首先分析这个icon在那个页面当中 or 用在哪里，接下来就是他的属性是什么 icon 还是button ，其次就是这个icon代表什么，这个icon的大小，因为在一个系统里面会有重复功能icon，所以是有必要增加大小（这块内容是选填项），最后在增加这个icon是处于什么状态下，状态分为：禁用、常态、按下、选中

最后呈现：首页_音乐_下一首_常态   ，对接开发应该是翻译成英文。

有时候英文命名也可以用缩写比如设置：setting 你直接可以写成set  icon ➡️ic   button➡️bt（如果全局使用就使用 ➡️ All）

听完小米的发布会，是我触动较深的一次，视频弹幕中满屏刷着““干翻特斯拉”，小米造车一诞生就背负着全民的期望，创始人雷军已经功成名就，但还是愿意押上全部的声誉和未来十年的人生，全力all in，我心中只有敬意，祝小米早日造车成功，“干翻特斯拉”，我们设计师也愿意和这个行业赌一次，行业深耕下去，砥砺前行。

文章中如有不足之处，欢迎补充交流，我们下期见 👋👋👋

作者：设计界的影帝 

本文由 @设计界的影帝 原创发布。未经许可，禁止转载。