9mm是多少厘米(直径9mm有多大)

导读:本文作者从事车载HMI工作2年多，沉淀输出了一些行业内容。HMI行业还是一片蓝海，很多设计师不敢轻易进入这种新型行业，觉得难度大，要求高，要求苛刻。本文先带你走进这个行业。文章以人机界面的一些基础知识作为解释。笔者会在设计规范的内容上加很多干货，用实际案例来讲解。

三。布局规范HMI设计与其他终端设计最大的区别在于布局，布局是整个页面设计的框架，也是最重要的内容之一。讲这个模块的内容，我就从实际的项目案例说起。

开始做车载UI系统，需要和汽车厂商确认车载UI可以在屏幕和设计尺寸区域内(注意:这里的“屏幕”是指应用正常运行空之间的区域，而不是边缘的整个空，有些厂商在这个区域内嵌了固定键)。

1. 屏幕尺寸有多少种类别？

首先，我们需要知道流行的和主流的汽车分辨率:众所周知，我们的汽车上有很多种屏幕尺寸和分辨率。在设计过程中，设计师主要关注的是屏幕分辨率。(我们需要设计的屏幕是仪表盘、中控，有些车辆还包括副驾驶和后排娱乐屏幕。)

1)特斯拉(特斯拉)

3 Model3 1920*1200 15英寸(底部控制键尺寸为120像素，是固定的)Model S/X采用竖屏设计，分辨率为1200*1920。

2)蔚来

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

3)李一人

它有四个屏幕，仪表盘是12.3英寸1920×720/中控面板是16.2英寸2608×720；副驾驶娱乐屏12.3英寸1920×720/plus功能控制屏10.1英寸1280×720。

4)小鹏

G3竖屏15.6 1920×1080 P7控制屏属于目前汽车产品中分辨率较高的梯队。2400×1200的精度超过2K(2K分辨率标准为2048×1080像素)。

接下来我们来看看苹果的CarPlay系统分辨率和谷歌的车载系统。

CarPlay系统分辨率:800 * 480，1280 * 720，960 * 540，1920 * 720。

相信大家已经找出规律了，在设计横屏的时候高度基本都为720px，其余横屏幕按照比列缩小。相信大家都发现规律了。横屏设计时，高度基本为720px，其余横屏根据对比栏缩小。

这个内容如此重要，关系到后面整个系统的布局。苹果的CarPlay，谷歌的Android Auto，中国的百度carLife+等。都有自己的车载系统。如果一些车企的屏幕分辨率不一致，就无法适配成功，会出现拉伸等现象，除非通过定制服务按照厂家的尺寸重新做一套。

我们项目中涉及到的屏幕和CarPlay的大小大致相似，但是在布局上我们有自己的想法，这将在后面的自适应布局中提到。

2. 间距的规范制定

为布局中元素和组件之间的固定垂直和水平间距设置一组间距值。参考规范布局，构建在8像素的网格上，也就是说规范中的UI组件和元素以8px的倍数分隔。

Google自动间距规范开发了9个常用值，P0–P8:

注意:提供4px和12px之间的距离是为了对齐较小元素之间的距离。这两个值应该谨慎使用。在大屏幕车载系统中，也有很多距离需要大于96px。所以对这些值制定规范的要求是8px的倍数，可以使用。

说到这，肯定有人会有疑问。我们在做规格的时候，能不能把间距设置成不是8的倍数？4，5，6 …的倍数可行吗？当然有可能。“规则是死的，人是活的”。只要按照倍数叠加，完全可以。如果选择了一个倍数，则不能添加其他倍数。如果页面上出现多个空格，会让页面没有节奏感，打破了亲密原则。下面是干货:

3. 车载模块中布局

对于想接触汽车设计的同学来讲总图是很友好的。具体交互设计等我后面更新文章。这次我就简单的按照每个模块1920×720的分辨率。

4. 自适应布局

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

这里有一个实际的例子:抛出一个问题:我们如何把一个分辨率为1920×720的页面的内容改成1280×720？

(有同学说直接丢了开发，但是写了自适应布局。)导航相关的页面需要调用地图的接口。这个开发可以直接写改编，但是剩下的元素还是需要设计师重新排版。

(也有人说直接缩放栏目，调整页面布局。)这种方案在比例相差很大的情况下是行不通的，但是如果柱子之间靠得很近的话完全可以。正好我们的项目分辨率是800×480，和1280×720很像。

(还有人表示不满:把某个区域内容折叠起来，把区域内容做成图标，然后点击就弹出来了。)这个方法可以用在一些内容上。

有些模块内容不能降级，但这种方法是行不通的。在这种情况下，我们将直接将这段内容调整为1280×720的大小。

如果前两种方法都不行，有些内容需要是灵活的布局控件，比如设置页面。当中空较大时，可以根据灵活的布局拉伸控件长度，以适应屏幕的设计。如有需要请留言，我会写一篇文章详细讲解柔性布局的使用方法。

我们项目的多分辨率改造基本就是按照这些方案进行的。我给你来个鸡汤:办法总比困难多。如果你真的用心做事，任何困难都无法挫败你。还有，不要做理想主义者，做一个实践者，你会在实践中看到真理。

重新精心布局:首先增加开发工作量，其次增加用户的学习成本。当然屏幕竖着的时候需要重新铺设，因为长宽比一栏变成了相反的数值(可以通过旋转屏幕看一下比亚迪的唐和韩车型)。

诉求的内容都是我们一步一步踩上去的，“且看且珍惜”。

四、圆角的规范1. 如何制定圆角的大小规则

1)使用圆角和全圆角

对于需要突出显示的主要动作和组件，使用更多圆角(更大的圆角半径或全圆角)。圆度对大多数直线形状的视觉影响更大。如果页面上有足够多的空，饱满的圆角会更多，与其他按钮形成对比，鼓励用户点击。

例如，全局消息通知按钮、电话模块中用于接听、挂断和下拉负屏的按钮等。(下面是练习脚本列表):

2)使用较低的圆角和直角

对于不需要或低强调的元素，使用较小的圆角半径或0px圆角=直角。

比如工具栏或者列表可以用更小的圆角，专辑封面不需要强调，可以直接缩小到0px。我们项目音乐专辑大封面用的是直角，具体问题需要具体分析。比如音乐控件的外轮廓是圆角的，所以专辑封面在容器里一定要有圆角，否则设计风格就不统一。

还有一个模块，就是在音乐分类的情况下会有很多专辑封面。我们来比较两种方案:带圆角的和不带圆角的。两张图相比，圆角的相册封面在边角处边缘更明显，造成了一种视觉不佳的感觉，而直角的相册似乎不太容易突出，不太可能引起我们的注意。所以在网格布局中圆角的效果更好。

3)谷歌对圆角的定义

在设置圆角规则时，有一点要注意:大小种类不能太多，否则会显得杂乱无章。

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

总结:圆角和直角没有对错之分。合适的才是最好的。

五、图标规范1. 图标的种类（车载图标分为应用程序图标、系统性图标）

1)应用程序图标

现在的HMI设计趋势已经去掉了应用图标，取而代之的是基于卡片的设计方案。简单来说，基于卡的设计有两大优势。第一，把学习成本降到最低。第二，增加的接触面积降低了驾驶时的误触率，给用户最直观的体验就是简单易用。不过有些车厂对这一块还是有需求的，就稍微提一下吧。

我自己负责过有应用图标的项目，1920×720的160px分辨率和Apple @3x的一样；相对较小的屏幕，要同比缩小，就像800×480分辨率下首页的应用图标是80px一样。这是怎么算出来的？

项目中还有一款机型，屏幕分辨率为1280×720。随着屏幕变窄，应用图标需要缩小到120px，720和480的高度有240的公倍数。所以最后小屏幕的应用图标是80px，圆角大小也相应变化:R: 24/18/12。其他分辨率根据实际情况使用。

2)系统图标(我将在后续关于构建HMI组件库的文章中详细解释)

系统提供了许多小图标(代表常见的任务和内容类型)用于导航栏和选项卡栏。最好尽量使用这些内置图标，因为大家都比较熟悉。

2. 图标的尺寸

1)大厂是怎么做图标尺寸的？

很多博主都是顺便参考一下图标大小，得到别人得出的结论，但是没有说怎么算。对于汽车来说，前期发表的研究报告很少，所以想找一个计算图标的方法。如果你想知道如何转换，你可以检查https://zhuanlan.zhihu.com/p/158099749.

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

视觉中1cm的实际像素是多少？这是一个错误的想法。上面文章里也提到了屏幕分辨率不能换算成物理长度单位(实际项目经验告诉我，因为屏幕尺寸相同，但分辨率不同，所以得到的结果不能共享)。

2)计算2)生产者价格指数

我来说说计算原理。根据屏幕的分辨率，我做了一个同样屏幕大小的车，都是8寸屏幕，但是一个分辨率是1280×720，一个分辨率是800×480，每个网格是一个像素。

3)最小图标尺寸计算

接下来求1280×720的分辨率，最大公约数是80。最后得出屏幕的比例栏是16:9，两边比例的平方和=屏幕英寸的平方。根据勾股定理(16x) 2+(9x) 2 = 8× 8，最后的x计算结果是0.4357。

6: 9的8英寸屏幕长度(单位:英寸)=0.4357×16 =6.9712宽度=0.4357×9=3.9213，国际记账单位为1英寸= 2.54cm得到的屏幕长度(单位:厘米)=6.9712×2.54≈17.7cm

分辨率：1280×720 宽度约等于10cm来计算，720/10 = 72px分辨率：800×480 由于他们屏幕大小一致（英寸） 480/10=48px得出视觉上1cm的实际像素是有差异的结论。

根据设计规则，以4的倍数公式化，所以最小图标为40px(此结论仅作为推荐。做项目的时候，变数很多。甲方爸爸喜欢超大号的，你也没办法，还是按项目制定)。

为了计算这个，我还特意复习了高中学习的开根号和初中的最大公约数。还好当时数学还是小学霸哈哈哈♂ ♂ ♂。

4)如下图所示。

谷歌自动图标尺寸规格:

基本图标:主图标:44px，副图标:36px，第三方图标:24px；头像使用:小头像:56px，中头像:76px，大头像:96px；百度的车载生态开放平台下载了他们的组件库，进行了研究；基本图标:48px次要图标40px(最小图标尺寸)。这里想说一下，大图标的大小设置会有很多大小图标。后续我还会输出关于车内图标的详细内容。请注意。

3. 图标的点击区域

1)图标触摸区域分为驾驶使用和静止使用。

比如开车的时候，需要调整空音的内外循环。老爷车的硬键被屏幕上的按键取代。旧的硬键经过长期使用已经记住了，而且有触感，硬键大小适中，所以减少了操作时间，降低了危险系数。

在新能源汽车的设计过程中，可以通过增加触摸面积来减少误操作和无法点击，使驾驶员的视线长时间离开方向盘。研究表明，停留超过2秒是危险的。

使用静态，例如:在设置页面中调整车辆设置中的属性，巡航模式，电动尾门开启百分比的调整等。

2)谷歌为触摸区制定规则

最小触摸目标尺寸为76 x 76px，需要在单图标设计的基础上增加一个触摸区域。驾驶过程中操作简单。如果是在休息时使用，我们可以遵循苹果设计规范最小手指触摸面积为44x44px。

这是我基于实际项目和车内路试(路试:驾考)得出的结论。还有一个特例:文字+图标组合点击区。当图标很小的时候，也可以考虑把文字组合在一起，增加点击面积。

4. 图标设计的统一规则统一风格 统一光源统一线条粗细统一圆角/直角统一倾斜角度断点的距离、大小统一5. 最后最一个小插曲：命名的规范

之前经常有小伙伴问我，落地项目的icon切图命名规范怎么制作？就拿我之前做的风格稿首页来说，首页音乐卡片中的“下一首”的图标如何命名。4.图标设计规则统一，样式统一，光源统一，线条粗细统一，圆角/直角统一，倾斜角度统一，断点距离和大小统一。之前经常有朋友问我，如何制定落地项目的图标切割命名规范。以我之前的风格稿首页为例。首页音乐卡片中的“下一首歌”图标如何命名？

首先分析这个图标用在了那个页面的什么地方，然后它的属性是什么图标或者按钮，其次这个图标代表什么，这个图标的大小。因为一个系统中会有重复的功能图标，所以需要增加大小(这一块内容可选)。最后，添加这个图标时，状态分为:禁用、正常、按下、选中。

最后演示:首页_音乐_下一页_正常，对接开发要翻译成英文。

有时候英文名字也可以缩写，比如setting: setting。可以直接写set icon button BT(全局使用的话用all)。

总结:听了小米的发布会，深有感触。视频弹幕里全是“把特斯拉翻过来”的画面。小米一造车，就背负着全民的期待。创始人雷军已经功成名就了，但他还是愿意把自己所有的名声和人生放在未来十年。我心里只有尊重。祝小米早日造车成功，“把特斯拉翻个身”。我们设计师也愿意跟这个行业打个赌。

第1部分:如何构建HMI:设计规范(第1部分)

作者:设计界的最佳演员

原文链接:https://www.zcool.com.cn/article/ZMTIyNjAxMg==.html

本文由@ Design的获奖者原创发布。大家都是产品经理，未经作者允许，禁止转载。

来自Unsplash的图像，基于CC0协议。