8000字干货！超全面的HMI交互设计指南

哈喽好久不见，文章鸽了好久，最近项目快要 sop，才有空腾出时刻输出点职业文章，这次所讲内容仍是围绕 HMI 中控交互规划为主。

前语：

本文章会涉及到一些专业术语，我会详细给咱们解说，如还有疑问就给我留言评论啦，我可是一个颜值和才华并存的知识博主，哈哈哈，恶作剧。

智慧城市的建造趋势越来越显着，政府关于轿车智能化、信息化开展非常重视，轿车驾驭体会感与个性化的规划也会成为咱们关于轿车选购的参阅和方向，自从人们关于用户体会的重视，人机交互规划工作内容也成为重要环节。

再谈到 HMI 交互之前先给咱们拔一下傻逼栓，咱们做的交互场景是有车辆行进的，所以首先是要考虑安全要素，美观其次，因而在特殊环境下操作车载体系，咱们无法用传统移动端沉浸式的规划思维来规划车载的界面与功用，需求放下所谓的美学，紧扣实践场景下的交互方法与用户需求来规划，因为在极短时刻内导致咱们有必要对一切或许用到的功用进口一步即达，对信息的布局有必要做到一眼即见。

尤其是 UI 规划师转交互岗的时分，榜首想法便是怎样把规划做美观，然后再去反推交互，在许多项目紧迫的时分咱们便是这么干的（因为咱们项目现已做了许多，就防止那些过错）刚入行的规划师可千万别这么干奥，谨记！！！

1. 粉丝的疑问 ？

之前许多小伙伴会常常问到我怎样做 HMI 规划呀？参阅那里去找呀？HMI 的用户体会该怎样去做？ 竞品剖析怎样做？等等许多许多问题呀 ，我也会常常和同行进行多沟通学习。

我这边的方法便是，多去参加车展、或许去预定门店进行试驾体会，然后摄影就有材料，也可以去找一些车评人看他们视频，关于车的功用测评，终究便是可以去各大车的官网去寻觅材料，还有一点便是要和同行的小伙伴们一同讨论、共享，假如真实不想找了，那咱们就多多重视我呗，我收集许多材料，以后都可以共享给咱们。

2. 车内的显现屏分布

接下来咱们简略的介绍一下车内屏幕的类型，主驾驭前面的仪表盘、HUD 和中控屏幕，副驾驭和后排的文娱屏幕。

仪表盘

当今纯液晶屏的仪表盘占商场主导地位，纯机械、灯显、段码将退出历史舞台。我这边就不介绍仪表盘的开展历史了，假如你们感兴趣，就告知我，我再安排小文章。

HUD

平视显现器（Head Up Display），最早是航空器上的飞翔辅佐仪器，运用在战役机上，因为战役机上许多信息需求飞机驾驭员随时检查，防止驾驭员低头看仪表而分神，随后又普及在民航客机上，因为 HUD 的方便性以及可以进步飞翔安全，这项技能后来也开展到轿车职业，轿车搭载的 HUD 抬头数字显现功用，是运用光学反射的原理，将重要的行进信息胎压、速度和转速等信息投射到驾驭舱前段玻璃上面，在驾驭进程中不必分神看仪表盘，减轻眼睛的疲惫，给驾驭带来便当和安全。

文娱屏幕

后排文娱屏更像是一个平板，主要功用点为视频、音乐、游戏等等，协助后排乘客打发时刻，所以后排的文娱体系便是为文娱而生，后排乘客在互不搅扰的状况下观看各自喜欢的视频影片，体会感觉仍是蛮好的。

3. 交互根底内容

驾驭员和屏幕之间交互有必要简略，不涣散留意力，并且易于中断，因而驾驭员的留意力可以敏捷回到道路上。

导致 HMI 的交互和其他移动端不同的交互方法，要素有许多，例如：操作区域的面积、主驾驭与屏幕的视点、方位、运用场景等等，也有共同特征比方可用性、易用性、用户体会流程之类的。

交互场景

在不同运用场景下，交互方法也会有所不同，比方停止状况、驾驭中（这是关于驾驭方位的场景），还有一些关于环境和驾驭中的状况都要考虑进去（晴天、雨天、下雪、大雾、超速、疲惫等），都需求详尽的界说，榜首考虑要素便是安全驾驭，不注重安全的交互规划都是耍流氓。

4. 车载交互“三秒规划”准则

榜首秒 视觉

用户在 0-1s 的时刻内，对中控进行环视，在这个进程中，中控屏幕重要信息与功用进口有必要能被用户在这个时刻以内发现，这边就可以经过巨细、色彩、在屏幕中的方位，后期可以经过眼动仪来进行可用性测验，终究可以适当调整，抵达安全驾驭标准。

留意点：

• 不可以让用户多次将视角中心移动到中控屏幕，来检查内容
• 不可以让用户花费过多的时刻来查找屏幕上的信息

第二秒 行为

用户在交互行为进程中 Start～End 完毕，时刻不能超过 2 秒，2 秒现已比较风险了，1 秒内为最佳交互时刻，这块内容下面会有详细解说。

留意点：

• 防止让用户点击两次才能完结，功用要一步即达
• 不要让用户进行滑动或长按的交互方法

第三秒 反应

在交互行为过后，在第三秒则有必要要有反应内容，比方明晰的点击作用反应，可经过声响或许界面动画，一旦超过 3 秒后的动画，反应将脱离用户的有用感知时刻，将不能很好的体现反应本身的价值。

留意点：

• 屏幕显现内容变化反应需求显着的引导动画转场支撑
• 去掉过多装饰性的动画，别整那些花里胡哨的动画作用，让反应作用愈加集合，车载的动画作用和移动端是不一样的

依照三秒准则规划，车载体系才可以契合可用性。这块内容先普及一下咱们，这次先以介绍交互内容为主，车载视觉、动效内容再后续跟进输出文章。

交互界说详解

咱们就直接奔入本章节的主题吧，本文我会从八个小点动身，详细的解说车载的交互内容。

1. 单次交互操作时刻

直接抛出成果。单次交互操作动作不能超过 2 秒（1 秒内为最佳）在前面咱们也简略的提到了交互的行为内容，假如一个内行进进程中需求交互操作的动作 用时 2-3 秒就现已是一个风险状况。

为什么这么界说，假设一辆以 60km/h 的车速 假如 2-3s 盲开就会开出 35-50m，一旦需求急刹车那么刹车间隔至少 15-20m

以此核算当高速路上行进车速 100-120km/h 可想而知，极其风险，或许车毁人亡，所以咱们呼吁安全驾驭，谨慎变道，保护自己也是保护别人。

经过实践调研过，用户将视线从路面移动到车内屏幕上，这个进程通常需求 0.5-1.5 秒对焦，所以可交互的内容需求明晰被标出来，与不可交互内容坚持满足的对比。核算下来均匀每次操作，即视线与留意力专心在车载上的时刻，无法超过三秒。事实上，当进入第三秒时，已不得不需求运用余光开端留意前方路况了。

因而，在三秒以内，无论是用户榜首次操作失利，从头留意路况后，再重复操作，仍是用户继续操作直到使命完结，都是非常风险的行为，在这里，因为用户试错的本钱非常巨大，也因而交互的规划与信息布局的规划都需求做到最极致。

小插曲：

这边就有人会说了现在都有紧迫刹车（AEB）体系了，那咱们简略介绍一下，AEB（Autonomous Emergency Braking，自主紧迫制动）经过传感器(摄像头、雷达、激光等)识别车辆前方障碍物，当车速与障碍物间隔低于预设安全值时，制动体系介入，防止磕碰，AEB 是用来协助驾驭员防止或减轻磕碰事端的体系。

AEB 体系主要干两件事：

• 及早识别紧迫状况并正告驾驭员
• 假如驾驭员没有反应，体系会经过降低磕碰速度来防止磕碰，或削减无法防止的磕碰的严重程度。

后续关于 ADAS 辅佐驾驭这块我也会单独出一篇文章供咱们了解。

实车可用性测验评价

现在咱们再结合看一下实践中的实车在每一个交互中体会怎么，是否存在风险，这是 Thoughtworks 组织对特斯拉做的一个可用性评价评分：

2. 操作热区和交互热区

操作热区

驾驭场景的特殊性，驾驭员只能用间隔中控屏最近的一只手去操作（为什么我不说用右手去操作，因为我在做海外项目的时分，主驾驭方位的是在右边，那么只能用左手来操作屏幕了）

这是全球驾驭方位不同的分布图：

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

下面咱们拿实践车载事例 来给咱们阐明：

针对触控交互方法，屏幕区域内的触控操作便当性，以驾驭员为中心向右逐步衰减，重要的功用操作应放置在最佳触控交互区域内。

交互热区

再考虑这块内容的时分，我就有一个疑问，这块内容是交互规划师来界说 or 规划师来界说？不管了我就要做全栈的人我要的便是啥都可干

在讲交互热区之前咱们了解一下手指触控内容，手指的接触为 12mm X 12mm，屏幕像素密度按 160dpi 来核算，可以换算成 76 x 76px 的屏幕元素尺度，假如不明白核算的话可以检查我上一篇文章，在核算屏幕 ppi 和下面最小图标尺度核算方法都有。

增加交互热区，是为了降低操作的难度，用户在驾驭场景下的留意力和活动范围有限，进行精准点击和小区域触点操作需求付出更多的操作本钱，且会涣散驾驭留意力，需求更大面积的控制热区来承载触控行为，保证核心操作在不同场景下的易用性，下面举一些事例和咱们阐明。

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

怎么从音乐小控件进入音乐详情页面？

• 点击专辑封面
• 点击信息内容
• 专辑封面+信息内容 组合

依据上面的上面定论组合增加操作区域才是最佳挑选

案列 2:修正状况勾选的操作热区

修正状况下，怎么做到高效的勾选（我这边都不必说，咱们也都必定知道怎么界说了）

• 点击勾选框
• 点击勾选框+专辑封面+信息

当然挑选计划二

总结一下：为了给用户带来杰出的驾驭体会感，咱们就应该多去考虑增大触控区域，在某些某块内容中尽量削减准确操作，多做一些含糊操作，大白话的意思大致便是这个区域内的都可以操作。

还有一个小留意点需求谨记：

在对接开发的时分，关于这块内容必定要和他告知清楚，不然他就不会以组合来写操作热区了。

3. 高效的交互方法

再讲到 HMI 高效的交互方法之前，咱们还需求了解一下多模态交互。

多模态交互

“多模态交互”包括了视觉、听觉、嗅觉、触觉以及味觉等方面的感官交互，也便是经过眼睛、耳朵、鼻子、嘴巴以及皮肤接触完结，其技能运用在实践生活中也是围绕这些感官进行规划，将多个感官的交互技能融合在一同，构成一种多模态的交互形式。

在车内所用到的交互，经过语音、触觉、触控、嗅觉、视觉、手势、体感等多种交互，以更挨近人和人之间交互的一种方法，使人车交互变得愈加天然和轻松。

抛出一个问题？

什么交互方法才是算是高效的交互方法？什么姿态的交互才是王道？每个人都有每人的界说方法，我和许多规划师有谈过这样的论题，在这个论题终究我会给咱们一个定论。

常用的交互方法

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

硬按键交互方法

在开始的原始车机，基本上都是经过硬按键来解决，都是不计其数次的肌肉型回忆，才得已做起来那么的顺畅，这个也有它的长处所在，下面展现一下硬按键的车内

触控交互方法：

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

咱们在驾驭车的进程中，点击是最有用的交互方法便是点击，长按、滑动、双击、单/双手指拖拽等交互方法都会超过 2 秒的安全时刻范围，这样极大的增加了操作难度系数和驾驭中的风险，其余操作方法可以用在非驾驭状况中，假如有的功用无法经过触控完结，那么下面行将提到语音交互。

讲完上诉的交互方法，这下咱们应该评论一些实质性的事情了，这些交互方法，该用在什么模块，那些场景里边较为稳妥适宜，赶忙坐上我的小火车要加速了 du~ du ~ du~ …

点击交互方法：按钮、复选框的勾选、tab 栏目切换、icon 的点击、查找栏、控件类型等

• 滑动交互方法：负一屏、主页功用卡片、一切包括进度条（音乐、视屏、在线电台、音量、显现亮度、空调风量、温度等）、列表类型、空调风向、车模转动等
• 长按交互方法：选中修正 、输入法中的部分按键
• 双击交互方法：导航地图、图片放大
• 单/双手指拖拽：单手可修正状况触发后改变方位， 双手控制图片的缩放、导航地图的缩放

语音交互方法

语音交互是我最喜欢的交互之一，它可以尽量削减用户的分神，可以安全驾驭

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

榜首步：语音输入所需求去的目的地信息，假如不知道详细地址信息的话可以含糊导航

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

第二步：依据用户所给的语音输入导航需求，体系匹配导航目的地，让用户进行挑选所需求目的地，

语音助手：“挑选第几个呢？”

（先吐槽一下：有的产品经理就会在语音助手对话下功夫，搞的很杂乱，增加语音助手昵称或许多说一下语气助词）以上面这个比方增加内容：“siri 为您现已找到多个停车场，需求挑选第几个呢？”这边仅仅举一个个例，只期望咱们可以简化内容）

其他场景：音乐、电话、空调模块（这边查询一下 之前语音文档 弥补完好）

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

电话：“打电话给 XXX”、“翻开联系人”、“翻开通讯录”、“查找 XXX”

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

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

手势交互方法

手势交互，目前来说运用在轿车里，最大的优势在于动作是相对的，无需精准操作（精准操作不仅要用手，还要靠眼睛寻觅，很风险的）可是手势最大的弊端便是操作会比较少（操作太多或许需求回忆操作方法，大脑开小差也很风险）所以在上述中有说道我是偏向于语音控制的挑选，我也比较看好这个。

运用车载手势控制体系，经过不同的手势组合，可以让车主愈加快捷地完结各种操作，例如：切换歌曲、接挂电话、调理音量巨细、翻动列表页、缩放地图等，这些手势有的也是从触控手势进行提炼出来的，有的也是结合生活习惯，比方闭嘴状况，可以用在挂断电话，那手势就可以用握拳样式。

终究总结：

驾驭之外的车内使命会不同程度地涣散驾驭员的留意力，为保障行车安全，功用的操作规划需求考虑触控、语音、图画等多模交互相结合，并依据不同运用场景灵活组合输入形式，也适当保留一些物理按键（硬按键）为用户提供最天然的运用体会。

还有一点我想说的是，假如咱们规划师可以参与到关于整车的交互规划界说的话，那就具有更多话语权了，关于从雏形到落地都可以去界说这款车，不然等车现已定型，关于交互界说的内容就有了许多限制。

4. 交互中的内容排版和信息出现

交互中内容排版

在驾驭进程中，用户大部分精力用在于集合驾驭行为上，用户只能抽取仅 5%左右的精力与时刻来控制车载。因而也就决定了车载体系的信息布局都有必要在极短的时刻内以最好的方法出现。而假如用户没有在这个时刻以内完结操作使命，要么用户挑选抛弃，从头再来，要么用户花费更多时刻和精力，但这样驾驭的风险系数会成倍增长。

进步操作的功率

功用的信息布局规划要充分考虑驾驭环境的特点，并结合详细场景，对界面信息进行合理布局。驾驭员在驾驭方位和屏幕、按键等之间的相对方位是比较固定的，所以要考虑到驾驭员简单看到，最简单触及的区域，把最重要的信息放在这个区域内。

依照车载的操作热区，在功用与进口的布局上尽或许的依据热区别布来规划。功用布局尽量规划在离手最近的方位，缩短操作间隔，将信息展现区放置在右侧。

通用的信息布局

在不同的驾驭场景下，同一功用的信息布局应一直坚持共同，防止因布局的变化对驾驭者构成困扰。相同或类似功用之间，页面布局应具备通用性，协助驾驭者经过方位联想，削减回忆本钱。

在上诉三秒准则中的视觉环视，所以页面内信息要集合，做到集中检查，保证页面内容可准确传递出当时进行中使命的相关内容信息，让用户能在 1-2 秒内完结对信息的把握，并快速回到正常的驾驭状况。

交互中案牍：

关于交互案牍的界说必定要短，简明易懂，坚持信息的最新状况和可浏览性；

1/传达信息明晰明晰

关于交互案牍不要含糊不清，不要有歧义。

比方：在车机中扫码登录酷我音乐，假如登录失利

计划 1:弹窗信息内容为“登录失利”

计划 2:弹窗信息内容为“登录失利”，并附加是什么原因才导致失利的

2/案牍简练明了

身处用户的视点你会发现，许多用户是不看弹窗内容的，看到弹窗上有按钮就马上点击按钮，所以弹窗中的案牍，越简练越 OK

举个比方：这两个弹窗表达的意思相同，一个简略直接说现状和举动点，用户能抓住要点，另外一个案牍过长用户不喜欢看，而且抓不住要点

3/共同性

要保证产品的共同性，类似的案牍，表达方法要共同。

比方：导航中的按钮“开端导航” “修正默认” 动词+名词，就不能变成名词+动词

4/主次清楚

每段文字都会有主次清楚，若能做出区别，将更好地协助用户了解案牍内容。

在电话模块通话记录，咱们一般查找需求打电话给某人，必定榜首时刻是去找“XXX”然后才会再去核对手机号码，所以在这信息，要做好主次的区别。

5/构成闭环

若案牍不可防止会很长，那么有没有让用户快捷操作的途径呢？

完结计划：咱们交互计划的界说下面便是“知道了”

我等待的：假如是我界说按钮功用会将按钮变成“去设置“（我会在下个版别更新的时分我会提出我的计划）

5. 多使命处理

高效的使命流程功用规划应以进步使命完结成功率为目标，削减认知和操作的本钱，防止规划过于杂乱的信息架构和功用流程途径，且一切功用需有固定且完好的进入和退出途径。

在什么场景下才会出现多使命处理，咱们试想一下，在导航中播放着车载运用中的音乐、电台，还有导航中来电话，得接听，后续咱们还增加了导航中组队出行功用；音乐、电台、电话、组队在展开分屏后，可以进行切换，仍是以做到，咱们开发暂时还不能做出随意拖拽的（项目时刻紧张）所以在体会这一块就打了折扣。

我为什么要讲随意拖拽这个功用点？

依照现阶段版别功用点，只要在导航模块中才会出现多使命处理状况，上诉现已讲过几个功用的切换，可是咱们分屏计划仍是 2 年前，从未修正，展现一下之前的交互内容（和斑马曾经分屏差不多）

因为多了这个内容，右边占有的空间，缩小了左面导航的内容，一旦导航出现路标、路况、导航线路图、缩放地图按钮等等，导航页面需求承载的内容偏多。

依照这个计划的话或许会搅扰驾驭使命，后续咱们规划师内部出了一个计划，叫做小控件，可以随意拖动，而且暂用控件比之前计划小许多，下面我就给咱们展现一下这个计划的 UE 雏形。

终究这个 计划是得到了领导的认可，但因为开发本钱过高，假如编写的话，需求将这个新的计划编入下一个 IOT 升级包里边。

定论：

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

6. 车载交互层级

防止在驾驭进程中常运用到的功用藏的很深，必定不能多于 3 个层级，不然关于驾驭安全会有很大的要挟。

车机运用功用的频率

在车机中有哪些功用是驾驭进程中运用频率较高、重要等级较高的，咱们来看一下

运用频率较低：体系设置、第三方 APP

运用频率较高：音乐、电台、空调、电话、倒车印象、导航

下面就拿电话举比方：

电话模块：

传统车机没有语音的状况，需求给 “周杰伦” 打电话 。

• 榜首步翻开 电话功用
• 第二步翻开 点击联系人 列表
• 第三步 滑动列表找到“Z”最初的 进行拨打

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

假如是带语音查找联系人

榜首步 直接说：“打电话给周杰伦”

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

假如联系人中同名同姓 or 没说全称仅仅说了姓、名 、补白的名称，则需求进行第二步

第二步 挑选查找后的成果 再进行通话

7. 选项数目

尽或许的削减选项数目，在驾驭进程中进行翻页操作是很风险的。

举一个导航的案列：

在导航的时分语音输入需求抵达的目的地， 终究显现出来的「信息」该展现多少为适宜 ？

再来一个实战比方：

在做项目的时分，因为酷我音乐获取到的资源许多，因为第三方而导致需求滑页的状况是不可防止的，在横屏规划上就会有许多的限制，因为高度有限，所以在滑动的时分最多就只能展现两行音乐内容。

但在做竖屏计划的时分，状况就会好许多，给咱们展现一下 竖屏中的交互稿子

8. 反应的界说

从反应输出来看，以视觉、语音、触控为主。为了安全，车机反应必定要够让用户明晰地了解使命的重要等级，而且要告知用户下一步应该怎样做。

视觉反应

直接举例阐明：

比方轿车在倒车，当快要碰到后边墙壁的时分，就会宣布正告声响，并且在显现屏上面也有会红色正告标记，便是告知驾驭者需求马上响应。

触控反应

轿车控制界面的触觉反应机制，实质上是人与控制界面进行信息沟通。用户经过手指点接触屏进行输入操作，控制界面体系对输入信息进行处理和存储，凭借显现屏出现给用户。而信息的传递是凭借图形信息这个前语，经由人的视觉感知体系完结对视觉信息的识别和再加工，并对信息进行分类处理，如空间、时刻、色彩、形状等。而视觉大脑皮层对相匹配的视觉信息加工，会在人的脑海里构成短期和长期回忆，终究对人的操作构成触觉反应机制。上述的整个信息处理进程便是人机交互进程，它是人行为对大脑里的视觉和触觉信息的反应进程。

语音反应

语音交互是一个相对重要的一种交互方法，除了可以让用户可以体会到语音控制功用，还能让用户轻松、天然的接受车机的反应信息，下面依据置信度不同区分反应的类型和运用场景。

文章中如有不足之处，欢迎弥补沟通，咱们下期见

下期文章预告：HMI 竞品剖析