车载设计万字干货!超全面的HMI交互设计指南优设网

智慧城市的建设趋势越来越显著,政府对于汽车智能化、信息化发展非常重视,汽车驾驶体验感与个性化的设计也会成为我们对于汽车选购的参考和方向,自从人们对于用户体验的重视,人机交互设计工作内容也成为重要环节。

之前很多小伙伴会经常问到我怎么做HMI设计呀?参考那里去找呀?HMI的用户体验该怎么去做?竞品分析怎么做?等等好多好多问题呀,我也会经常和同行进行多交流学习。

接下来我们简单的介绍一下车内屏幕的类型,主驾驶前面的仪表盘、HUD和中控屏幕,副驾驶和后排的娱乐屏幕。

仪表盘

HUD

平视显示器(HeadUpDisplay),最早是航空器上的飞行辅助仪器,运用在战斗机上,由于战斗机上很多信息需要飞机驾驶员随时查看,避免驾驶员低头看仪表而分心,随后又普及在民航客机上,由于HUD的方便性以及能够提高飞行安全,这项技术后来也发展到汽车行业,汽车搭载的HUD抬头数字显示功能,是利用光学反射的原理,将重要的行驶信息胎压、速度和转速等信息投射到驾驶舱前段玻璃上面,在驾驶过程中不用分心看仪表盘,减轻眼睛的疲劳,给驾驶带来便利和安全。

娱乐屏幕

驾驶员和屏幕之间交互必须简单,不分散注意力,并且易于中断,因此驾驶员的注意力可以迅速回到道路上。

导致HMI的交互和其他移动端不同的交互方式,因素有很多,例如:操作区域的面积、主驾驶与屏幕的角度、位置、运用场景等等,也有共同特征比如可用性、易用性、用户体验流程之类的。

交互场景

在不同运用场景下,交互方式也会有所不同,比如静止状态、驾驶中(这是关于驾驶位置的场景),还有一些关于环境和驾驶中的状态都要考虑进去(晴天、雨天、下雪、大雾、超速、疲劳等),都需要细致的定义,第一考虑要素就是安全驾驶,不注重安全的交互设计都是耍流氓。

第一秒视觉

注意点:

第二秒行为

第三秒反馈

我们就直接奔入本章节的主题吧,本文我会从八个小点出发,详细的讲解车载的交互内容。

直接抛出结果。单次交互操作动作不能超过2秒(1秒内为最佳)在前面我们也简单的提到了交互的行为内容,如果一个在行驶过程中需要交互操作的动作用时2-3秒就已经是一个危险状况。

为什么这么定义,假设一辆以60km/h的车速如果2-3s盲开就会开出35-50m,一旦需要急刹车那么刹车距离至少15-20m

以此计算当高速路上行驶车速100-120km/h可想而知,极其危险,可能车毁人亡,所以我们呼吁安全驾驶,谨慎变道,保护自己也是保护他人。

因此,在三秒以内,无论是用户第一次操作失败,重新注意路况后,再重复操作,还是用户持续操作直到任务完成,都是非常危险的行为,在这里,由于用户试错的成本非常巨大,也因此交互的设计与信息布局的设计都需要做到最极致。

小插曲:

这边就有人会说了现在都有紧急刹车(AEB)系统了,那我们简单介绍一下,AEB(AutonomousEmergencyBraking,自主紧急制动)通过传感器(摄像头、雷达、激光等)识别车辆前方障碍物,当车速与障碍物距离低于预设安全值时,制动系统介入,避免碰撞,AEB是用来帮助驾驶员避免或减轻碰撞事故的系统。

AEB系统主要干两件事:

实车可用性测试评估

现在我们再结合看一下实际中的实车在每一个交互中体验如何,是否存在危险,这是Thoughtworks机构对特斯拉做的一个可用性评估评分:

操作热区

驾驶场景的特殊性,驾驶员只能用距离中控屏最近的一只手去操作(为什么我不说用右手去操作,因为我在做海外项目的时候,主驾驶位置的是在右边,那么只能用左手来操作屏幕了)

这是全球驾驶位置不同的分布图:

以离屏幕最近的一只手臂,左驾驶舱为案例:手肘部位为中心点画圈,分为三个等级,最佳触控区、易触控区、较难触控区。

下面我们拿实际车载案例来给大家说明:

针对触控交互方式,屏幕区域内的触控操作便利性,以驾驶员为中心向右逐渐衰减,重要的功能操作应放置在最佳触控交互区域内。

交互热区

再考虑这块内容的时候,我就有一个疑问,这块内容是交互设计师来定义or设计师来定义?不管了我就要做全栈的人我要的就是啥都可干

增加交互热区,是为了降低操作的难度,用户在驾驶场景下的注意力和活动范围有限,进行精准点击和小区域触点操作需要付出更多的操作成本,且会分散驾驶注意力,需要更大面积的操控热区来承载触控行为,保证核心操作在不同场景下的易用性,下面举一些案例和大家说明。

案列1:音乐控件的操作热区

如何从音乐小控件进入音乐详情页面?

根据上面的上面结论组合增加操作区域才是最佳选择

案列2:编辑状态勾选的操作热区

编辑状态下,如何做到高效的勾选(我这边都不用说,大家也都肯定知道如何定义了)

当然选择方案二

总结一下:为了给用户带来良好的驾驶体验感,我们就应该多去考虑增大触控区域,在某些某块内容中尽量减少精确操作,多做一些模糊操作,大白话的意思大致就是这个区域内的都可以操作。

还有一个小注意点需要谨记:

在对接开发的时候,对于这块内容一定要和他交代清楚,不然他就不会以组合来写操作热区了。

再讲到HMI高效的交互方式之前,我们还需要了解一下多模态交互。

多模态交互

“多模态交互”包括了视觉、听觉、嗅觉、触觉以及味觉等方面的感官交互,也就是通过眼睛、耳朵、鼻子、嘴巴以及皮肤触摸实现,其技术应用在实际生活中也是围绕这些感官进行设计,将多个感官的交互技术融合在一起,形成一种多模态的交互形式。

在车内所用到的交互,通过语音、触觉、触控、嗅觉、视觉、手势、体感等多种交互,以更接近人和人之间交互的一种方式,使人车交互变得更加自然和轻松。

抛出一个问题?

什么交互方式才是算是高效的交互方式?什么样子的交互才是王道?每个人都有每人的定义方法,我和很多设计师有谈过这样的话题,在这个话题最后我会给大家一个结论。

常用的交互方式

先介绍一下现在市场上车机中含有的交互方式,硬按键/触控/语音/手势

硬按键交互方式

在最初的原始车机,基本上都是通过硬按键来解决,都是成千上万次的肌肉型记忆,才得已做起来那么的顺畅,这个也有它的优点所在,下面展示一下硬按键的车内

触控交互方式:

当液晶大屏的出现,使其交互方式也随之改变,下面展示一下大屏幕车内

讲完上诉的交互方式,这下我们应该讨论一些实质性的事情了,这些交互方式,该用在什么模块,那些场景里面较为稳妥合适,赶紧坐上我的小火车要加速了du~du~du~...

点击交互方式:按钮、复选框的勾选、tab栏目切换、icon的点击、搜索栏、控件类型等

语音交互方式

语音交互是我最喜欢的交互之一,它可以尽量减少用户的分心,可以安全驾驶

在车载语音交互中最为常用的非导航莫属了,那就以导航为例:

第一步:语音输入所需要去的目的地信息,如果不知道具体地址信息的话可以模糊导航

用户:“导航到最近的停车场”

第二步:根据用户所给的语音输入导航需求,系统匹配导航目的地,让用户进行选择所需要目的地,

语音助手:“选择第几个呢?”

(先吐槽一下:有的产品经理就会在语音助手对话下功夫,搞的很复杂,添加语音助手昵称或者多说一下语气助词)以上面这个例子添加内容:“siri为您已经找到多个停车场,需要选择第几个呢?”这边只是举一个个例,只希望大家能够简化内容)

音乐:“我要听XXXXX”、“上一首”、“下一首”、“音量大一点”“音量小一点”

空调:“关闭、开启空调”、“温度高一点”、“温度低一点”、“打开内/外循环”、“风量大一点”、“风量小一点”等

上述语音内容讲完,肯定会有人说我温度想要精确调到某个温度,是不是还要说很多遍“温度低一点”,我想说的是现在已经有研发技术可以直接编写代码,让语音可以控制车内空调,达到精确温度了,这就是程序员的魅力所在,反正我是被吸引了。

手势交互方式

手势交互,目前来说运用在汽车里,最大的优势在于动作是相对的,无需精准操作(精准操作不仅要用手,还要靠眼睛寻找,很危险的)但是手势最大的弊端就是操作会比较少(操作太多可能需要回忆操作方式,大脑开小差也很危险)所以在上述中有说道我是偏向于语音控制的选择,我也比较看好这个。

最后总结:

驾驶之外的车内任务会不同程度地分散驾驶员的注意力,为保障行车安全,功能的操作设计需要考虑触控、语音、图像等多模交互相结合,并根据不同使用场景灵活组合输入形式,也适当保留一些物理按键(硬按键)为用户提供最自然的使用体验。

还有一点我想说的是,如果我们设计师能够参与到对于整车的交互设计定义的话,那就拥有更多话语权了,对于从雏形到落地都可以去定义这款车,不然等车已经定型,对于交互定义的内容就有了很多限制。

交互中内容排版

提高操作的效率

功能的信息布局设计要充分考虑驾驶环境的特点,并结合具体场景,对界面信息进行合理布局。驾驶员在驾驶位置和屏幕、按键等之间的相对位置是比较固定的,所以要考虑到驾驶员容易看到,最容易触及的区域,把最重要的信息放在这个区域内。

按照车载的操作热区,在功能与入口的布局上尽可能的根据热区分布来设计。功能布局尽量设计在离手最近的位置,缩短操作距离,将信息展示区放置在右侧。

通用的信息布局

在不同的驾驶场景下,同一功能的信息布局应始终保持一致,避免因布局的变动对驾驶者造成困扰。相同或相似功能之间,页面布局应具备通用性,帮助驾驶者通过位置联想,减少记忆成本。

交互中文案:

对于交互文案的定义一定要短,简明易懂,保持信息的最新状态和可浏览性;

1/传达信息明确清晰

对于交互文案不要含糊不清,不要有歧义。

2/文案简洁明了

身处用户的角度你会发现,很多用户是不看弹窗内容的,看到弹窗上有按钮就马上点击按钮,所以弹窗中的文案,越简洁越OK

举个例子:这两个弹窗表达的意思相同,一个简短直接说现状和行动点,用户能抓住重点,另外一个文案过长用户不喜欢看,而且抓不住重点

3/一致性

要确保产品的一致性,相似的文案,表达方式要一致。

比如:导航中的按钮“开始导航”“修改默认”动词+名词,就不能变成名词+动词

4/主次分明

每段文字都会有主次分明,若能做出区分,将更好地帮助用户理解文案内容。

5/形成闭环

若文案不可避免会很长,那么有没有让用户快捷操作的途径呢?

实现方案:我们交互方案的定义下面就是“知道了”

我期待的:如果是我定义按钮功能会将按钮变成“去设置“(我会在下个版本更新的时候我会提出我的方案)

高效的任务流程功能设计应以提高任务完成成功率为目标,减少认知和操作的成本,避免设计过于复杂的信息架构和功能流程路径,且所有功能需有固定且完整的进入和退出路径。

我为什么要讲随意拖拽这个功能点?

按照现阶段版本功能点,只有在导航模块中才会出现多任务处理状态,上诉已经讲过几个功能的切换,但是我们分屏方案还是2年前,从未修改,展示一下之前的交互内容(和斑马以前分屏差不多)

由于多了这个内容,右边占据的空间,缩小了左边导航的内容,一旦导航出现路标、路况、导航线路图、缩放地图按钮等等,导航页面需要承载的内容偏多。

按照这个方案的话可能会干扰驾驶任务,后续我们设计师内部出了一个方案,叫做小控件,可以随意拖动,而且暂用控件比之前方案小很多,下面我就给大家展示一下这个方案的UE雏形。

最终这个方案是得到了领导的认可,但由于开发成本过高,如果编写的话,需要将这个新的方案编入下一个IOT升级包里面。

结论:

不管在什么场景下最高优先级的是驾驶任务,任何多任务处理都要考虑对驾驶的影响。

避免在驾驶过程中常使用到的功能藏的很深,一定不能多于3个层级,否则对于驾驶安全会有很大的威胁。

车机使用功能的频率

在车机中有哪些功能是驾驶过程中使用频率较高、重要等级较高的,我们来看一下

使用频率较低:系统设置、第三方APP

这么看来传统的车机也就2层就可以到达联系人并可以拨打

如果是带语音搜索联系人

PS:如果可以直接说全名并且没有重复就直接进入通话模式一步即达

如果联系人中同名同姓or没说全称只是说了姓、名、备注的名称,则需要进行第二步

第二步选择搜索后的结果再进行通话

尽可能的减少选项数目,在驾驶过程中进行翻页操作是很危险的。

举一个导航的案列:

在导航的时候语音输入需要到达的目的地,最后显示出来的「信息」该展示多少为合适?

再来一个实战例子:

在做项目的时候,因为酷我音乐获取到的资源很多,因为第三方而导致需要滑页的情况是不可避免的,在横屏设计上就会有很多的限制,由于高度有限,所以在滑动的时候最多就只能展示两行音乐内容。

但在做竖屏方案的时候,情况就会好很多,给大家展示一下竖屏中的交互稿子

从反馈输出来看,以视觉、语音、触控为主。为了安全,车机反馈一定要够让用户清晰地理解任务的重要等级,而且要告诉用户下一步应该怎么做。

视觉反馈

直接举例说明:

比如汽车在倒车,当快要碰到后面墙壁的时候,就会发出警告声音,并且在显示屏上面也有会红色警告标记,就是告诉驾驶者需要立刻响应。

触控反馈

语音反馈

语音交互是一个相对重要的一种交互方式,除了能够让用户能够体验到语音操控功能,还能让用户轻松、自然的接受车机的反馈信息,下面根据置信度不同划分反馈的类型和应用场景。

THE END
1.涨姿势一看就懂的仪表指示灯最全图解(建议收藏)比亚迪仪表盘上这些小图标代表着什么?#龙年不打烊全民看海洋 比亚迪海洋网凯德店7160次播放 01:47 比亚迪汽车识别指示灯(黄灯篇) #用车小常识 #精诚服务 比亚迪海洋网曹熠3349次播放 比亚迪史上最全指示灯一定要记住! 广州锦虹比亚迪7982次阅读 车内故障灯亮了不用慌,教你怎么办,内附车仪表上显示的标志大全 宇宙https://www.dongchedi.com/article/7195452757074313739
2.汽车仪表盘图标详解汽车仪表盘上的每一个图标的意义汽车仪表盘图标详解 1. 汽车仪表盘图标的重要性 汽车仪表盘上的每一个图标都有其特定的功能和意义,它们共同构成了一个复杂但又高效的信息系统。这些图标能够帮助驾驶者快速了解车辆的运行状况,确保安全行驶。那么,我们首先需要了解的是,为什么这些图标如此重要? 在现代https://www.vbdhwr157.cn/neng-yuan-zhi-li/261553.html
3.柯珞克仪表盘图标及故障灯图解大全详解与意义柯珞克仪表盘指示灯多样,黄色为警告,红色示危险,涉及驻车、安全带、制动、动力转向、ASR/ESP、ABS等系统。前后雾灯、OBD、电子节气门、安全气囊、轮胎气压等监测也通过指示灯显示。指示灯异常时,需及时排查,避免车辆损坏或人身伤害。燃油、机油、冷却液等液位及充电系统状态也通过指示灯提醒。 https://m.58che.com/qa/5-7184731.html
4.建议收藏汽车仪表故障灯最全详解日常用车,我们经常能看到车辆仪表盘上亮起各种小图标那么,这些小图标代表什么意思呢?建议大家速速笔记汽车仪表盘故障灯分类红色指示灯红色的灯一般情况下都是危险警报灯,红色灯如果亮起对他置之不理,要么对你的行车安全造成巨大影https://m.dianping.com/ugcdetail/143238935?bizType=29
5.最新汽车仪表盘指示灯图标大全(图解)即使是老司机开车好几年了,如果让他开一辆现在科技的新车,往往很多汽车上的表盘图标看不懂是什么意思,更不用说是什么功能了。新司机就更加迷糊了,连常用的也不知道,所以汽车维修技术网整理了一下最新汽车仪表盘图标大全,汽车仪表盘图标基本上都齐全了,大家如果觉得有用就收藏起来吧。 http://www.qcwxjs.com/qicheyibiao/7121.html
6.行车电脑显示屏是什么有什么作用行车电脑显示屏标志含义详解→安全带未系提示灯的图标也很直观就可以看出来,将它列入新手开车必懂的汽车仪表盘图标单上,主要是因为安全带在乘车安全中的重要性。关于未系安全带出事的事件已经报道过不少了,大家一定要养成上车系安全带的良好习惯。 ●胎压报警灯 现在大多数车型都配备有胎压监测系统,用以时刻监测车辆轮胎压力是否正常。当车辆的轮https://www.maigoo.com/goomai/169879.html
7.小鹏汽车仪表盘故障灯与指示灯详解,记得收藏!下图为G3的,G3i通用,记得保存! 下图为P7的故障灯和指示灯详解,未找到其他车型的,这两种车型的也已包含大部分故障灯了,其他车型先凑活看,哈哈哈。https://bbs.xiaopeng.com/thread/991659