6000字干货!HMI视觉+交互设计原则全方位指南优设网

刚开始进入车载行业的同学都会存在一个误区,会拿互联网那一套设计规范套路汽车HMI设计,但其实汽车HMI有自己的设计原则和设计规范以及美学理念。

汽车行业本身是一个有着强烈美学理念和设计规范的行业,其实准确的说应该是汽车HMI中控设计是基于自身传统规范,结合互联网移动端和Web端的基础上,慢慢形成了一种新的设计规范。加上庞大的行业从业者的外溢,互联网的美学理念和设计规范,已经在入侵进来形成HMI设计新兴的细分领域。

那很多同学问了我们想去做HMI设计应该从哪里下手啊,在这里我建议大家无论做任何的设计都应该从用户场景、用户痛点下手。

在设计HMI的过程当中,都是基于用户在智能车的场景里。就像设计APP会基于用户痛点和用户场景来的一样。在智能车的体验里,首先是驾驶员、其次是车、以及系统三个要元素组成了车内场景。

在结合了现有的互联网车机设计原则,主要考虑的还是简单易用和高效专注。

1.简单易用

在设计上应该为驾驶员提供更完善的包容机制,操作和信息的统一性和延续性,帮助用户降低操作成本,提升用户体验。

2.高效专注

考虑驾驶员的实际场景的多样性,注意力容易分散或暂时中断。所以在设计的时候要考虑除非重要的警报,尽量用听觉给到用户的提示。操作上可以满足单手操作,并为用户的每一步操作提供及时的反馈。

在三秒原则里,一秒视觉、两秒交互。排除车的硬件体验,那HMI设计师在系统里要给到用户一个什么样的视觉原则和交互原则是我们今天要研究的问题。

车载的美学他们大多是深色的,金属质感,边框和阴影。早期的车载用户界面都是硬性的感觉。但是现在行业已经成熟到一个包罗万象的男女皆宜的当代审美。所以现在的视觉可以在以往的传统上,是汽车界面更新潮更科技。

关于色彩

主流的背景以深色为主,那是因为深色的背景更不容易分散司机注意力,减少了眩光的问题。现在一些新能源车可以切换白天黑夜模式,也会出现浅色的背景,浅色模式的整体色调不好把控,处理不好会使屏幕一直处于高亮状态,会让驾驶员产生一定视觉疲劳。

色彩规则以中华人民共和国国家标准关于驾驶安全的基础标准为大前提,设定符合车载场景的取色类型。

色彩对比度

由于驾驶环境的复杂光线条件,需要满足在不同照明条件(日间/夜间/暗光/眩光)下的可读性,对比度需满足以下条件:

饱和度与明度的合理搭配

根据MunsellColor原理得出,饱和度和明度的两个数值越大,颜色越鲜艳。在车机配色选择上请遵循以下规则:

不建议选择单色,建议增加辅助色

更好的可以帮助我们分组,提高信息的获取能力。

结合ISO15008(道路车辆.运输信息和控制系统的人类工效学方面.车辆目视显示用规范和试验程序)

按照功能色分类可以根据常规场景将功能定位一级色、二级色、三级色。

状态颜色

状态用色分类:此处颜色以HSV颜色模型参数为标准。

百度主题案例:

阿里颜色规范:

华为颜色设计规范:

阿里车载-设计走查自测表:

为方便车载小程序设计,提供轻量化的小程序设计走查表以供参考;可用于项目前期设计自测、项目中研发自测检查、项目上线后设计/产品协同开发同学完成自测问题,查缺补漏规避风险点;

中控与驾驶员的距离处在70cm-85cm之间,设计稿一定要在实车上感受,是否足够清晰,是否能快速识别,中控屏搭载的更多是各种应用,显示的文字相对会多一点,除了文字需要保证在可视区间里,文字内容应当通过字号字重来区分主次关系,用户在扫一眼的过程中即可准确的看到重点信息。保证易读性。

字体的颜色尽量选择对比度高的,参考WCAG标准。方便用户能快速扫视。

字体的大小,层级,对比度等都是影响视觉可读性和阅读效率的重要因素,为保障文本的易读性,界面文字需满足以下要求:

百度字体设计规范:

点击是交互行为中最为常用的动作,为确保用户点击操作的易用性和成功率,操作按钮及热区需满足以下规则:

车载以驾驶员的操作为主,功能布局尽量设计在离手最近的位置,缩短操作距离,尽可能将热区放大,展示信息放在右侧。

层次和数量

所有的信息按照使用场景、功能。分组展示,确保信息按照的优先级进行交付。在任何场景下展示尽可能少的信息。避免过多信息的干扰,必须做到界面显示轻量化。数量尽量不超过3-4个。

阅读排版

可以根据阅读浏览模型Z字型和F字型。混排的时候建议使用一种字体。

预留安全热区

避免元素热区过近或重叠,需要使可触摸目标之间预留足够的安全距离,至少保持3.5mm的热区间隔。

用户对传统汽车的品牌感认知,还是停留在车标、车造型等硬件外观,而智能汽车,搭载了一个智能系统,除了驾驶需求,人和车的交互更多的会停留在HMI,所以,对于HMI融入品牌元素也相当重要,品牌化是智能座舱视觉设计重要的发展趋势之一。

现在主要品牌的体现形式是车载的IP管家,他有具体的名字,可以用语音唤醒。

说到HMI设计,虽然所有人都很容易理解,HMI设计要考虑注重安全,需要在设计上适应车载的使用场景。但是UI设计原则和UX设计原则很少有人系统性的回答过。对比原有的交互六大原则,适配到车载的场景下,提炼出六大交互设计原则。

安全性原则

HMI涉及到的载体都是汽车零部件中的安全件,HMI设计首先考虑的必须是以安全为第一导向,所有显示信息都应该按照人机工程学进行合理排布,按照驾驶者的行为习惯进行设计。

及时反馈原则

人的大脑每天通过五种感官接受外部信息的比例分别为:味觉1%;触觉1.5%;嗅觉3.5%;听觉11%;视觉83%。

时刻保障关键信息是最高优先级的,保证在各种环境场景下具有良好的可见性和易读性,无需驾驶员费力寻找和识别。

随着大屏、多屏化的发展趋势,除了依赖视觉反馈,以及减少或避免触摸屏的误触功能,听觉和触觉也可以辅助视觉反馈。

不同场景下的提示

除以上正常驾驶场景外,还有部分对特殊场景的提示,如油耗、故障、雨雪天、超速、疲劳等

车载系统需要有能力面对复杂的应用场景,处理需要更加智能,(比如复杂路况+不良天气的提示),以及车内的环境控制(如声音、气温)需要更加敏感。

信息获取效率

同样,现在的智能汽车,信息呈现的方式,主要也还是视觉为主,听觉为辅。在还没有完全实现自动驾驶前,信息呈现层级保持不变。

在汽车行驶的过程中当中最高优先级是视觉,时刻要观察道路,查看导航。听觉辅助也是很有必要考虑的场景,通过语音反馈司机需要获取的信息,能让司机尽量保持视觉焦点在路况上。多场景的融合考虑信息获取的效率,能减少在开车过程中的安全隐患。

完整性原则

简单学习原则

面对C端用户,设计师要考虑尽最大可能使用符合用户习惯交互方式,减少学习和适应。让驾驶员更有安全感和便捷的操作。如果交互界面改变了,用户极有可能必须从头开始学习一些基本操做。在市场竞争压力这么大的情况下,用户很容易就转向自己接受程度高的产品。随着屏幕越做越大,需要驾驶员操做的功能也越来越多,所以驾驶员会因为复杂操做,面临交通路况拥挤的情况下的额外压力。

信息可视化原则

尽可能的采用图像化/拟物化风格,避免或减少使用复杂的、过于专业的、技术性的图标和术语。

情感化原则

马斯洛需求指出,人们需要动力实现某些需求,有些需求优先于其他需求。我们当下在满足基础需求后需要的更高阶的需求。情感化设计是用户体验和需求金字塔的最高层级,情感化需求也是必然的需求。在移动端,情感化的体现主要还是视觉层面,比如加载过程中的动效、缺省页的插画、异常状态的提示等,还有就是和品牌的结合,增加用户对品牌的认知。

而对于汽车而言,它是一个空间,就靠屏幕里的视觉元素是远远不够的,应该从整车的角度去分析,通过五感(视、听、触、嗅、知)创造更丰富的全局体验,比如可以根据自己的驾驶需求和个人行为习惯,自定义氛围灯,香氛、语音等。

汽车IP

汽车IP用虚拟的人物语音来扮演管家的角色,功能包括了记录车主的驾驶习惯,不断优化程序来契合车主习惯,让车主有更好的驾驶体验。

比如蔚来的nomi,既可以陪玩陪聊,还有表情互动,若是加上管家功能,汽车岂不立马变身驾驶员最好的伙伴?看这小表情,是不是还挺可爱、暖心的哇?

在讨论如何对超宽一体屏进行体验设计前,我们需要对人在不同场景下的多样化需求有大致的了解。为此,我们将人与车空间关系的场景划分为四大方向依次是:生活、娱乐、办公和共享。

如生活场景下,全家出游,疲惫的人可以直接在车上睡觉休息,无聊的人可以玩游戏,车内空间采用多音道技术,不同的音道技术可以避免彼此干扰。除此之外,还可以起到保护隐私的作用,满足每个人对个人空间的需求。

在娱乐场景下,人可以进行多项休闲娱乐,比如:看电影或者读书看报,其中使用超宽一体屏观看电影时,大屏会给人以良好的观感体验。

在办公场景下,人可以在驾舱内进行各项办公活动,诸如:视频会议、电脑办公、商务信息处理等。

在共享场景下,车不仅可以是运输人的移动工具,还能成为运输货物的移动工具、移动商城、移动酒店等等。

触控:

这里分两种,一种是通过按键控制;一种是通过触屏控制。都是通过不断的触控功能按钮行程锻炼肌肉记忆,现在的趋势越来越趋向重触屏,轻按钮,这样不仅系统迭代成本小,功能可以动态分布。但是对于一些精准调节的功能还是按键控制好一些。

微软的SurfaceDial可以给我们很好的启发,智能旋钮可以解决大部分屏幕调节的不精准的痛点,而效率又高。

语音:

在汽车人机交互中,语音交互被认为是车内场景下最自然的交互方式,而语音交互需要一个载体来传达多样化的情感。

语音控制的前景主要在于两个因素,一个是可以把除了界面以外的利用起来,一个可以与HMI自由交谈,二是最小化HMI手动操作产生的干扰,增加安全性。

手势:

手势交互是对语音交互、触控交互的很好补充,能够让车主通过简单的手势和语音就能完成车内的交互任务,也是能够增加交互趣味性、表达情感、传达情绪的另一个自然交互方式。

常用的手势:单指滑动(上下左右)、双指滑动(左右)、五指抓取等。

HMI的交互手势不同于手机和IPAD,手机和IPAD握在手里,左右手都可以操作,多指组合的可能性也多,而HMI的手势定义,更多的是需要满足驾驶员的使用场景,屏幕是固定在车上的,要规避掉一些不方便的手势。比如双指往上滑动就很不方便,向上推不灵活,也有阻力。

大家要是想了解的更深入,或者想针对于某个平台去做设计可以参考一下开源网站。

1.阿里Alios开放平台

2.百度车载生态开放平台

3.腾讯-车载小场景

4.谷歌驾驶

5.苹果AppleCarPlay

6.华为车机三方应用交互设计规范

如果同学们还是对中控设计的设计标准没有一个概念的话,建议多去看些现有设计,去展厅试驾试乘实车,感受下交互,或者在网站上看看视觉不错的界面设计都是可以的。

THE END
1.螺丝中的L指的是哪个长度?螺栓/螺钉/螺丝尺寸 提问时间:2024-12-20 4258 浏览 分享 全部回答(1个) 是规格图中(头部)k以外的部分属于L(组合螺栓的L都是指头部以外部分) 发表时间: 2024-12-20 0有用 相关商品 垫圈组合螺丝 十字槽型/盘头P=4(SW+JIS小型W嵌入型)/小型 上一问题: 联轴器型号CPJC40-RD-14-14,但是收到的实物包含两个型号MJThttps://techinfo.misumi.com.cn/faq/detail/6424/
2.零部件的定义与应用实例探究在现代制造业和工程技术中,零部件(component)是构成复杂产品或系统的基本单位,它们可以单独存在,也可以组合起来形成更大规模的结构。理解零部件的定义及其在实际应用中的作用,对于设计、生产和维护高效、高质量的产品至关重要。 首先,我们需要明确什么是零部件。根据不同的标准和领域,零部件可以有不同的分类。在机械工https://www.jhsjdh666.cn/ke-yan-jin-zhan/633193.html
3.机械零件图范文12篇(全文)说明零件的名称、材料、数量、日期、图的编号、比例以及描绘、审核人员签字等。根据国家标准,有固定形式及尺寸,制图时应按标准绘制。 4、技术要求 用一些规定的符号、数字、字母和文字注解,简明、准确地给出零件在使用、制造和检验时应达到的一些技术要求(包括表面粗糙度、尺寸公差、形状和位置公差、表面处理和材料处理https://www.99xueshu.com/w/ikeyagcu6ae5.html
4.CAD实用技巧工程标注是零件制造、工程施工和零部件装配时的重要依据。在任何时候一幅工程图中,工程标注是不可少的重要部分。在某些情况下,工程标注甚至比图形更重要。 我的许多同学不怕绘图,怕标注;原因之一是尺寸标注方式对话框里选项太多,自己又理解不清,更不知道这些选项之间如何配合,所以往往很难达到理想的标注效果。 为此,https://m.360docs.net/doc/1f7530591.html
5.工程制图及机械CAD超星尔雅学习通网课答案9、【判断题】下列关于尺寸标注的描述,哪些是正确的? 机械图样中,标注线性尺寸时,尺寸数字水平书写时字头向上,铅垂填写时字头向左,其它倾斜方向的尺寸数字应有向上的趋势。 10、【判断题】图样中所标注的尺寸,是机件的最后完工尺寸,否则应另加说明。 2.5章节测验 http://xuzhou.ehqc.cn/html/23_2.html
6.审查指南(2006年修订)法信附图应当尽量竖向绘制在图纸上,彼此明显分开。当零件横向尺寸明显大于竖向尺寸必须水平布置时,应当将附图的顶部置于图纸的左边。一页图纸上有两幅以上的附图,且有一幅已经水平布置时,该页上其他附图也应当水平布置。 附图标记应当使用阿拉伯数字编号。说明书文字部分中未提及的附图标记不得在附图中出现,附图中未出https://www.faxin.cn/lib/Zyfl/ZylfSimple.aspx?gid=A100359
7.Eagle常见问题解答文字在屏幕和印制板上的外观不同!怎么会出现这种情况? 如何为 GND 等创建电源平面? RATSNEST 不处理多边形。为什么? 内层中的电源层、电源平面、多边形 – 这是什么? 库 查找库和零部件 用户语言 用户语言程序 (ULP) – 这是什么?如何使用? EAGLE 是否可以在 Windows 7/8/8.1/10 上运行? http://knowledge.autodesk.com/zh-hans/support/eagle/learn-explore/caas/simplecontent/simplecontent/CHS/content/autodesk-eagle-frequently-asked-questions.html
8.www.gzhxaq.com/mydata/law/202304/20/16819541750906.htm(6)对于可能超负荷(压力、起升量、温度等)发生部件损坏而造成伤害的,应设置超负荷保护装 置,并在机床上或说明书中标明极限使用条件。 (7)运动中可能松脱的零部件必须采取有效措施加以紧固,防止由于启动、制动、冲击、振动而引 起松动、脱离、甩出。 http://www.gzhxaq.com/mydata/law/202304/20/16819541750906.htm
9.2020级五年制人才培养方案2020级五年制人才培养方案http://www.jxxdjsxy.com/jiaowuzaixian/zhuanyeshezhi/2022-06-19/8135.html
10.cad课程设计小结(通用14篇)4、写文字要规范 文字是工程图中不可缺少的一部分,比如:尺寸标注文字、图纸说明,注释、标题等,文字和图形一起表达完整的设计思想。尽管AutoCAD2006提供了很强的文字处理功能,但符合工程制图规范的文字,并没有直接提供。因此要学会设置“长仿宋体”这一规范文字。具体操作的简要步骤是,打开“文字样式”对话框,新建一https://www.360wenmi.com/f/fileybonwq6l.html
11.尧创机械CAD机械成套设备制造行业专业绘图软件选软件网2.图纸比例 图纸比例功能可用来控制尺寸标注、文字、剖面填充、各种机械符号等标注类对象生成时的大小,也可用来修改标注类对象的大小。 通常用户按实际尺寸绘制零部件的各个视图,然而在标注尺寸或书写文字时,设置尺寸或文字的大小需要使用绘图比例进行换算,例如,用1:10的比例绘图,当需要书写3.5号大小的文字时,用户需要https://www.xuanruanjian.com/soft/msg/61495.phtml
12.你能分清工业领域这些常见的技术文档吗?通过图形方式补充文字说明的不足,提高文档的易读性和准确性。 二、零部件手册 零部件手册是详细记录产品各个零部件的名称、规格、功能、安装位置、更换方法等信息的文档。 1. 形式 通常包括以下几个核心部分:目录与索引、零部件图纸(包括二维图纸、三维模型等,用于直观展示零部件的形状、尺寸、装配关系等)、零部件清https://blog.csdn.net/m0_58878946/article/details/140520918
13.工程制图规范9装配图中零、部件序号及其编排方法┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈ 9.1序号的指引及表示方法┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈ 9.2序号的编排方法┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈ http://www.360doc.com/document/22/0527/23/79693428_1033457179.shtml