汽车 HMI（人机界面）行业仍是一片蓝海。许多设计师不敢进入这个新行业。他们认为这很难，门槛也很高。 本文将带你先进入行业，讲解一些汽车HMI的基础知识。我会在设计规范的内容中加入很多实际的设计案例。
布局规范
HMI设计与其他终端设计的最大区别在于布局。布局是整个页面设计的框架，也是最重要的内容之一。讲到这个模块的内容，先从实际的项目案例说起。
开始制作人机界面系统时，我们需要与汽车制造商确认人机界面可以在屏幕中设计的大小区域（注：“屏幕”是指应用程序的正常工作空间，而不是整个空间）边缘，有些厂商在这个区域嵌入了固定按钮）。
1. 屏幕尺寸有几类？
我们先来了解一下流行主流的车载分辨率：众所周知，我们车载的屏幕尺寸和分辨率有很多种。（我们需要设计的屏幕是仪表板、中控，有些车辆还包括前排乘客和后排娱乐屏幕。）
1) 特斯拉
Model3 1920*1200 15英寸（底部控件大小为120像素，固定）。Model S/X采用竖屏设计，分辨率为1200*1920。
接下来我们看看苹果的Carplay系统分辨率和谷歌的车载系统。
CarPlay系统分辨率：800*480、1280*720、960*540、1920*720。
相信大家已经找到规律了。横屏设计时，高度基本为720px，其余横屏按比例缩小。
这个内容非常重要，关系到整个系统的布局。苹果的Carplay、谷歌的Android auto、百度carlife+都有自己的HMI系统。如果部分车企的屏幕分辨率与他们不一致，就会无法适配成功，还会出现拉伸等现象，除非他们根据厂家的尺寸通过定制服务重新打造一个HMI。
2.间距规范
为布局中的元素和组件之间的固定垂直和水平间距指定一组间距值，建立在一个 8 像素的网格上，这意味着规范中的 UI 组件和元素以 8px 的倍数分隔。
Google Android Auto 间距规范共有九个常用值，P0 - P8：
注意：提供 4px 和 12px 间距大小是为了对齐较小元素之间的距离。这两个值要谨慎使用。在大屏车载系统中，也有很多间距需要大于96px。因此，要求是可以使用8px的倍数。
说到这里，有些人会有疑问：我们能不能不把间距设置成8的倍数，把间距设置成4、5、6的倍数是否可行……当然，没关系，如果选择了一个倍数，不要使用其他倍数。如果页面上出现多个间距，会使页面没有节奏感，破坏了亲密度的原则。
3. HMI模块中的布局
想接触车辆设计的同学，先说一下大体布局。这一次，我们将简单谈谈 1920 × 720 分辨率。
4.自适应布局
说完了各个模块的大体布局，再来讨论自适应布局，真的非常非常超级重要。这个问题在工作后期经常遇到客户想要提高屏幕分辨率。 虽然前期我们在布局上花费了很多时间，但是后期可以减少很多维护工作量。 因此，需要在前期规划好基本框架。
让我们以实际案例来说明：抛出一个问题：我们如何将分辨率为1920×720的页面内容转换为1280×720？
（有些产品经理可能会说让coder直接写自适应布局）导航相关的页面需要调用地图接口。Coder 可以直接写自适应布局，但是其他元素还是需要设计师重新安排。
（有人说直接缩放列，调整页面布局）这个方案在比例相差很大的情况下是行不通的，但是如果比例差不多就完全OK了。恰好我们项目中有800×480的分辨率，和1280×720很相似。
（也有人表示不满意：折叠某个区域的内容，将该区域的内容做成图标，点击弹出。）这种方法可以用在一些内容上。
如果前两种方法都不起作用，则某些内容需要灵活的布局控件。比如设置页面，中间空间大，放入小页面时，控件的长度可以根据灵活的布局进行拉伸，到适合屏幕的大小。
更改布局时要小心：一是会增加编码工作量，二是增加用户的学习成本。当然，当屏幕垂直时，需要重新排列，因为高宽比变成了相反的值。