他来了~ 他来了~ 一个月时间的打磨,不知道熬了多少次通宵了

前沿:

为了输出这篇竞品分析文章,我也是够拼了,利用周末的休假时间,预约这四家 4S 店进行试驾,并进行对车辆的拍照,和销售对话的录音等获取到一手资料,再去做分析、总结这一次的探索。

车载设计万字干货!超全面的 HMI 竞品分析手册

大家很好奇我为什么想做一份 HMI 的竞品分析呢? 因为我想做第一个发表实战演练的 HMI 竞品分析报告,大家可以去搜索一下百度、知乎都没办法搜索到直接可用的信息,我在写每一篇文章的初衷,就是想弥补 HMI 行业的内容,将繁琐的知识通过我写的文章,能够让我的读者们通俗易懂,能够敢于跨入这个行业中去。

车载设计万字干货!超全面的 HMI 竞品分析手册

这篇文章的主要的核心就是实战演练为主,有关于竞品分析的基础认知我这边就不过多和大家阐述了,竞品分析的方法论等等内容,我就不一一列举,我会直接穿插到这篇文章中去,作为实战演练的一部分。

刚开始我和大家一样,想要做一份竞品分析报告但由于实战经验不足,就会打开各大网站搜索相关的信息,但关于车载 HMI 的竞品分析少之又少,根本毫无头绪,因此我就立马转换策略,先从竞品分析基础知识开始学习,再去结合 HMI 的内容去实施,输出报告。

我想很多设计师也有一个这样的需求,就是想做一份侧重点在于设计的竞品分析报告,而不是长篇大论什么用户体验五要素,战略层和范围层这些都是我们没有话语权去定夺的,只能去参与会议听取内容而已,但不代表它们对于我们设计师不重要,除非你不想当“将军”。所以这篇文章实战演练的侧重点会偏向于站在设计师的角度去考虑做一份 HMI 竞品分析报告,本文将从表现层、框架层、结构层出发。

车载设计万字干货!超全面的 HMI 竞品分析手册

我的宗旨就是 → 所谓一份好的竞品分析报告能够达到易读易懂、简单直接即可,能说明问题就行。

那就开始吧~ 给我可爱的小读者们直接上干货,走 ni~

设计师需要做的任务

我们来看一下设计师是在哪个阶段需要参与到竞品分析中去,设计师的竞品分析和产品经理输出的竞品分析侧重点会有所不同,除了确定好竞品,了解他的商业背景后,设计师会从用户路径拆解和交互维度分析,最后再视觉层分析,就是所谓的 #用户体验五要素# 中的表现层、框架层、结构层。

产品研发过程:一般是项目开始立项后 → 接下来是项目需求输出(PM) → 再到后来就是产品设计(UX/UI) → 后续就是研发开发上线(程序) → 最后安排期 HMI系统升级迭代(OTA升级)。

车载设计万字干货!超全面的 HMI 竞品分析手册

竞品分析注重点

先打个预防针 一开始做竞品分析报告,我们应该更注重的是有针对性和目的性的对比。

在做对比内容的时候,就是要带有强力的目的性的,然后在针对功能和界面进行分析。做竞品分析报告切记不能在没有目的的情况下去做分析,如果这样去做分析,最后分析的内容深度会相对比较欠缺些。

所以分析竞争对手产品的整体定位、产品策略,找到新的切入点,切入点也可以从产品架构、交互设计、视觉表现等方面来进行,让自己的产品有着合理的规划。注意点:既然我们选择去做了分析,那必然就要去得出结论。不能将竞品分析写成产品分析或者是说明书。

我在后半段竞品分析实战演练中,会加入很多结论和个人的想法

竞品的选择

就是和自己做的产品产生直接竞争关系,在使用场景、产品的功能点和目标用户群体一致,这次竞品分析报告中就着重做介绍,直接竞品就是一些车厂比如特斯拉、小鹏、蔚来、理想、比亚迪等头部的新能源汽车品牌。

车载设计万字干货!超全面的 HMI 竞品分析手册

1. 间接竞品

产品在功能方面与你是一个互补的关系状态,市场的目标用户群高度类似,后续可能会抢占你的市场份额,所谓敌人的敌人就是朋友,因此在你的项目进行中也可以选择与他达成合作关系,在 HMI 行业中有很多就是这样的一起创办一个联合研发中心。

举个例子:

V2X 领域(车用无线通信技术)

这是国内 TOP → 梧桐车联的TINNOVE V2X、东软集团的VeTalk V2X、中科创达的C-V2X等

V2X 是我第一次提到,那我就简单的介绍一下,所谓 V2X,vehicle to everything,即车对外界的信息交换。车联网通过整合全球定位系统(GPS)导航技术、车对车交流技术、无线通信及远程感应技术奠定了新的汽车技术发展方向,实现了手动驾驶和自动驾驶的兼容,通俗易懂来说,搭配了该系统的车型,在自动驾驶模式下,能够通过对实时交通信息的分析,自动选择路况最佳的行驶路线,从而大大缓解交通堵塞。除此之外,通过使用车载传感器和摄像系统,还可以感知周围环境,做出迅速调整,从而实现“零交通事故”。比如:如果行人突然出现,可以自动减速至安全速度或停车。

车载设计万字干货!超全面的 HMI 竞品分析手册

如何收集车载竞品资料

又到了我强项的领域了 “搜商” 车载的竞品分析收集的数据、行业资讯与其他的会往往不同,由于他的深度比较广想要精通一个内容,需要搜寻很多资料作为参考依据,这个我深有体会,假设我想了解辅助驾驶这块内容,搜索出来的信息甚至比我大学读过的书还多,好了,介绍一下我搜索的信息的好办法。

1. 预约 4S 门店试驾

想要拿到一手资料,体验最新 OTA 升级相关内容,那么你就跟我一样去预约 4S 店去试驾,这是最简单最直接,效果也是最好的,但是需要复盘的内容和前期准备工作会比较繁琐,文章前面也有提到,一定要带有目的的去做事情,所以在去 4S 店的时候,提前要做好需要体验的内容的记录,别到店里面毫无头绪的去体验。4S 店销售员也是一个突破口,他们要完全了解汽车才能创造销售额,因此他们对于销售的汽车肯定你比还要了解透彻,可以通录音那道你想到资源(被逮到,别说我教你们的,可别出卖我啊)。4S 店还有拿到资料的地方就是他们的使用手册。

车载设计万字干货!超全面的 HMI 竞品分析手册

2. 汽车测评视频

查看专业的测评人对于车辆的测试,他们会通过驾驶过程中做出自己的理解,站在用户角度反馈问题,对于可用性测试也提供很多数据参考价值。国内想了解更多的测评可以在 B 站进行检索,甚至连抖音也是一个不错的选择。国外相对较为资深的测评 Chris Harris、Grand Tour、TopGea。

车载设计万字干货!超全面的 HMI 竞品分析手册

3. 下载相关 – APP

这个不难理解,首先把车厂发布的 app 都下载下来,为啥?因为他们有社区,本身车厂在推出 OTA 升级或者新品发布的资讯都会第一时间发送,还有很多用户会通过社区进行交流、碰撞出很多东西,他们也会写很多关于驾驶的体验报告,这些都是值得你去拿去做分析报告的。还有第三方的 app,比如:→ #新出行 #盖世汽车 等。

车载设计万字干货!超全面的 HMI 竞品分析手册

4. 其他获取途径

汽车官网都会将该品牌全系列在售车型内容都展示出,从车辆信息参数、亮点功能介绍、再到设计细节都有展示,还可以在官网咨询客服小姐姐,她们也会为你解答一些内容,亲测有效。最后别忘记给人家五星好评。还可以参加车展,这是能收集到很多素材的重要关键点。其次就是就是国内做的相对较好的平台知乎、人人都是产品经理、站酷等一系列。最后就是微信公众号,这边我推荐几个不错的账号,# HMI 设计 #Apollo 智能驾驶体验设计中心 #普修科技 #screens 德国 #未来出行实验室 #智能座舱与自动驾驶 # #King 设计研究所(哈哈哈 这是我的账号)

车载设计万字干货!超全面的 HMI 竞品分析手册

从设计师角度做竞品分析

进入今天的主题,根据上述所讲内容,我们设计师要做的竞品分析内容已得到明确的方向。

1. 明确竞品选择

我们将选取的四台车是新能源车领域最有代表性、关注度也最高的特斯拉、蔚来、理想以及小鹏四个品牌各自的代表车型。分别是特斯拉 Model 3、蔚来 ES6、理想 ONE 以及小鹏 P7。

另一方面,目前在座舱车机在屏幕规格上也分为两大派,分别是横屏布局和竖屏布局。这次选择竞品的 4 款车型中。特斯拉、小鹏和理想采用的是横屏的布局,唯独蔚来采用的是竖屏的布局。

车载设计万字干货!超全面的 HMI 竞品分析手册

特斯拉老款的 Model S/Model X 车型、小鹏新款 P5、老款 G3 也均为竖屏,这次分析主要选择热门车型来作为竞品分析,其余车型的话就不做过多分析啦,接下来我们顺便介绍一下热门车型屏幕的分辨率:

  • 特斯拉 Model 3 中控屏:1920×1200
  • 蔚来 ES6 中控屏 :1600×1400 / 仪表盘:1920×720
  • 理想 ONE 中控屏:2608×720 / 仪表盘:1920×720 / 副驾驶娱乐屏:1920×720 功能控制屏:1280×720
  • 小鹏 P7 中控屏:2400×1200 / 仪表盘:1920×720

车载设计万字干货!超全面的 HMI 竞品分析手册

车型屏幕种类案例通过 Yes/No 罗列出热门车型屏幕的分类,仪表盘、中控屏、副驾驶娱乐屏、HUD、后排娱乐屏、功能控制屏(俗称中控台屏)

车载设计万字干货!超全面的 HMI 竞品分析手册

说句题外话,新款的 Model S / Model X 是真好看,他们的屏幕也该为横屏,还增加后排的娱乐屏… 比 13 还香。

车载设计万字干货!超全面的 HMI 竞品分析手册

竞品交互分析

车机交互体验这个部分,建议只分析核心功能的交互体验。如果想要详尽到各个模块,应该与交互设计师协作完成。通过分析,看看竞品的在交互设计上有没有值得我们借鉴的地方,我们是否可以做到更好。我是交互/设计/动效都要做 ,下面我就捡一些比较重要的功能给大家分析一下。

1. 空调交互方式 VS 大比拼

车辆中空调是我们最常操作的一个功能,我们把 Model 3、ES6、P7、理想 ONE 这四辆车空调的操作交互方式拿出来做一下对比,结合中控屏幕中的交互、语音交互、方控操作三个维度来综合进行分析。

2. 中控交互分析

针对于大屏触控来说,我们怎么才能把空调的交互方式做得既安全还便捷呢? 一定要记住安全是考虑的第一要素。

通过上车操作对比发现,这四辆新能源汽车在空调控制设计上面都是相同的想法,就是在首页都有相对应空调控制区域,针对这种交互的设计方式非常的赞同,因为这不需要进入二级菜单就可以直接操作空调,并对其进行滑动操作调节温度变化。

我们看一下这四辆车空调的具体的实际情况,Model 3、ES6 的中控都是有固定的空调快捷操作区域,理想 ONE 则是放在中控屏幕下方的控制屏上,小鹏的 P7 是做在屏幕的左侧,这也是方便驾驶员的一个操作便捷性,也是符合我们一开始所说的便捷。除了小鹏 P7 外 其余三个车还可以直接对其进行前后风挡进行加热(专业术语 → 前/后除霜)

车载设计万字干货!超全面的 HMI 竞品分析手册

接下来再针温度对中控屏幕交互手势进行做一个对比

Model 3 和蔚来 ES6 交互方式一致在温度图标区域进行左右滑动,dock 栏的风量就不好直接操控了,需要点击后再空调弹窗页面进行增减调节,在中控操作便捷性就不如蔚来 ES6 和理想 ONE 了。

车载设计万字干货!超全面的 HMI 竞品分析手册

ES6 空调手势操作调节温度和调节风量都是左右滑动,这边就有人问了,在同一区域不会重复手势操作么?蔚来 ES6 的解决方案是 → 在需要调节功能的图标触碰区域不松手对其进行横向左右滑动,如需要再对风量进行调节,就松开手再触碰风量图标区域进行滑动即可。

车载设计万字干货!超全面的 HMI 竞品分析手册

小鹏 P7 空调中的温度调节交互方式,是通过长按左侧的调节温度的区域后,出现调节温度滑块的区域进行上下拖动,P7 风量调节在左侧 dock 就没办法进行调节,只能在方向盘进行控制风量的增减(这个在后面会细致的提到这边就不做过度解读)

车载设计万字干货!超全面的 HMI 竞品分析手册

理想 ONE 的空调温度调节和风量增减在这四款车型中是我最为喜欢的,为什么这么说呢?因为它可以在任意区域进行盲操,交互方式也很清晰,上下滑动是温度调节,左右为风量调节,并且还有增减时候的声响,这是触控给予反馈很好的交互点,所谓的及时反馈感。

车载设计万字干货!超全面的 HMI 竞品分析手册

针对中控的交互体验的感觉我给 Model 3、ES6、P7、理想 ONE 做一个排名

  • 最佳 NO:1 → 理想ONE (操作区域大,在安全和便捷性都排名四款车第一)
  • 还行 NO:2 → 蔚来ES6(调节温度和风量都可以在dcok 滑动完成,操作区域可观)
  • 其次 NO:3 → 特斯拉Model 3(调节温度在dcok 滑动完成,操作区域可观,风量则需要在其他页面完成)
  • 最后 NO:4 → 小鹏P7 (需要长按再进行操作温度的滑动,长按的交互方式在车机是一种相对不好的交互方式)

3. 语音交互分析

特斯拉 Model 3 空调的语音交互,调节温度只能做到调整到原先设定好的默认值温度。

缺点:如需想要再次调节温度高低,只能通过对中控屏下方的 dock 栏调节温度区域进行滑动。

蔚来 ES6 在体验的过程中,基本的功能都能很好实现,比如加热座椅、通风座椅,还有就是空调的控制等等,这些常见的操作都能很好完成。值得一提的是打断语音播报直接发出下一步指令以及上下文语义衔接等功能也都是支持的。

缺点:但不支持局部功能的免唤醒操作,每次使用语音控制都得呼唤一遍“Hi,NOMI”

车载设计万字干货!超全面的 HMI 竞品分析手册

小鹏 P7 全场景语音控制也选择了与思必驰合作开发语音识别的部分,语义分析则是小鹏自己的团队进行研发的,正确识别率达到 80%。在对于空调的控制方面也是不错的,可以精准的说将温度调到多少度,如果想继续调整说:“好热啊、再帮我下降 2 度”它也可以完成此项操作,如果你说将温度调整到 35 度,这个已经超出了 P7 最高温度 32 度,就怕语音形象给你来一句:“我怕你是有大病吧 ”

暂时没啥缺点,就是识别率需要再提高一些,我体验下来觉得他们的 TTS 反馈还挺丰富的,车联网中的名词,T 一般代表的就是 to 的意思,其中 STT 是语音转文字过程,而 TTS 只是文字转语言过程,简单来说,你可以去看目前比较成熟的梧桐车联 TINNOVE,能够支持 40 多种语言意图操控,并做出类人类的智能化反应,就是 STT 和 TTS 通力合作的一个结果。

车载设计万字干货!超全面的 HMI 竞品分析手册

理想 ONE 语音控制温度我很是喜欢,比如你可以说,前排温度调整到 23 度,后排只要跟说我也要就可以同步进行调温度,这个就是他 OTA2.2 升级的功能四音区锁定,所谓的四音区锁定就是理想同学此前已经支持车内前后左右四个音区识别控制功能,但这也带来一个问题:熊孩子在后面乱指挥怎么办?理想同学支持除主驾之外任意一个音区的识别关闭。家长只要在前面说「关闭后音区」、「不要听左后音区」就能关闭响应位置的语音识别,避免熊孩子捣乱, 让你皮。

缺点:对于方言的识别率还有待提高。

车载设计万字干货!超全面的 HMI 竞品分析手册

4. 总结一下

个人倾向于小鹏 P7 和理想 ONE 的语音控制,他们体验的感觉很棒,另外从空调的语音控制来看,特斯拉 Model 3、蔚来 ES6、小鹏 P7、理想 ONE 都是支持语音控制空调的,但是特斯拉 Model 3 只能设定最常用的温度和风量,其他三种车都可以设随意的说设定多少温度、调整风向和风量、还可以切换内外循环,识别率成功率都非常不错,可以不用操作中控屏幕,大大的提高了安全驾驶性。但现在很多人不习惯用语音来操作车机系统,所以单方面从中控的交互设计内容,可以偏向于理想 ONE 多参考一下,增大操作区域,减少交互手势,对于复杂的手势操作尽量避免不使用。方控控制空调这内容会连通方控整个模块一起讲,就不单独这边再开一小段了。

竞品方控分析

1. 特斯拉 Model 3 方控

左侧功能为:控制音量 / 切换音乐 / 调节后视镜位置 / 调节大灯的角度 / 调整方向盘的位置

  1. 控制音量:直接按下滚轮可以静音或者取消静音
  2. 切换音乐:向左拨动切换上一首歌曲,向右拨动切换下一首歌曲
  3. 调节后视镜:进入车辆控制 → 快速控制 → 后视镜 ,即可使用左侧滚轮调节后视镜
  4. 调整方向盘位置:进入车辆控制 → 快速控制 → 调整 → 方向盘 ,即可使用左侧滚轮调节方向盘,上下滚动滚轮来调整方向的高度 / 倾斜角度,左右滚动滚轮用来拉近或者远离方向盘
  5. 调整大灯角度:进入车辆控制 → 维护 → 调整大灯 ,即可使用左侧滚轮调整大灯角度

切记注意点,特斯拉的车子出场时就已经将大灯调整到最佳位置,建议不要随便的尝试调整,让们安全驾驶,远离事故。

车载设计万字干货!超全面的 HMI 竞品分析手册

右侧功能就相对减少了:语音指令 / 调节设置速度 / 调节跟车距离

  1. 语音指令:按下右侧滚轮,就能启动语音控制,说出相对于的指令,例如:将温度调整为 XX 度(这个温度的值也是之前设定好的默认值,Model 3 方控无法做到调节温度增减功能,特斯拉的设计理念是做减法,所以他在方控没有做过多复杂的一些操作)
  2. 调节设定速度: 主动巡航情况下,上下调整车速;可以快速调整单位为 5km/h,慢速度调整单位为 1km/h
  3. 调整跟车距离:右侧滚轮左右调整时可以选择设置 1-7 范围的跟车距离

车载设计万字干货!超全面的 HMI 竞品分析手册

还有一个隐藏功能,我来悄咪咪的告诉你们:

在驻车状态下,长按方向盘两边的滚轮按钮,直到中控屏幕变黑,这样就完成了一次重新启动。

2. 蔚来 ES6 方控

蔚来 ES6 方向盘左侧的多功能按键,主要负责 ACC 自适应巡航功能,它的布局相对另外一款车 ES8 有所简化按键也变得更多,和特斯拉的设计理念也基本吻合,尽量的去做减法,去繁为简,增加按键的操作面积也是为了安全驾驶。

左上角 → 增加巡航车速或恢复自适应巡航 / 左下角 → 减小巡航车速

右上角 → 增加跟车距离 / 右下角 → 减小跟车距离 / 中间 → 激活或退出自适应巡航

车载设计万字干货!超全面的 HMI 竞品分析手册

蔚来 ES6 方向盘右侧的多功能按键,主要负责娱乐系统以及语音、电话功能的控制。其中上下按键负责音量,左右键为切歌。

左上角 → 语音功能键 / 左下角 → 方向导航键

右上角 → 菜单键 / 右下角 → 方向导航键 / 中间 → 圆圈为确认键、两边左右侧为切歌

车载设计万字干货!超全面的 HMI 竞品分析手册

3. 小鹏 P7 方控

小鹏 P7 方向盘左侧,上下按键为控制车辆空调温度增减, 左右是来调节空调的风量大小

左下方为语音唤醒按键,按下去之后可以跟小 P 进行对话,右侧的小鹏 logo 按钮则为一个灯语的系统

车载设计万字干货!超全面的 HMI 竞品分析手册

触摸左侧旋转来可以进行切换仪表盘左侧的显示内容,内容有车辆信息、音乐、胎压、行驶里程等。

右侧上下按键为音量的调节大小,左右按键为切歌 , 左边是返回按键,右边则是静音按键,

触摸右侧旋转来也可以进行切换仪表盘右侧的显示内容。

4. 理想 ONE 方控

我这边所讲的是理想 ONE 发布的最新款的车型

  1. 向上短按唤醒语音/结束对话。 向下短按接听电话、长按挂断电话
  2. 长按进入仪表页面内容, 向上/向下滚动滚轮切换页面。退出仪表页面内容后,短按静音/取消静音;向上/向下滚轮滚轮增加/减少音量
  3. 向上/向下短按切换下一首/上一首

车载设计万字干货!超全面的 HMI 竞品分析手册

  1. 自动泊车启动后,向上短按开始泊车/继续泊车 ; 自动泊车未启动,向上短按开始自动泊车;向下短按激活自定义键。
  2. 长按进入仪表屏页面内容,向上/向下滑动滚轮切换页面。退出仪表屏内容后,向上/向下滑动滚轮,巡航车速增加/减少 1km/h;短按设置巡航车速为道路限速。
  3. 向上短按执行 NOA 系统推荐变道,向下短按取消 NOA 系统推荐变道

车载设计万字干货!超全面的 HMI 竞品分析手册

5. 总结一下

方控作为车内交互的重要硬件,现在市场上面还是多数车型以硬按键为主,将常用的功能移植到方向盘上面,比如快速的调节音量大小、切歌等功能,也有调整驾驶模式跟车距离等等。按照现在方向盘的进展没办法满足于智能化和数字化趋势的转变,很多车厂也在开始尝试制作出前瞻性的智能化和数字化的方向盘,如果将中控可移植到方向盘上功能变的越多,那随之而来的就会减少驾驶员的注意力分散,从而可以提高安全驾驶的可能性。

PS:有可能在后面对于未来前瞻性的方向盘有文章安排计划。

竞品 UI 界面分析

在热门车型 UI 界面中挑选对比,在分析完热门车型页面设计的内容后,我会呈现一些自己的 idea,这些纯属个人想法,并未用到实际项目中。下面我会从单个功能 → 对比体验,单个界面 → 从界面内容、交互操作、信息位置、信息数量、色彩使用、界面风格,多个界面从 → 功能的逻辑、用色统一、情绪引导出发阐述。

当有人质问你为什么要这么设计的时候,你得有理可循,没有理论支持的设计如同一盘散沙,一击就溃,这就是为什么我们设计师需要做很多的分析、调研等等一系列的准备工作。

1. 主界面分析

特斯拉 Model 3、蔚来 ES6、小鹏 P7 的主界面以地图方式呈现,而理想 ONE 是有传统上主界面的。

我们来分析一下特斯拉 Model 3 的首页,既然取消掉仪表盘,取而代之的是占用中控左侧 1/3 区域作为仪表盘的功能页 + 右侧 2/3 区域则作为车机系统页面,将使用频率较高的导航作为主界面,顶部的状态栏基本都可以进行点击操作。

车载设计万字干货!超全面的 HMI 竞品分析手册

蔚来 ES6 也沿用将导航作为主界面和 Model 3 不同之处,是增加了两个卡片,靠近主驾驶是常用的音乐卡片,旁边则是车辆信息卡片。

车载设计万字干货!超全面的 HMI 竞品分析手册

小鹏 P7 也是导航作为他们的主界面,和蔚来 ES6 不一样之处就在于小鹏 P7 的常用卡是放在中控左侧栏,卡片的功能有:导航、音乐、电话、消息中心,顶部的状态栏都可以进行点击操作。

车载设计万字干货!超全面的 HMI 竞品分析手册

理想 ONE 采用的是横屏布局,它的主界面采用卡片式的功能页面设计,理想 ONE 中控屏左侧显示的是时间以及 5 大功能键,右侧是各个常用的功能卡片页。我们很多项目的主页也是采用这种卡片式设计。

车载设计万字干货!超全面的 HMI 竞品分析手册

延展一下小知识点,敲重点了,提高注意力听一下

对于汽车而言,卡片式设计有两大好处

  1. 把学习成本降至最低;
  2. 增加的接触面积让驾驶的时候,误触率也降到最低,给到用户带来最为直观的体验就是简单易用;

总结一下

这边对照分析的 4 款车型首页的功能:车辆信息 + 导航(Model 3) / 卡片 + 导航(ES6 +P7) / 卡片(理想 one),卡片样式的设计,极大了提高对于功能的操作性,原本需要点击功能进入二级页面,再对其进行操作,现在首页可以直接利用(卡片 + 快捷按钮)样式便捷性操作该功能。还有多种首页的样式比如传统功能图标采用的是“陈列式”的设计(代表作:苹果 carplay)

在用色方面:

车机系统用色方面大家都用了对比度较高的颜色,不会像移动端那样子,由于驾驶场景的特殊性,驾驶员没有过多的时间停留在屏幕上,因此如果用了对比较低的,那么会影响到驾驶者的安全驾驶,在我第一篇文章中我也有提到,文本视觉呈现及文本图像至少要有 7:1 的对比度,针对大号文本以及大文本图像至少有 4.5:1 的对比度。

自己理解 + 新的 idea

首先要提高屏幕的利用率,不能为了设计而设计,从而浪费屏幕的使用率,要站在用户角度思考问题,帮助用户解决问题和痛点,而不是想当然天马行空的设计,为了好看为出发点,有这个想法的请给我立马打回去。有的车厂设计方案为了好看将屏幕的利用率降低,3 张功能卡 + 一个车模 + 车模下方控制车辆的 3 个功能按钮 + 底部的 dock 栏,输出的设计效果图还不错,但是这是在牺牲了功能为代价的基础上。

新的 idea,首先要分场景,是辅助驾驶还是全自动驾驶,因为全自动驾驶的话就不需要考虑安全驾驶的因素了,这样设计方案可以做出很多种,交互方式也因此将改变,安于现在的技术和道路复杂状况,自动驾驶发展的道路我觉得很长,对于前瞻性的设计还是要输出和探索。下面我们就开始说一下,介于现在的设计该如何优化首页,有哪些值得我们去探索的?

在首页中我们可以加入场景化相结合,比如天气有阴雨天 、晴天、下雪等,都会在中控屏幕中显示,大家肯定会说这不会影响驾驶员嘛?现在的技术可以做到识别主驾驶眼球,当主驾驶用眼睛扫描屏幕的时候,这些场景化的内容会立即消失,而且在设计之初也会考虑到不会影响到驾驶和中控操作等,在不影响安全驾驶的情况下,我们可以将这个功能做到设置中开关切换状态。这边就先提到这一个点,后续的探索内容大家可以持续关注我。

2. Dock 栏分析

Model 3 最高两级菜单,所以操作起来非常的方便,底部的 dock 栏包含了车辆设置、音乐、摄像头、雨刮器、座椅、风量、温度、前除霜、后除霜、音量。

更多功能 →(通话、日历、摄像头、能量、充电、网络、娱乐、玩具箱子)

车载设计万字干货!超全面的 HMI 竞品分析手册

这边就有人有疑问了,为什么 dock 栏图标下面没有文字,而折叠后就加文字了呢?

首先下面作为常用的功能,前期通过 4S 店员的讲解和查看使用手册,短期的高频率使用更容易让人能够记住它,所以在设计上只保留了 icon 去除了文字,相对于折叠的功能,它记忆性是呈现逐步递减的,因此需要添加文字作为说明。

蔚来 ES6 由于是竖屏所以底部的 dock 栏相对 Model 3 减少很多,内容→车辆、内外循环、双区温度、风量调节、前除霜、后除霜,屏幕中是减少了很多,但中控下面的硬按键弥补了中控过少的缺陷,硬按键包括主页按键、设置按键、车辆驾驶模式设置按键以及音量旋钮。可以让用户更加快捷的进入到相应的设置页面。

车载设计万字干货!超全面的 HMI 竞品分析手册

小鹏 P7 的 dock 栏位置处于屏幕的最左侧,做在左边的优点大家肯定不谋而合的都会想到,它靠近左侧的驾驶员呀,对的,确实是基于这个体验做的方案,小鹏 p7 的 dock 栏内容 → 应用中心、车辆设置、自动泊车、空调、音乐、电话等。与 Model 3 一样,P7 大屏顶部各个图标也均可打开,比如个人中心、电量管理中心、车辆中心等等,可以快速进入相应的控制页面。

车载设计万字干货!超全面的 HMI 竞品分析手册

理想 ONE 中的 dock 栏就和其他三种车型有着很大的区别,既不是放在最左边一竖排,也不是放在底部,由于 1920×720 分辨率的原因,不适合设计在底部区域,如果硬是放在底部的话,会占据很多可利用的空间,因此这种方案肯定不是最优的选择, 理想 ONE 的选择区域就是最左侧时间和音乐快捷控件的下方,虽然方式独特,但也算是适合的方案,dock 栏的内容 → “主页”、“车辆”、“导航”、“音乐”、“360倒车”。

车载设计万字干货!超全面的 HMI 竞品分析手册

总结一下

关于 Dock 栏的设计,每个车厂都有自己的定义,当中控屏幕为竖屏时,dock 几乎都设计在底部,因为设计在底部的话可以大大的提高屏幕的利用率,如果做在侧边栏可想而知,将会减少屏幕的利用率,如下图:给大家展示一下效果。

车载设计万字干货!超全面的 HMI 竞品分析手册

小鹏 P7 和特斯拉 Model 3 屏幕类型相对比较类似高度相同,长度 P7 比 Model 3 多出 480px,所以我想这是导致他们在设计策略不同的主要原因吧。他们在对于 dock 定义,各有优缺点:

优点:小鹏 P7 dock 栏在左侧便于用户操作 / 特斯拉 Model 3 dock 栏功能较多还有功能扩展设计

缺点:小鹏 P7 dock 栏功能相对较少,在操作空调调温度体验很差 / 特斯拉 Model 3 dock 栏距离主驾驶较远的功能点击困难,因此他们在对于功能定义排序有着很好的策略,将常用的功能集中于靠近主驾驶左侧区域。

车载设计万字干货!超全面的 HMI 竞品分析手册

理想 one 做的比较特别,一般车载系统的设计 dock 栏不是放在左侧 or 底部 (PS:海外版本有的国家主驾驶是在右侧的,那么放在左侧的 dock 栏设计要移到右侧区域中)但是理想 one 的 dock 也是放在靠近主驾驶区域的位置。

车载设计万字干货!超全面的 HMI 竞品分析手册

3. 自己理解 + 新的 idea

在对于 dock 做设计方案的时候,要考虑几个要素:

  1. 在安全驾驶为前提下便于用户操作;
  2. dock 栏的内容要使用频率较高的功能;
  3. dock 栏的交互手势不要过于复杂,点击、左右、上下滑动即可长按的操作千万别有;

新的 idea,根据用户习惯可进行对 dock 功能进行编辑,dock 功能分为可编辑为不可编辑,比如返回主页页面设定为不可编辑,因为如果改动了这个,全局的交互都会因此改变,再出设计方案就要多出很多内容,所以需要可编辑为不可编辑,就像手机自带的功能没办法删除一个道理。

最后来个总结:

在做竞品分析的时候,不建议视觉设计和交互分的太明显,在一个产品的设计体验上,他们是互相辅佐的,是一个互补的关系,如果你想要很好的锻炼你自己一下,就要尝试一下交互和视觉一起来做分析,还是那句话:站在用户角度去为用户考虑设计。

文章中如有不足之处,欢迎补充交流,我们下期见

点赞 36
收藏 175

复制本文链接 文章为作者独立观点不代表优设网立场,未经允许不得转载。