如何构建汽车 HMI：设计规范

汽车HMI（人机界面）行业仍是一片蓝海。许多设计师不敢进入这个新兴行业。他们认为这很难，门槛很高。本文将带大家先入行，讲解汽车HMI的一些基础知识。我会在设计规范的内容中加入很多实际的设计案例。

设计规范包含哪些内容？

设计规范包括：UI规范和交互规范,本文讨论UI规范。车辆交互的内容将在后续文章中安排。

视觉规范：车载端的设计与移动端、Web端的设计还是有很大区别的。主要区别在于布局。接下来，我们将从文字、颜色、布局、圆角、图标等角度进行讲解。（偶尔会穿插一些工作经历）。

文字说明

文字是UI界面设计中的重要元素。文字的运用正是考验设计师基本功的时候。文字会直接影响用户在使用产品过程中的体验。文本的使用从这些维度开始：字体选择、字体大小、颜色、字体粗细和行高。

1.字体选择

​

在设计UI时，需要选择ui需要使用的字体：英文、数字或多国语言。

如果你在咨询公司，客户会给你配一个字体包，插一段小插曲（职场经验）：客户选好字体后，如果字体是付费字体，你要先跟客户确认他们是否已取得使用许可，避免后续诉讼纠纷）。  

• 公司已定义字体（聘请专业字体设计师设计一套）；
• 推荐使用开源字体（英文/编号：Roboto）。如果有海外项目，Roboto没有覆盖的语言推荐Noto sans font。Noto sans 源自类似于 Roboto 的指标，旨在实现视觉和谐的国际化。

这里肯定有人会问为什么不能用苹果字体？不是免费字体吗？

普及一下：首先，汽车HMI系统属于商业用途，未经许可擅自使用，属于侵权行为。发布在应用商店的应用可以免费使用，因为是在苹果生态下使用，所以不构成侵权。

2.字体大小

​

汽车UI的字体大小也应遵循此规则。字体大小必须远大于移动端和Web端，以保证文本信息的扫描。我们的项目结合了：百度Apollo中控视觉基础研究项目，设置明文参数，谷歌Android汽车操作系统研究。以下为文字说明（红色区域为两者的区别）：

我们在做项目的时候，指定的字体大小保持在4PX的倍数（参考谷歌规范），这样有助于保持一致性和视觉层次。

2.1 用词注意事项

字号控制在20px，一般用在小标签辅助类的文字上，最小文字字号为24px。

2.2设置文本规范有两个好处

• 文本样式的复用对于设计人员和编码人员来说都是提高工作效率的好事；
• 对于界面设计，有一定的规律可循，避免降低整体的和谐感。

3.字体颜色规则

• 文字与背景颜色的对比应遵循WCAG标准，并应考虑可访问性。因此，对比度应保持在4.5:1-7:1，以保证文字清晰易读；
• 专注于最重要的领域；
• 在文本元素之间传达一种视觉层次感。

4.字体粗细

字重是指文本的粗细风格。字体粗细如下所示：

实际案例说明：

注意使用中号字体，尽量不要使用粗体，这样会使页面感觉很不一样，过渡不自然，没有细腻和轻盈感。

因此，在制定字体规范时，尽量去除粗体字重。如果你想通过加粗字体与以下信息区分开来，请选择中等字重（根据实际项目需求确定，我的规范仅供您参考）。

5.字体行高

为什么要加上这一段，因为这个问题有朋友问过，我一下子解决了。文本模块需要增加安全距离，下面也会详细说明。

字体的文字高度一直困扰着设计师。我应该用什么方式与coder沟通？在设计过程中，我们是否可以使用文本的大小来对齐，而不是使用文本的行高，NO。

以微信朋友圈为例：

文本的行高必须大于字体大小。提要字体大小为 16px（在@1x 设计稿中）。如果是多行文字，微信手动调整文字行高（正常行高：22px，微信实际行高：20px），当行高为20px时，文字需要上移3px做图片和文字在视觉上排成一行。

如果按照这个进行开发，开发者需要注意CSS属性中图片和文字的实际区别。这种高度不一致的设计，会直接导致开发布局过程更加繁琐。

最终结论：根据文本的行高与coder沟通。

普及小知识点：汽车HMI段落的行高一般为字体大小的140%—180%，为用户提供舒适的阅读环境（四舍五入为整数）。下面介绍一些专业知识：在字体设计过程中，字体设计师一般都会给字体预留一个安全距离，让字体显示更稳定。

设计时我们将字体大小设置为30px，但实际字体的间距需要包含上下两部分的安全距离。最终实际高度变成了42px（字体：San Francisco）。不同字体的行高不同，Ant Design的30字号的行高是38px（具体计算方法见图中）。

颜色规格

1、使用场景

场景：白天的阳光照射（早上、中午、下午的阳光强度有多个等级）、雨季、夜晚、地下隧道等。

在户外驾车有很多不确定因素。光强的干扰尤为重要。照明会根据一天中的时间、天气、窗户的色调等而有很大差异。在现实世界中使用时，颜色并不总是与设计时在计算机上看到的颜色相同。

考虑颜色亮度如何影响驾驶条件以及低对比度颜色如何在直射阳光下被冲走。始终在多种照明条件下预览您的应用程序，以查看颜色的显示方式。如有必要，进行调整以在大多数用例中提供最佳观看体验。

一开始，大多数汽车制造商的系统都喜欢深色背景。两个具有代表性的系统是谷歌的Android Auto系统和苹果的Carplay系统。我在项目开始时也使用了深色。

2.颜色搭配

我想用 Apple 的官方说法之一：“颜色可以提供交互性，提供视觉连贯性，并为界面带来活力。” 这句话总结得真好。

专注并仔细聆听。这就是重点！UI设计中色彩的使用规则需要在页面设计中注意60-30-10的规则，营造一种平衡感，让视角从一个焦点舒适地过渡到下一个焦点，从而以免在驾驶过程中给我们带来视觉落差大的感觉。

汽车HMI系统的颜色规范包括品牌色、语义色和中性色。

1) 品牌颜色

又称“强调色”，通常一个HMI系统只有一种品牌色，也是出现频率较高的颜色。强调色一般的使用场景有：标签切换、按钮的ON状态、音乐播放中音符的运动等。  

2）语义颜色

UI界面需要承载语义色彩，具有准确的信息表达。在复杂的场景下，色彩的倾向性应该是非常明显的，可以降低用户的理解成本和理解时间，给出行体验带来良好的驾驶体验。

3）中性色

主要不仅用于文字，还用于背景色、分割线、灰色填充、边框等场景（注：根据背景色的变化，系统的其他颜色也随之变化，即两组颜色规格的切换）。

3、HMI颜色规格如何制定？

颜色尽量少用，色彩饱和度不宜过高，以免对驾驶造成视觉干扰。

避免为交互式和非交互式元素使用相同的配色方案（如果交互式和非交互式元素具有相同的颜色，则很难知道点击哪里）。

保持颜色一致性（不要 随意 使用不同的颜色来区分单个屏幕中的重复组件。当颜色无法增加价值时，请谨慎使用）。

建立视觉层次结构（通过不透明度值或相同的颜色系统，但不要通过对太多元素应用过多的不透明度或对比度值来过度使用它们）。

 尽量使用深色背景，这是市场上很多车厂的选择（不过Carplay也陆续推出了白色版本来适应白天，我们也在项目中后期加入了白天模式。之后的路测试，当太阳很刺眼时，黑色会反光，驾驶员看不到屏幕内容）。最后，应用配色方案在各种实际光照条件下进行了测试。

在HMI UI系统中使用了足够的色彩对比度，这在上面的使用场景中有提到。

在后续的文章中，我会单独拿出WCAG，从观感、可操作性、稳定性等方面进行详细讲解。这次我将重点放在最重要的方面。

WCAG的全称是web content accessibility guidelines。它们是一组更容易访问 Web 内容的建议。它们主要针对残疾人，分为三个等级：A（最低）、AA和AAA（最高）。

先说一个概念：两个白色的对比度是#1:1，白色（#FFFFFF）和黑色（#000000）的对比度是#21:1。

为达到AAA标准，文字视觉呈现与文字图片的对比度至少为7:1，大文字与大文字图片的对比度至少为4.5:1。

概括：

色彩使用的细节证明了设计师的深度和耐久性。

上述所有的颜色规则并不适用于所有的设计方案，还应针对具体项目具体分析。不同的用户群体有不同的应用场景。比如司机和后座人的屏幕设计内容肯定会不一样。

文章转载自公众号：普修科技  

公众号id：pursuerdesign