HMI 竞品分析- 实战演练

用户头像
上海/设计爱好者/4年前/37298浏览
HMI 竞品分析- 实战演练

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

前沿:


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


大家很好奇我为什么想做一份HMI的竞品分析呢? 因为我想做第一个发表实战演练的HMI竞品分析报告,大家可以去搜索一下站酷、百度、知乎都没办法搜索到直接可用的信息,人人都是产品经理更是搜不到任何信息,只有别的行业的竞品分析,站酷平台只有3年前Pursuer设计发表了一篇仅有空调一个模块的竞品分析,我在写每一篇文章的初衷,就是想弥补HMI行业的内容,将繁琐的知识通过我写的文章📖,能够让我的读者们通熟易懂,能够敢于跨入🏃这个行业中去。


这篇文章的主要的核心就是实战演练为主,有关于竞品分析的基础认知我这边就不过多和大家阐述了,竞品分析的方法论等等内容,我就不一一列举,我会直接穿插到这篇文章中去,作为实战演练的一部分,如果大家想看基础知识可以关注一下站酷中的 「斜杠7湿兄」、「郝小七」、「幺零三」这三位作者。


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


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


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


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



设计师需要做的任务

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


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



竞品分析注重点

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


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


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


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



竞品的选择

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


间接竞品

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


举个例子🌰:

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

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


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



如何收集车载竞品资料

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


预约4S门店试驾

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


汽车测评视频

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


下载相关 - APP

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


其他获取途径

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



从设计师角度做竞品分析

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


明确竞品选择

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



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


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


特斯拉Model 3 中控屏:1920x1200

蔚来 ES6中控屏 :1600x1400  /  仪表盘:1920x720

理想 ONE中控屏:2608x720 / 仪表盘:1920x720 / 副驾驶娱乐屏:1920x720 功能控制屏:1280x720

小鹏 P7中控屏:2400x1200 / 仪表盘:1920x720


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


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



竞品交互分析

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


空调交互方式  🆚  大比拼

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


中控交互分析

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


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


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


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


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


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


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


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


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

最佳 NO:1 ➡️ 理想ONE (操作区域大,在安全和便捷性都排名四款车第一)

还行 NO:2 ➡️ 蔚来ES6(调节温度和风量 都可以在dcok 滑动完成 操作区域可观)

其次 NO:3 ➡️ 特斯拉Model 3(调节温度在dcok 滑动完成 操作区域可观,风量则需要再其他页面完成)

最后 NO:4 ➡️ 小鹏P7 (需要长按再进行操作温度的滑动,长按的交互方式在车机是一种相对不好的交互方式)


语音交互分析

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

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


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

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


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


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


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

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


👊总结一下

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



竞品方控分析


特斯拉Model 3方控 

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

1.控制音量:直接按下滚轮可以静音 或者 取消静音

2.切换音乐:向左拨动切换上一首歌曲,向右拨动切换下一首歌曲

3.调节后视镜:进入车辆控制 ➡️ 快速控制 ➡️  后视镜 ,即可使用左侧滚轮调节后视镜

4.调整方向盘位置:进入车辆控制 ➡️ 快速控制 ➡️  调整 ➡️ 方向盘 ,即可使用左侧滚轮调节方向盘,上下滚动滚轮来调整方向的高度 / 倾斜角度,左右滚动滚轮用来拉近或者远离方向盘

5.调整大灯角度:进入车辆控制 ➡️ 维护 ➡️  调整大灯 ,即可使用左侧滚轮调整大灯角度
🚙 切记注意点,特斯拉的车子出场时就已经将大灯调整到最佳位置,建议不要随便的尝试调整,让们安全驾驶,远离事故。


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

1.语音指令:按下右侧滚轮,就能启动语音控制,说出相对于的指令,例如:将温度调整为XX度(这个温度的值也是之前设定好的默认值,Model 3方控无法做到调节温度增减功能,特斯拉的设计理念是做减法,所以他在方控没有做过多复杂的一些操作)

2.调节设定速度: 主动巡航情况下,上下调整车速;可以快速调整单位为5km/h ,慢速度调整单位为1km/h

3.调整跟车距离:右侧滚轮左右调整时可以选择设置1-7范围的跟车距离



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

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


蔚来ES6方控 

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



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

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


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



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

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


小鹏P7方控

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

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

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



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

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


理想ONE方控

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

1/向上短按唤醒语音/结束对话。 向下短按接听电话、长按挂断电话

2/长按进入仪表页面内容, 向上/向下滚动滚轮切换页面。退出仪表页面内容后,短按静音/取消静音;向上/乡下滚轮滚轮 增加/减少音量

3/向上/向下短按 切换下一首/上一首


1/ 自动泊车启动后,向上短按开始泊车/继续泊车 ; 自动泊车未启动,向上短按开始自动泊车;向下短按激活自定义键。

2/ 长按进入仪表屏页面内容,向上/向下滑动滚轮切换页面。退出仪表屏内容后,向上/向下滑动滚轮,巡航车速增加/减少1km/h ;短按设置巡航车速为道路限速。

3/ 向上短按执行NOA系统 推荐变道,向下短按取消NOA系统推荐变道


👊总结一下

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



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



竞品UI界面分析

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


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


主界面分析

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



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


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


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


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


👨‍🏫 延展一下小知识点,🔨 敲重点了,提高注意力 听一下 👇👇👇



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

1.把学习成本降至最低;

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


👊 总结一下

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


在用色方面:

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


自己理解 + 新的idea💡


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


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



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



Dock栏分析

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


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


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


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


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


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


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


👊 总结一下

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


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

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

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


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


自己理解 + 新的idea💡

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

1.在安全驾驶为前提下便于用户操作;

2.dock栏的内容要使用频率较高的功能;

3.dock栏的交互手势不要过于复杂,点击、左右、上下滑动即可  🙅 长按的操作千万别有;


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



最后来个总结:


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




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


下期文章预告:HMI - 语音探索



作者:设计界的影帝


本文由 @设计界的影帝 原创发布。未经许可,禁止转载。


646
举报
|
1420
分享
相关推荐
评论
用户头像
评论你的想法~
表情
喜欢TA的作品吗?喜欢就快来夸夸TA吧!
推荐素材
原创UIUX交互橙红渐变炫酷视觉平面设计作品集模板PSD
高级表盘系列UI源文件
Security Camera UI kit
森系3D渐变流体抽象矢量UI背景图
手表表盘UI系列
【新年UI图标】美食icon
我的钱包-UI界面设计-app
【新年UI图标】体育icon
【新年UI图标】积分icon
【新年UI图标】礼物/活动icon
【新年UI图标】旅行icon
新拟态风格 UI设计组件库
科技医疗透明柜UI界面设计
UI界面 组件
APP/小程序商业项目UI模板|99个高保真UI+79个原型
UI应用平面图标
UI通用设计素材1
盲盒APP UI设计
【新年UI图标】相机icon
【新年UI图标】活动icon
高级感金属拟物 UI设计组件库
【新年UI图标】银行卡icon
智能家居中心 简约 UI设计组件库
你可能喜欢
相关收藏夹
大家都在看
登录注册